꿈꾸는 분홍빛의 공항: 웹사이트 기획·디자인 회고

게이트 앞, 바람에 날리는 비닐봉지의 첫 문장

처음 이 사이트를 만들기 시작했을 때 제가 마음속에 그려 두었던 이미지는 아주 단순했습니다. 바람에 날리는 비닐봉지. 가볍고, 흔하고, 때로는 우스워 보이기도 하지만, 적당한 바람만 있으면 뜻밖의 높이까지 올라가는 그 봉지요. 저는 그 장면을 제 포트폴리오의 첫 문장으로 삼고 싶었습니다. 그리고 그 문장을 자연스럽게 이어 줄 배경으로 공항을 선택했습니다. 공항은 기다림과 출발, 확인과 통과, 설렘과 경계가 동시에 작동하는 공간입니다. 스튜디오가 의뢰인과 만나 일을 준비하고 끝내 마무리하는 과정과 닮아 있습니다.

이 글은 그렇게 시작된 개인 스튜디오 포트폴리오 웹사이트의 기획과 디자인, 그리고 구현에 대한 제 회고입니다. 기술을 뽐내기보다, 왜 이런 선택을 했는지, 무엇을 끊고 무엇을 남겼는지, 실제로 겪은 고민을 가능한 한 솔직하게 적었습니다.

출발 전, 이번 비행의 목적

포트폴리오를 만드는 일은 늘 나를 위한 집과 남을 위한 안내소 사이에서 줄타기를 하게 만듭니다. 이번에는 그 사이의 긴장을 굳이 숨기지 말자고 마음먹었습니다. 저에게 필요한 것은 완벽한 박제된 전시가 아니라, 지금도 운항 중이라는 사실을 보여주는, 살아 있는 항로였습니다.

그래서 사이트의 목표를 명확히 잡았습니다. 첫째, “무엇을 잘하는지”를 30초 안에 감으로 느끼게 만들 것. 둘째, 실제로 함께 일하면 무엇이 편해지는지를 구체적으로 들려줄 것. 셋째, 언제든 다음 비행을 시작할 준비가 되어 있다는 신호를 잊지 않을 것. 이 세 가지가 이번 프로젝트의 기준점이었습니다.

공항의 문법으로 짠 무대: 랜딩에서 블로그까지

공항이라는 무대, 분홍빛 한 장면

브랜드 컬러가 분홍이라 히어로 섹션의 비닐봉지도 분홍으로 설정했습니다. 공항의 무채색 풍경 속에서 더 또렷하게 보이기도 했고, 스튜디오의 톤을 한 번에 각인시키는 데 유리했기 때문입니다. 비닐봉지를 과하게 사실적으로 만들지 않은 것도 의도였습니다. 누가 봐도 봉지지만, 누가 봐도 상징으로 읽힐 만큼의 여백을 남기고 싶었습니다.

히어로의 카피 역시 최대한 짧고 평평하게 눌렀습니다. 단어 몇 개만으로도 방향을 오해하게 만드는 경우가 많기에, “우리의 유영은 표류가 아니다”라는 정도의 뉘앙스만 남기고 과장된 장식은 모두 덜어냈습니다. 첫 화면에서 해야 할 일은 매혹도, 과시도 아니고 호흡을 맞추는 일이라고 믿었기 때문입니다.

탑승 수속의 순서로 짜인 랜딩 페이지

랜딩 페이지는 공항의 순서를 따라 구성했습니다. Baggage Drop → Seat Assignment → Flight Route → Recent Projects → Flight Log → Checklist/CTA. 말하자면, 처음 온 분이 머릿속에서 탑승 수속을 하듯 스튜디오와 ‘일할 준비’를 마치게 되는 동선입니다.

Baggage Drop

이전 고객들이 맡겼던 주요한 짐(의뢰, 프로젝트)을 수하물 태그의 시각으로 보여주었습니다. 태그에는 목적지가 있고, 출발지가 있고, 탑승객의 이름이 있습니다. 프로젝트도 비슷합니다. 어디서 출발했고, 어디로 가야 하며, 누구와 함께 가는지. 그 작은 종이 한 장에 프로젝트의 의미와 무게가 동시에 담깁니다. 저는 그 실제감을 좋아합니다. “이 스튜디오는 짐을 받는 방법이 단정하다”는 인상을 은근히 남기고 싶었습니다.

Seat Assignment

