WORK · 바로 쓰는 웹 · 앱 · 과정 공개

홈페이지 하나를 만드는데
시안을 16장 그린 이유

생각을 정리하고, 화면으로 결정하고, 디테일을 더해 완성하기까지. 이 홈페이지가 나온 순서를 그대로 적었습니다.

민호 · 코지메이커스 대표 2026.10 · 읽는 데 6분

01보여 드릴 자료가 없었습니다

주변 대표님들이 저를 소개해 주려고 했는데, 보여 줄 자료가 없었습니다. 그래서 홈페이지의 일을 “소개받은 사람이 30초 안에 여기 전문가다라고 느끼게 하는 것”으로 정했습니다. 성공 기준은 공개 후 한 달 안에 상담 5건입니다.

화면을 그리기 전에 업무 지도부터 그렸습니다. 누가 소개하고, 방문자가 무엇을 보고, 어디서 연락하고, 계약과 정산까지 어떻게 가는지. 9개 단계 중 사람이 떠나는 곳이 세 군데였습니다.

MAP · 9 STEPS

소개에서 정산까지, 사람이 떠나는 세 곳.

지도의 단계마다 방문자가 속으로 묻는 질문을 적었습니다. 그리고 질문마다 답할 콘텐츠를 하나씩 정했습니다.

가격은 넣지 않았습니다. 범위가 정해지기 전에 숫자부터 보이면, 그 숫자에 맞춰 아이디어를 줄이게 되기 때문입니다.

콘텐츠를 어디에 둘지 정하는 단계입니다. 레퍼런스 화면을 모아 9개 방향을 그려 보고, 원칙을 하나로 정했습니다. 메인은 신뢰, 결정은 사례에서.

그래서 메인은 위에서 아래로 한 번에 읽히게 쌓았습니다. 질문이 생기는 순서와 같습니다.

메인 화면의 순서. 방문자의 질문 순서를 그대로 따릅니다.

더 알고 싶은 사람을 위한 내용은 따로 나눴습니다. 누가 만드는지는 About, 무엇을 어떻게 만들었는지는 Work, 어떻게 생각하는지는 Blog에 둡니다.

처음 그린 회색 시안들은 “무엇이든 만드는 외주사”처럼 보였습니다. 그래서 하나의 강점으로 좁혔습니다. 혼자서는 정리되지 않는 생각을 함께 정리해 실제로 쓰는 서비스로 만드는 일입니다.

뼈대가 정해진 뒤에 모양을 골랐습니다. 시안을 16장 그린 것도 이 단계입니다. 같은 내용을 두고 어떤 모양이 가장 잘 전해지는지 비교했습니다.

흰 바탕: 처음엔 따뜻한 종이색이었습니다. 하지만 개발을 맡기는 곳은 먼저 정돈돼 보여야 합니다. 그래서 바탕은 희게 두고, 따뜻함은 이름과 말투가 맡기로 했습니다.
네 잎과 네 가지 색: 로고의 마침표 자리에 주황·파랑·초록·노랑 네 잎을 두었습니다. 사례마다 한 색을 맡아, 어디서 봐도 어느 이야기인지 알 수 있습니다.
사례마다 캐릭터: 개발 이야기는 딱딱하기 쉽습니다. 사례마다 작은 친구를 붙여, 처음 보는 분도 편하게 읽게 했습니다.

주려는 가치는 하나입니다. 어려운 개발 이야기를, 정돈되어 있으면서도 편하게 느끼게 하는 것입니다.

이 홈페이지는 저희가 고객 프로젝트에서 하는 순서를 그대로 거쳐 만들었습니다.

생각을 정리하고, 화면으로 결정하고, 디테일을 더해 완성합니다.

필요한 것을 정리하는 데서 끝나지 않고, 그 생각에 잘 어울리는 모양까지 함께 제안합니다.

고객님의 프로젝트에서도 같습니다. 무엇이 필요한지 함께 정리하고, 그 내용이 가장 잘 전해지는 화면을 골라, 실제로 쓰는 서비스로 완성합니다. 이 홈페이지도 그렇게 10월 24일에 나왔습니다.

홈페이지 제작은 어떤 순서로 진행되나요?

업무 지도 → 콘텐츠 기획 → 뼈대 → 디자인 → 개발과 공개 순서입니다. 화면을 그리기 전에 방문자가 무엇을 묻는지부터 정합니다.

시안은 몇 번까지 고칠 수 있나요?

횟수보다 기준을 먼저 정합니다. 누구에게 무엇을 전할지가 정해지면, 시안은 그 기준에 맞는지로 고릅니다.

공개한 뒤 글이나 사례는 직접 올릴 수 있나요?

네. 글과 사례를 정해진 형식으로 더하면 같은 디자인으로 나오게 만듭니다. 이 홈페이지의 사례 글도 그렇게 올립니다.