건축사무소 포트폴리오 디자인, 사진 옆에 설계의 맥락을 읽히는 편집 방식

건축 포트폴리오는 완성 사진뿐 아니라 어떤 조건에서 무엇을 설계했는지 보여 줄 때 읽을 내용이 생깁니다. MARGIN ARCHITECTS 콘셉트 시안은 신문처럼 제목과 사진, 소식을 구분해 배치합니다. 이 편집 방식을 바탕으로 프로젝트의 맥락과 정확한 참여 정보를 함께 전달하는 홈페이지 구성을 살펴봅니다.

MARGIN ARCHITECTS 시안은 심플웹이 만든 콘셉트 시안입니다. 실제 고객사나 운영 서비스가 아니며 화면에 표시된 상호, 상품, 인물, 후기, 수치와 연락처는 가상 예시입니다. 이 글은 화면에서 확인한 표현과 실제 제작 때 추가할 설계를 구분해 설명합니다.

1사진을 감상하는 화면에서 프로젝트를 읽는 화면으로

시안은 큰 영문 로고 아래 소개 문장, 건축 사진, 소식 목록을 나란히 놓습니다. 연한 종이색 바탕과 가는 구분선이 각 영역의 역할을 나눕니다. 사진 한 장이 전체 화면을 채우는 방식과 달리 처음부터 설계의 설명과 사무소 활동을 함께 읽게 하는 구성입니다. 이 방식이 모든 사무소에 맞는 것은 아니며 보유한 글과 프로젝트 자료의 양을 먼저 확인해야 합니다.

사진만 충분하고 설명 자료가 거의 없다면 칸을 많이 나누는 것이 오히려 빈약해 보일 수 있습니다. 반대로 설계 의도와 과정 기록이 있다면 편집형 구성이 자료의 성격을 드러낼 수 있습니다. 시안의 프로젝트와 수상, 사무소 소개는 가상 정보입니다. 실제 건축 실적을 보여 주는 사례가 아니며 사진 속 건축물을 심플웹이나 가상 사무소가 설계했다는 의미도 아닙니다.

2목록에서는 용도와 상태를 같은 위치에

프로젝트 목록을 만들 때는 이름과 연도, 용도, 위치처럼 비교 기준이 되는 항목을 정합니다. 모든 것을 카드에 넣기보다 방문자가 자신의 의뢰와 관련된 작업을 찾는 데 필요한 정보를 고릅니다. 완공 사진과 계획안 렌더링이 섞인 경우에는 진행 상태를 명확히 표시해야 합니다. 좋은 이미지라는 이유만으로 서로 다른 단계의 작업을 같은 실적처럼 보여 주지 않습니다.

실제 건축사무소의 프로젝트 디렉터리를 조사하면 목록과 필터를 통해 작업을 찾아가는 구조를 볼 수 있습니다. 여기서는 그런 정보 분류를 참고했으며 사진이나 문구를 옮기지 않았습니다. 프로젝트가 적다면 복잡한 필터보다 용도별 제목이 충분할 수 있습니다. 나중에 작업이 늘어날 때 같은 항목으로 등록할 수 있는지 실제 자료 몇 건을 넣어 보고 구조를 결정합니다.

3설계 설명은 조건과 선택의 관계를 쓰기

프로젝트 소개가 아름다운 공간을 만들었다는 문장으로 끝나면 사진이 이미 말하는 내용을 반복하게 됩니다. 대지의 조건, 기존 구조의 제약, 사용자의 요구 중 공개 가능한 내용과 그에 대한 설계 선택을 연결해 적어 봅니다. 무엇을 남기고 무엇을 바꾸었는지 설명하면 사진을 읽는 관점이 생깁니다. 과장된 평가보다 확인할 수 있는 사실과 설계 의도를 구분하는 것이 좋습니다.

한 프로젝트의 긴 소개를 그대로 첫 화면에 넣을 필요는 없습니다. 목록에서는 짧은 요약을 보여 주고 상세에서 배경, 선택, 공간의 순서로 나눌 수 있습니다. 전문 용어가 필요한 경우에도 독자가 이해할 설명을 덧붙입니다. 설계자의 목소리를 유지하면서 문단 길이와 제목을 조정하는 것이 편집 디자인의 역할입니다. 좋은 문장이 있다고 글자 크기를 지나치게 줄이지 않도록 합니다.

4크레디트와 사진 출처를 작품 가까이에

프로젝트에는 설계사무소 외에 협업 설계자와 촬영자, 시공 관계자가 참여할 수 있습니다. 실제 참여 범위를 확인하고 프로젝트 정보 근처에 크레디트를 둡니다. 공동 작업을 단독 작업처럼 보이게 하지 않는 것이 중요합니다. 사진 공개 권한과 표기 조건도 자료를 모으는 단계에서 함께 확인해야 합니다. 이미지가 크다는 이유로 출처를 페이지 밖으로 밀어내지 않습니다.

시안 사진은 분위기를 보여 주는 예시이므로 실제 건축 실적 사진으로 바꿔 사용하면 안 됩니다. 운영 홈페이지에는 공개할 수 있는 프로젝트 자료를 넣고 비공개 주소나 내부 도면이 드러나지 않는지 확인합니다. 위치를 상세 주소까지 표시할 필요가 없는 작업도 있습니다. 정보 공개 수준을 사무소가 결정하고 디자인에서는 그 수준에 맞는 일관된 표기 방식을 적용합니다.