여기서는 왜 굳이 ‘1등석’을 말하는지 설명했습니다. 편안함의 종류가 다르다는 이야기입니다. 넓은 좌석과 조용한 객실 같은 물리적 조건이 아니라, 문제를 발견하는 속도, 의사결정의 투명도, 커뮤니케이션 피로의 감소를 1등석의 기준으로 삼았습니다. 반대로, 하위 등급 좌석에서 흔히 겪는 답답함—포커스가 흐려지고, 안내가 반복되며, 추진력이 끊기는—을 조금 현실적으로 적었습니다. 스튜디오가 약속할 수 있는 것과 약속하지 말아야 할 것을 분리해서 보여주려 했습니다. “무조건 잘 됩니다” 대신 “이 방식이라면 훨씬 수월해집니다”에 가까운 문장으로요.

Flight Route

스튜디오의 강점과 작업 리듬을 항로로 그렸습니다. 어느 구간에서 속도를 내고, 어느 구간에서 체크리스트를 확인하는지, 어떤 구간에서 리스크를 조기에 발견하는지. 프로젝트마다 고도가 다르니 항로도 달라지지만, 핵심 절차의 순서는 바뀌지 않는다는 점을 도식으로 보여주었습니다. 이 섹션을 만들며 “절차가 많아 보이면 복잡해 보일 수 있겠다”는 걱정도 했지만, 항로의 선 하나가 불안 대신 안심을 준다는 피드백을 많이 받았습니다.

Recent Projects

전광판 형식으로 최근 5개의 작업을 배치했습니다. “곧 이륙”, “막 도착” 같은 느낌이 자연스럽게 생기도록 시간의 표정을 앞세웠습니다. 전광판의 문법을 그래픽으로 과하게 흉내 내기보다는, 리듬과 간격, 나열의 정직함 같은 것을 가져왔습니다. 포트폴리오가 “한때”가 아니라 “지금”이라는 사실을 조용히 환기시키고 싶었습니다.

Flight Log

테스티모니얼은 짧고 구체적으로. “좋았다”보다 “무엇이 달라졌다”를 부탁드렸고, 실제로 그런 문장이 모였습니다. 길게 칭찬하는 문장은 가끔 현실과 멀어집니다. 저는 한 줄의 변화 기록이 믿을 만한 증거가 된다고 생각합니다.

Checklist & Boarding Ticket

FAQ는 질문 수를 욕심내지 않았습니다. 대신 결론을 첫 문장에 두었습니다. 페이지 맨 아래에는 항공권 형태의 CTA를 배치했습니다. 이름과 연락처를 적는 단순한 폼이지만, “나의 다음 비행을 예매한다”는 작은 의식이 생기는 지점입니다. 저는 이 의식이 전환을 돕는다고 믿습니다.

창문을 통해 보는 것처럼: Works의 관람 방식

Works 페이지는 두 섹션으으로 단정하게 나눴습니다. 상단의 Featured에는 스튜디오의 방향을 가장 잘 보여주는 작업을 크게 배치했고, 그 아래의 Recent Projects에는 전체 작업을 균형 있게 배열했습니다.

여기서 가장 공을 들인 장치가 비행기 창문 형태의 카드입니다. 방문자가 마치 “창밖에서 기내를 들여다보는 시선, 혹은 그 반대”로 프로젝트를 보게 만들고 싶었습니다. 마우스를 올리면 창밖 하늘이 먼저 드러나고 그 위로 클라이언트 로고가 얹힙니다. 프레임이 바뀌면 감상하는 자세가 바뀝니다. ‘바깥에서 안을 구경’하던 태도에서 ‘안에서 밖을 바라보는’ 태도로요. 저는 이 시선의 전환이 포트폴리오의 공기를 크게 바꿔 준다고 느꼈습니다.

필터링은 깔끔하게 세팅될 수 있도록 정리하여 배치했습니다. 각 태그는 CMS와 연결되어 있어, 새 태그를 CMS에 추가하면 필터에도 자동으로 반영됩니다. 작업이 쌓일수록 구조가 대신 일해 줘야 유지가 됩니다. 이번에는 그 유지의 체력을 미리 마련해 두었습니다.

프로젝트를 “읽는” 페이지, 좌와 우의 균형

프로젝트 상세 페이지에서는 왼쪽에 개요, 오른쪽에 이미지/디테일을 배치했습니다. 스크롤을 내릴수록 글과 그림이 엉키지 않고 서로를 보완하도록요. 상단 개요에는 타이틀·클라이언트·작업연도·태그와 함께 배경과 목표를 아주 짧게 적었습니다. 본문에는 과정의 핵심 장면만 간추려 담았습니다. 모든 걸 다 보여주려는 유혹을 여러 번 참았습니다. 적은 정보를 정직하게 배치하는 편이 종종 더 신뢰롭다는 것을 실무에서 많이 배웠기 때문입니다.

