웹사이트 첫 화면을 그리기도 전에 손이 멈출 때가 있습니다. 자료는 많은데 뭘 먼저 봐야 할지 모르겠고, 클라이언트는 “깔끔하게”, “세련되게” 정도만 말합니다. 그런데 막상 시안을 꺼내면 반응은 늘 비슷하죠. “생각한 느낌이 아니에요.” 그러면 처음 안으로 돌아갑니다. 화면을 다시 뜯고, 수정 횟수는 늘고, 팀 안에는 이런 말이 남습니다. 컨셉을 초반에 못 박았어야 했다고.
웹디자인 컨셉은 예쁜 를 고르는 일이 아닙니다. 화면 톤 하나 정하는 문제도 아니고요. 이 사이트가 왜 존재하는지, 누가 들어와서 무엇을 해야 하는지, 그 흐름을 시각으로 묶는 일에 가깝습니다. 그래서 감각만 믿고 가면 중간에 흔들립니다. 반대로 기준이 있으면 의사결정이 빨라집니다. 수정도 덜 쌓이고요.
실무에서 저는 보통 4단계로 정리합니다. 복잡한 방법은 아닙니다. 다만 이 순서를 건너뛰면 뒤에서 꼭 비용을 치릅니다.
1단계. 브랜드와 타깃부터 고정한다
컨셉은 “어떻게 예쁘게 만들까”보다 “누구에게 뭘 시킬까”에서 출발해야 합니다. 먼저 브랜드 목표를 한 줄로 써보면 좋습니다. 문의를 늘리는 게 목적인지, 제품 이해를 돕는 게 먼저인지, 낡은 이미지를 걷어내는 리뉴얼인지. 이 한 줄이 없으면 메인 비주얼도, 카피도, 도 전부 흔들립니다.
타깃도 넓게 잡으면 소용이 없습니다. “20~40대 전체” 같은 말은 사실상 아무도 정하지 않은 것과 비슷합니다. 직업, 디지털 사용 습관, 주로 보는 경쟁 서비스, 정보를 읽는 속도까지 떠올려야 화면이 달라집니다. 예를 들어 20대 소비자 대상 서비스라면 첫인상과 리듬이 빨라야 합니다. 반면 사이트는 화려함보다 신뢰와 정보 구조가 먼저입니다. 같은 세련됨이라도 생김새가 완전히 다릅니다.
이 단계에서 체크할 건 단순합니다.
- 브랜드 목표를 한 문장으로 말할 수 있는가
- 타깃 사용자의 하루를 구체적으로 설명할 수 있는가
- 경쟁 사이트 3개를 보고 무엇이 겹치고 무엇을 비껴갈지 적어뒀는가
이걸 안 하고 들어가면, 시안 리뷰 시간에 늘 감정적인 단어만 오갑니다. “좀 더 고급스럽게”, “조금 더 트렌디하게.” 실무에서는 이런 피드백이 제일 어렵습니다. 기준이 없으니까요.
2단계. 키워드를 화면 언어로 바꾼다
여기서 많이들 “미니멀”, “프리미엄”, “친근한” 같은 단어를 적고 끝냅니다. 그런데 그런 말은 다들 좋아하는 표현이라서, 막상 화면으로 옮기면 사람마다 떠올리는 그림이 다릅니다. 키워드는 더 아래로 내려가야 합니다. 정돈된, 대비가 강한, 여백이 넓은, 텍스트가 짧은, 사진 톤이 차분한 식으로요. 실제로 보일 요소로 바꿔야 쓸모가 생깁니다.
그다음 를 만듭니다. 컬러, 폰트, 버튼, 카드, 사진 톤, 아이콘 스타일을 한 판에 붙여놓는 거죠. 별거 아닌 것 같아도 이 단계가 꽤 큽니다. 팀이 같은 그림을 보게 되거든요. 회의 때 “너무 어려 보여요”, “조금 무거워요” 같은 말이 나와도 훨씬 빨리 좁혀집니다. 무엇이 무겁고, 무엇이 딱딱한지 눈앞에 있으니까요.
저는 보통 이렇게 제한을 둡니다.
- 메인 컬러 2개, 서브 컬러 2개 정도만 먼저 잡기
- 제목용 폰트와 본문용 폰트를 분리해서 비교하기
- 이미지 예시는 5장 안팎으로, 톤이 섞이지 않게 고르기
레퍼런스를 많이 모으는 것보다 덜어내는 쪽이 더 어렵습니다. 하지만 컨셉은 양이 아니라 선별에서 선명해집니다.
3단계. 으로 흐름을 먼저 본다
여기서 곧장 비주얼 시안으로 뛰어드는 경우가 많습니다. 솔직히 제일 위험한 구간입니다. 예쁜데 안 읽히는 화면, 멋진데 전환이 안 되는 화면이 여기서 나옵니다.
와이어프레임은 페이지의 뼈대입니다. 사용자가 어디로 들어와서, 어떤 정보를 먼저 보고, 어디서 멈추고, 마지막에 어떤 행동을 하게 할지 정하는 단계죠. 메인 화면 상단에 상품을 바로 보여줄지, 브랜드 스토리를 먼저 깔지, 후기와 인증 배지를 앞에 둘지에 따라 전체 구조가 달라집니다.
특히 쇼핑몰, 예약 서비스, 문의형 사이트는 이 차이가 큽니다. 버튼 하나 위치를 옮기는 문제 같아 보여도 실제로는 설득 순서를 바꾸는 일이라서요. 사용자가 들어온 뒤 3초 안에 뭘 이해해야 하는지, 10초 안에 어떤 행동 후보가 보여야 하는지 직접 시뮬레이션해보면 우선순위가 바로 드러납니다.
현업에서는 이 단계가 귀찮아서 자주 생략됩니다. 일정이 촉박하면 더 그렇고요. 그런데 뒤에서 두세 번 엎는 것보다 와이어 한 번 더 보는 게 훨씬 쌉니다. 이건 거의 예외가 없습니다.
4단계. 로 흔들림을 막는다
컨셉이 무너지는 건 거창한 데서가 아니라 디테일에서 시작됩니다. 어떤 페이지는 버튼이 둥글고, 어떤 페이지는 각져 있고, 제목 크기는 들쑥날쑥하고, 카드 간격도 제각각. 이러면 사용자는 이유를 설명 못 해도 완성도가 낮다고 느낍니다.
그래서 스타일 가이드는 선택이 아니라 마감 장치에 가깝습니다. 컬러 규칙, , 버튼 상태, 카드 스타일, 이미지 비율, 여백 기준을 정리해 두면 그다음부터는 판단 피로가 줄어듭니다. 디자이너가 바뀌어도 톤이 덜 흔들리고, 단계에서도 해석 차이가 줄어듭니다.
결국 컨셉은 한 장의 멋진 메인 시안으로 증명되지 않습니다. 여러 페이지를 넘겨도 같은 브랜드처럼 느껴질 때 비로소 살아납니다.
저도 초반에는 일단 예쁘게 만들면 된다고 생각했습니다. 그런데 실무에서는 예쁜 안보다 설명 가능한 안이 오래 갑니다. 왜 이 구조인지, 왜 이 톤인지, 왜 이 버튼이 여기 있는지 말로 풀 수 있어야 클라이언트도 움직입니다. 그 설명이 막히면 수정이 시작되고, 수정이 길어지면 컨셉은 더 흐려집니다.
웹디자인 컨셉은 감각의 문제가 아니라 순서의 문제에 가깝습니다. 브랜드를 잡고, 타깃을 좁히고, 키워드를 화면 언어로 바꾸고, 흐름을 설계하고, 마지막에 기준을 고정하는 것. 이 다섯 박자가 맞아야 결과물이 덜 흔들립니다.
지금 컨셉 때문에 막히고 있다면, 화면부터 열지 말고 앞단 기록부터 다시 보세요. 대개 문제는 색이 아니라 기준에서 시작됩니다.