5도면과 사진은 같은 크기 규칙을 쓰지 않아도 됩니다

공간 사진은 분위기와 재료를 보여 주고 도면은 관계와 구성을 설명합니다. 둘을 모두 같은 정사각형 카드에 잘라 넣으면 도면의 의미가 사라질 수 있습니다. 전체 도면을 읽는 영역과 필요한 부분을 설명하는 확대 영역을 구분할 수 있습니다. 선과 작은 표기가 보이는 해상도를 확보하되 페이지 전체가 무거워지지 않게 자료 크기를 조정합니다.

도면을 이미지로 제공할 때는 사진과 다른 대체 설명이 필요합니다. 단순히 프로젝트 도면이라고 쓰기보다 무엇을 설명하는 자료인지 짧게 적어 줍니다. 독자가 전문적인 축척 해석을 해야만 핵심을 이해하도록 만들지 않는 편이 좋습니다. 설계의 주요 관계를 설명하는 본문과 함께 배치하면 도면을 읽기 어려운 사람도 프로젝트의 의도를 따라갈 수 있습니다.

6모바일에서는 지면의 칸보다 읽는 순서를 유지하기

PC의 여러 열을 휴대폰에 그대로 줄여 넣으면 편집의 의미보다 글자의 작음이 먼저 느껴집니다. 소개와 사진, 소식이 세로로 쌓일 때 어느 내용이 먼저 나올지 정해야 합니다. 사진 아래의 캡션이 다른 사진과 붙어 보이지 않게 간격을 조정합니다. 시안의 모바일 캡처는 지면의 분위기를 유지하면서도 세로로 읽는 흐름을 검토할 수 있는 자료입니다.

영문 사무소 이름이 길거나 프로젝트명이 두 줄 이상이 되는 상황도 확인합니다. 구분선이 너무 촘촘하면 작은 화면이 복잡해 보일 수 있으므로 여백을 다시 정합니다. 상세 사진을 확대했다가 닫을 때 읽던 위치로 돌아오는지, 도면의 작은 글자가 실제로 보이는지도 점검합니다. 반응형 작업은 칸을 줄이는 것뿐 아니라 자료의 우선순위를 다시 표현하는 과정입니다.

7소식과 프로젝트를 같은 시간순으로 섞지 않기

채용 공지와 전시 소식, 완공 프로젝트는 서로 다른 정보입니다. 첫 화면에서 함께 소개할 수는 있지만 목록에서는 구분할 필요가 있습니다. 시안의 오른쪽 소식 영역은 프로젝트와 별개의 흐름을 보여 주는 참고점입니다. 공지가 자주 없다고 가상의 수상이나 새로운 소식을 만들어 넣지 말고 실제로 유지할 수 있는 콘텐츠만 선택합니다.

지난 소식은 날짜를 남기고 종료된 모집이나 행사는 상태를 표시합니다. 프로젝트를 수정할 때 사진과 설명이 바뀌었는지 기록할 운영 기준도 정할 수 있습니다. 언어 전환을 제공한다면 모든 자료가 양쪽에 있는지, 일부만 번역되는지 명확히 합니다. 메뉴에 언어 버튼이 있다는 사실과 전체 콘텐츠 번역이 준비되어 있다는 사실은 다른 범위로 검토해야 합니다.

8대표 프로젝트 세 건으로 틀의 유연성 확인하기

제작 전에는 사진이 많은 작업, 글이 긴 작업, 도면 중심의 작업을 각각 골라 보세요. 세 종류가 같은 상세 틀 안에서 자연스럽게 읽히는지 확인하면 편집 구조의 한계를 찾기 쉽습니다. 프로젝트명, 연도, 용도, 참여 범위, 공개 이미지, 사진 출처를 함께 정리합니다. 문의 화면에는 의뢰자가 준비할 수 있는 지역과 용도, 현재 진행 단계 정도부터 묻는 방법을 검토할 수 있습니다.

MARGIN ARCHITECTS의 지면형 표현은 자료를 읽는 재미를 만드는 한 방향입니다. 실제 사무소의 설계 철학과 공개 가능한 기록에 맞춰 칸의 수와 사진 비율을 조정해야 합니다. 심플웹에 프로젝트 자료와 앞으로 추가할 작업의 규모를 알려 주세요. 처음의 인상뿐 아니라 기록이 쌓인 뒤에도 관리할 수 있는 포트폴리오 범위를 함께 정리할 수 있습니다.

참고한 실제 서비스에서는 정보의 분류와 읽는 순서만 조사했습니다. 외부 문구와 이미지를 옮기지 않았으며 아래 시안은 해당 서비스와 관련이 없습니다. 조사 자료 1 · 조사 자료 2 · 조사 자료 3

이 콘셉트 시안 직접 보기

같은 업종의 다른 디자인 둘러보기

대표 프로젝트의 사진과 설계 설명, 공개 가능한 크레디트를 알려 주시면 기록을 읽는 포트폴리오 구조를 정리해 드립니다. 제작 범위 상담하기