하단에는 관련 프로젝트와 이전/다음 링크를 놓았습니다. 맥락으로 이어 보고 싶은 분과, 속도로 훑고 싶은 분 모두가 편하게 움직일 수 있도록요.

소개는 짧게, 공기는 길게: Studio 페이지

Studio 페이지는 같은 패턴이 지루해질 즈음 숨 한번 고르게 만드는 역할을 맡깁니다. 히어로에 비행 중인 하늘 영상을 넣되, 과장된 효과는 배제했습니다. 영상은 설명 대신 공기를 전달하는 장치여야 한다고 생각했습니다. 스튜디오의 지향점과 히스토리는 문장으로 짧고 선명하게. 스스로를 과장해 포장하는 문장보다는, 어떻게 일하는지를 한두 문장에 담아두었습니다. 소개는 구구절절 길어질수록 위험해진다고 생각했습니다. 저는 이 페이지가 “무엇을 기대해도 되는지”만 알려주고 조용히 물러나게 만들고 싶었습니다.

기록이 일하는 방식: Blog와 Article

블로그는 공지 게시판이 아니라 작업의 뒤편을 기록하는 곳으로 정했습니다. 목록 페이지는 하나의 Featured Article을 크게 보여 주고, 아래로 All Articles를 붙여 전체를 탐색할 수 있게 했습니다. Works와 마찬가지로 태그 필터가 붙어 있고, 이 태그 역시 CMS와 연결되어 있어 추가/수정이 곧 노출로 이어집니다.

아티클 페이지는 태그–제목–작성일을 상단에서 먼저 인지하게 하고, 큰 썸네일 아래에 왼쪽 목차, 오른쪽 본문을 배치했습니다. 목차를 클릭하면 해당 위치로 부드럽게 이동합니다. 본문은 문단의 호흡을 일정하게 맞추고, 소제목 문장을 공들여 다듬었습니다. 페이지 하단에는 관련 글과 전·후 글 링크를 함께 배치해 읽기의 리듬을 끊지 않게 했습니다.

운항을 가능하게 하는 기술서: 인터랙션·반응형·Framer·카피

손끝의 무게를 덜어내는 인터랙션

이번 사이트의 인터랙션은 어디까지나 자리에서 조용히 일하는 스태프에 가깝습니다. 호버로만 드러나야 하는 정보와 항상 보여야 하는 정보의 경계를 오래 고민했고, “사용자의 판단을 돕지 않는 움직임”은 과감히 제거했습니다.

애니메이션의 시간 값은 짧고 단정하게 가져갔습니다. 중요한 전환일수록 더 짧고 또렷하게. 스크롤과 함께 흐르는 페이드/슬라이드는 최소한만 사용했습니다. 모션 감소 설정(prefers-reduced-motion) 을 켜 둔 환경에서는 더 단순한 버전이 동작합니다. 보는 사람의 몸이 먼저 편해야 사이트가 오래 버틴다는 믿음 때문입니다.

Framer로 짠 항로, CMS로 이어 붙인 시간

이번 구축은 Framer로 진행했습니다. 설계와 구현, 미세 조정이 끊기지 않고 이어지는 감각이 필요했기 때문입니다. 버튼, 카드, 섹션 헤더 같은 반복 요소는 컴포넌트로 묶고, 상태는 Variants로 정리해 유지보수의 체력을 아꼈습니다.

Works와 Blog의 태그/필터 시스템은 CMS와 긴밀히 연결해 두었습니다. 태그를 CMS에서 만들면 곧바로 필터가 생기고, 노출 규칙도 함께 움직입니다. “한 번의 입력이 여러 곳에서 작동”하도록 묶어 두면, 콘텐츠가 늘어날수록 빛이 납니다. 스크롤 위치나 뷰포트 진입에 따른 작은 반응은 Framer 기본 기능으로 충분했고, 정확한 타이밍이나 구현이 불가능한 몇 지점만 코드로 보완했습니다. 도구가 제공하는 표준을 우선 믿고, 꼭 필요한 부분에서만 가볍게 덧댄다—이번 구축의 기술 원칙은 그 한 줄로 요약됩니다.

말투도 경험이다: 카피의 온도

카피는 안내 방송처럼 짧고 정확해야 한다고 생각했습니다. “어서 오십시오”라는 장식 대신, “무엇을 할 수 있는지/하지 않는지”를 바로 말하려고 했습니다. 랜딩의 섹션 타이틀도 공항 표지판처럼 담백한 어조를 유지했습니다. 다만 지나치게 차갑지 않도록, 문장 사이사이에 작은 여유를 심었습니다. “Now Boarding”이라는 흔한 표현도, 주변 문장과 간격을 조절하니 가벼움 대신 기대가 남았습니다. 결국 말투도 경험인가 봅니다. 과장과 빈말을 걷어낸 만큼, 페이지의 호흡이 편안해졌습니다.

