히히웍스 웹사이트 작업기
가장 가까운 이웃의 대문을 만들어주기
작업하게 된 배경
지난 5월, 대장간에서 바이브 코딩을 하며 놀고 있던 나에게 서현누나가 연락을 줬다. “친구들이랑 서울숲에 30평짜리 작업 공간 만들건데 너도 들어올래?” 나는 좋다고 했다. 아마 “낭만 있으니까 일단 나도 한다” 라고 대답했던 것 같다. 일단 대장간에서의 거리가 가까웠고, 서울숲이라는 동네가 주는 칠한 분위기에 대한 기대가 있었으며, 마침 사무실 공간 같은 걸 찾고 있었기 때문이다.
처음에는 아무것도 없었다. 서울숲 카페거리, 30평짜리 빈 공간에 에폭시 바닥과 근처 사무실에서 싸게 가져온 서랍장과 의자 몇개 뿐이었다. 본격적인 여름이 시작되던 6월 말부터 접이식 책상과 이케아 의자, 모니터, 당근에서 산 스피커를 들고 와 작업을 하기 시작했다.
한편 이 공간의 이름은 ‘히히홈’인데, 서현누나가 만든 브랜드 그로스 에이전시의 ‘히히웍스’의 이름을 따 지어졌다. 에이전시 이름 참 잘 지었다고 생각한다. 대표의 이미지랑 찰떡이다. 이 공간에 입주하기 전에 누나를 만난게 두세번이 안되지만 네트워킹 파티에서 만났을 때마다 그냥 친근하고 나랑 비슷한 사람이라고 생각했다. 사람들을 좋아하고, 에너지가 좋으면서, 일에 대한 욕심이 많은 사람. 동시에 친절한 사람.
여름부터 히히웍스의 이웃 프리랜서로서 히히홈에서 작업도 하고 미팅도 하고, 친구들을 불러 코워킹도 하면서 재미있게 지냈다. 히히웍스는 처음에 작은 회사들의 일을 도와주며 포트폴리오를 쌓아가다 6개월만에 1억 매출을 찍고 다음 스텝을 준비하고 있다.
그 과정에서 이웃이자 히히홈 막내 남동생 포지션에 있는 나에게 히히웍스 포트폴리오 웹사이트 제작 일을 맡겼다. ‘바이브 코딩 개발자’의 역할에서 벗어나 디자인도 같이 하는 크리에이티브한 작업들을 찾고 있던 참이라 반가운 제안이었다. 원래 내가 개인적으로 만들던 사이트들처럼 전형적이지 않은 그래픽으로 네 마음대로 잡아달라는 주문을 받았다.
고민의 시작
킥오프 미팅에서는 히히웍스의 리더, 디자이너, 카피라이터와 함께 레퍼런스들을 놓고 웹사이트 디자인 방향성에 대한 이야기를 주고받았다. 이 웹 사이트를 만들 때 추구해야 할 것과 삼가야 할 것들을 구분하고, 좋아하는 다른 레퍼런스 사이트들을 왜 좋아하는지 인터뷰하는 시간을 가졌다.
그리고는 내 책상으로 돌아와서 히히웍스의 회사소개서 PDF를 보며 팀 이름의 의미와 기존의 포트폴리오들을 웹페이지로, 시각적 통일성 안에 놓을 방법들에 대해 고민했다.
픽셀 아트 스타일의 로고, “LOVE”, “Joy” 등의 태그라인 문구가 아이 같은 순수함, 장난스러움을 나타내는 한편 작업 결과물은 각각의 브랜드에 맞춘 프로페셔널한 무드여서 같이 놓았을 때 어색함이 있었다. 로고를 살짝 변형하거나, 로고 및 브랜딩 요소와 포트폴리오 작업물 사이의 간극을 좁혀줄 다리 역할을 해줄 무언가를 추가해야 했다.
페이지 구조와 대문의 역할
보편적인 웹사이트는 메뉴(네비게이션) 바를 중심으로 하나의 페이지가 하나의 역할을 하도록 설계되어 있다. 포트폴리오 웹사이트라면 처음 접속했을 때 뜨는 페이지를 “홈”으로 하고, 메뉴에 “프로젝트”, “about”, “문의하기” 등을 페이지로 구분하는 것이 일반적이다.
이 사이트에 들어온 사람들이 이곳에 오랫동안 머무르게 하려면 어떻게 해야 할까? 사이트에 목적을 가지고 들어온 사람들을 바로 만족시켜야 한다. 작업 결과물들에 바로 접근해서 둘러보게 해야 한다. 그래서 “홈”페이지와 프로젝트 리스트 페이지의 기능을 메인 대문에 합쳐버렸다.
대문 페이지 전체가 세로로 움직이는 거대한 carousel 역할을 하도록 했다. 마우스를 호버하면 다음 작업으로 스크롤되는 애니메이션은 멈춘다.
또 각각의 작업에 대해 테마 색상(배경색, 폰트색)을 지정할 수 있도록 해 대문 페이지의 애니메이션과 해당 프로젝트 상세페이지에 적용했다.
로고의 경쾌함을 살리기 위해 기존의 채우기 있는 로고에서 윤곽선의 뻥 뚫린 그래픽으로 처리하고 히히웍스 팀 디자이너인 소혜 누나의 허락을 받았다. 다행히 히히 사람들도 좋은 아이디어라며 긍정적으로 받아들여 주었다.
장난스러운 히히웍스 로고와 각각의 포폴의 썸네일들을 연결하기 위해 점선과 같은 요소를 적극적으로 활용해 연결성을 만들었다.
about 페이지를 따로 파는 대신에 대문에서 ‘소개 더보기’ 버튼을 누르면 소개에 해당하는 내용이 뜨도록 했다. 화면을 2단 레이아웃으로 나누면서. 좌측의 영역이 확장됨과 동시에 우측 프로젝트 영역의 요소는 줄어진 면적에 맞춰 간소화되어 보여지도록 했다.
문의하기 역시 새로운 페이지 대신 대화 상자로 처리했다. 외주 세일즈 가이 출신으로서, 영업하는 데 참고할 수 있도록 예산 규모를 객관식으로 입력하는 영역을 추가했다. 또 일관된 사이트 디자인 무드를 위해 점선을 입력 칸의 테두리로 활용하고, 배경 색상과 폰트 색상이 유지되도록 했다.
사이트에서 남긴 문의는 사이트 관리자 계정의 구글 시트와 이메일에서 확인할 수 있다.
콘텐츠 관리가 쉽도록 하기
포트폴리오 사이트에 콘텐츠를 추가하고 관리하는 게 어려우면 안되기 때문에 headless CMS를 붙여 관리자 계정으로 쉽게 접근해 포트폴리오 콘텐츠를 수정하고, 노출 순서를 바꿀 수 있도록 했다.
콘텐츠 어드민은 사용하기 쉽게 만들어져 있지만, 각 콘텐츠 요소들과 작동 방식을 내가 정의했으기 때문에 사용 가이드를 PDF로도 만들어 드렸다.
배운 점
나는 진실된 디자인을 추구한다: 브랜드와 브랜드를 만들어나가는 사람들의 매력을 담아내는 디자인을 하고 싶지 유행하는 톤으로 묻거나 지워버리고 싶지 않아 한다.
크리에이티브한 일에는 시간이 많이 걸린다: 아직 프로세스가 안 잡혀서 그런 것도 있지만, 디자인 과정에서 마주하는 병목이 개발할때 생기는 병목보다 빡세다. 개발할 게 간단해서 금방 될 줄 알았는데 전혀 그렇지 않았음.