로그북을 덮고 다시 활주로로: 운영·선택의 흔적·다음 운항

운영은 기록으로 완성된다

사이트는 공개 후부터가 진짜 시작입니다. 저는 업데이트를 작은 로그로 남기고 있습니다. 무엇을, 왜, 어떻게 바꿨는지. 바쁠수록 기록이 먼저 사라지지만, 기록이 사라지면 나중에 같은 고민을 되풀이하게 됩니다. 작은 기록이 작은 개선을 부르고, 작은 개선이 어느 날 큰 안정감으로 돌아온다는 걸 여러 번 경험했습니다. Works는 한 번에 몰아 올리기보다 간격을 두고 업데이트하려 합니다. 같은 시기에 들어와도 매번 조금씩 다른 풍경을 보도록요. 블로그 역시 완벽한 통찰을 약속하기보다, 막 지나온 작업의 체온을 남기려 합니다.

남긴 것과 덜어낸 것, 선택의 흔적

이번 프로젝트에서 가장 힘들었던 일은 ‘더 보여주고 싶은 마음’을 계속 덜어내는 일이었습니다. 예쁜 장치, 번지르르한 모션, 길어진 설명—이런 유혹은 언제나 찾아옵니다. 그럴 때마다 “이 장치가 정말로 방문자의 판단을 돕는가?”를 스스로에게 물었습니다. 돕지 않는다면 내려놓았습니다. 대신 여정의 골격을 단단히 하고, 정확한 자리에 정확한 정보만 놓았습니다. 멀리서 보면 담백하고, 가까이 보면 정돈된—그 정도의 균형이 이번 사이트의 표정이 되었습니다.

물론 아쉬움도 남습니다. 모바일의 사용성은 여전히 데스크톱에 비해 아쉬운 편이고, 몇몇 특정 구간은 더 과감한 여백으로 다듬고 싶곤 합니다. 하지만 저는 이 불완전함을 두려워하지 않으려 합니다. 공항은 늘 공사 중이고, 표지판은 가끔 바뀝니다. 그 변화 속에서 길을 다시 찾는 일이, 결국 여정의 일부니까요.

다음 운항을 위한 간단한 메모

곧 다국어 전환을 본격적으로 도입할 예정입니다. 언어가 바뀌면 문장 길이가 달라지고, 문장 길이가 달라지면 레이아웃의 균형이 달라집니다. 지금의 구조가 어디까지 유연한지 점검하고, 필요한 곳은 과감히 다시 짜보려 합니다. Works의 메타데이터도 더 의미 중심으로 보강할 계획입니다. “무엇을 만들었다”보다 “무엇을 해결했다”를 짧은 문장으로 고정해, 각 프로젝트의 핵심이 한눈에 들어오게요.

그리고 접근성 점검을 주기적인 습관으로 만들려 합니다. 포커스 링, 대비, 키보드 탐색, 모션 감소—한 번 맞춰 놓고 잊어버리기 쉬운 항목들일수록, 정기적으로 다시 확인해야 합니다. 경험의 질은 늘 작은 습관에서 무너지고, 작은 습관에서 다시 세워지니까요.

착륙 후, 다시 이륙을 준비하며

되돌아보면 이번 사이트는 바람에 날리는 비닐봉지가 공항의 바닥을 스치다 천천히 떠오르는, 그 짧은 장면을 오랫동안 붙잡아 늘린 작업이었습니다. 가볍고 흔한 사물로 시작했지만, 그 사물이 품고 있는 우연과 의지를 믿었습니다. 스튜디오라는 이름으로 일한다는 것 역시 그 사이 어디쯤에 서는 일이라고 생각합니다.

이 사이트는 여기서 끝나지 않습니다. 전광판의 숫자는 바뀔 것이고, 블로그의 목차는 늘어날 것입니다. 태그도 새로 생길 것이고, 필터의 조합은 더 풍부해질 것입니다. 언젠가 히어로의 비닐봉지가 다른 계절의 빛을 품게 될지도 모르겠습니다. 그 변화 하나하나가 제가 계속 일하고 있다는 증거가 되었으면 합니다.

읽어 주셔서 감사합니다. 만약 이 여정에 동행하고 싶으시다면, 페이지 맨 아래 항공권 모양의 작은 폼에 이름을 남겨 주세요. 그 순간부터 우리는 같은 항로를 바라보게 될 것입니다.