2014년, Sara Mote는 MOTE 에이전시를 Rembrant Van der Mijnsbrugge와 함께 설립했습니다. 전자상거래를 전문으로 하며, 초기 시장 전략과 브랜드 아이덴티티부터 디자인, 개발, 마케팅에 이르기까지 브랜드 여정의 모든 단계에서 고객과 협력했으며, 항상 지속 가능한 성장을 목표로 하고 있습니다. 15년 이상의 전자상거래 웹 디자인 경험을 통해 독립 브랜드부터 Fortune 500대 기업에 이르기까지 다양한 고객의 전략을 수립해 왔습니다.
미리 만들어진 웹사이트 테마를 편집하는 것은 쉽습니다. 예를 들어, 한 행에 네 개의 제품을 배치했을 때와 두 개의 제품을 배치했을 때 웹사이트가 어떻게 보일지를 몇 초 만에 미리 볼 수 있습니다. 하지만 완전히 맞춤화된 웹사이트의 경우, 코드를 수정하는 데 시간이 오래 걸리고 비용이 발생할 수 있습니다. 그래서 디자이너들은 개발 단계로 넘어가기 전에 웹사이트 목업을 만듭니다.
이 글에서는 웹사이트 목업에 대해 더 알아보고, 웹사이트 목업을 만드는 데 유용한 도구와 모범 사례를 소개합니다.
웹사이트 목업이란?
웹사이트 목업은 웹사이트의 최종 디자인과 레이아웃을 고정된 형태로 보여주는 시각적 미리보기입니다. 하지만 아직 기능적으로 작동하지 않으며, 사이트를 인터랙티브하게 만들기 위한 백엔드 코드가 포함되어 있지 않습니다. 웹 디자이너들은 웹 디자인을 개발 단계로 넘기기 전에 다양한 디자인 옵션을 탐색하기 위해 웹사이트 목업을 사용합니다. 웹사이트가 코드로 구축된 후에는 조정하기가 더 어려워지므로, 최종 제품에 최대한 가까운 웹사이트 목업은 시간과 비용을 절약할 수 있습니다.
웹사이트 목업 vs 와이어 프레임 vs 프로토타입
와이어 프레임, 목업, 프로토타입은 모두 디자인 아이디어를 시각화하는 서로 다른 방법입니다. 각 방법을 사용하는 시점은 다음과 같습니다.
와이어 프레임
와이어 프레임은 디자인 요소 없이 웹사이트의 레이아웃과 구조를 보여주는 다이어그램입니다. 와이어 프레임은 웹사이트 디자인의 청사진으로 생각할 수 있습니다.
와이어 프레임은 간단한 펜과 종이 스케치로 만들 수 있어, 디자이너가 아닌 사람이 자신의 비전을 전달하는 데 유용한 도구입니다. 또한, 새롭거나 깊이 있는 인터랙티브 요소가 포함된 웹사이트를 작업하는 디자이너에게도 도움이 됩니다. 와이어 프레임은 디자인과 코드를 적용하기 전에 사이트의 기본 윤곽과 기능을 결정할 수 있게 해줍니다.
간단한 전자상거래 사이트를 구축하더라도, 와이어 프레임은 전체 판매 퍼널과 고객 경험을 확립하는 데 도움이 될 수 있습니다. 와이어 프레임은 매우 간단하므로 디자인이 시작되기 전에 모두가 생각을 같이 공유할 수 있는 좋은 방법입니다.
목업
목업은 브랜딩 결정이 적용된 의도된 웹사이트 레이아웃을 보여주는 매우 세밀하고 정교한 표현입니다. 와이어 프레임과 달리, 목업은 아트 디렉션, 타이포그래피, 색상 사용을 포함합니다.
목업은 최종 웹사이트가 사용자에게 어떻게 보일지를 현실적으로 미리 보여주지만, 아직 인터랙티브하지는 않습니다. 맞춤형 웹사이트를 구축할 때 목업은 필수적입니다. 왜냐하면 코딩이 시작되기 전에 디자인을 변경할 수 있게 해주기 때문입니다.
프로토타입
프로토타입은 웹사이트를 미리 볼 수 있는 가장 완성도 높은 옵션입니다. 미리보기 링크를 사용하여 사용자 경험을 시뮬레이션하고 웹사이트 디자인을 더욱 생동감 있게 만들어주는 인터랙티브 모델입니다.
개발 전에 다양한 인터랙티브 요소를 테스트해야 하는 프로젝트의 경우, 프로토타입은 매우 유용할 수 있습니다. 간단한 프로젝트의 경우, 목업에서 개발로 바로 넘어갈 수 있습니다.
웹사이트 목업 만드는 방법
스스로 디자인하든 디자이너와 함께 작업하든 간에 디자인 프로세스를 진행할 때 고려해야 할 기본 요소는 동일합니다.
1. 브랜드를 어떻게 표현할지 결정하기
웹사이트 디자인의 첫 번째 단계는 한 걸음 물러나 브랜드를 어떻게 표현할지 생각하는 것입니다. 디자이너와 함께 작업하는 경우, 창의적인 개요를 작성하여 프로세스를 시작할 수 있습니다. 이는 그들이 여러분의 브랜드, 고객 및 영감을 이해하는 데 도움이 됩니다.
특정 기능에 집중하고 싶어지는 것은 자연스러운 일이지만, 기술적 세부 사항에 휘말리기 전에 먼저 전체적인 이야기를 생각해 보세요. 웹사이트 레이아웃으로 어떤 이야기를 전달하고 싶은지 고민해 보세요.
예를 들어, 사용자가 여러분의 홈페이지에서 더 많은 시간을 보내도록 유도하는 것을 목표로 시작할 수 있습니다. 홈페이지는 브랜드의 초기 접점이 되는 경우가 많습니다. 또한 가장 높은 이탈률을 보이는 경향이 있습니다. 그러나 기능이나 전환 최적화 관점에서 시작하기보다는, "홈페이지 방문자와 더 깊은 연결을 어떻게 구축할 수 있을까?"라는 질문을 해보세요.
해결책은 홈페이지 상단에 브랜드에 대해 한 문장의 소개 문구를 작성하는 것만큼 간단할 수 있습니다. 만약 여러분의 브랜드 가치가 비즈니스의 핵심이라면, 이를 홈페이지에서 직접 보여줄 수 있는 좋은 기회입니다. 예를 들어, 지속 가능성이나 포용성과 같은 가치를 보여주는 것은 타겟 고객과의 공감을 불러일으켜 사이트에 더 오래 머물게 할 수 있습니다.
2. 선형적 내러티브 만들기
웹사이트는 선형적 내러티브를 따라야 합니다. 즉, 각 섹션과 페이지가 논리적으로 흐르고 다음과 연결되어야 합니다. 성공적인 내러티브는 누군가 홈페이지에 도착했을 때 브랜드와 제품 제공에 대해 명확한 인식을 제공합니다. 사이트를 탐색하는 동안 더 많은 세부 정보와 기능을 제공하여 그들이 적합한 제품을 찾도록 도와야 합니다.
기존 전자상거래 웹사이트에서 선형적 내러티브는 판매 퍼널입니다. 사용자가 홈페이지에 도착하면 브랜드를 소개합니다. 그 후, 제품 컬렉션 페이지를 찾아가면 홈페이지보다 더 많은 세부 정보를 제공합니다. 가장 중요한 정보를 먼저 제시하고, 2차적 및 3차적 정보는 가까이에 배치합니다. 성공적인 내러티브 흐름에서는 사용자가 제품을 선택하고 장바구니 페이지로 이동한 후, 최종적으로 결제 과정을 완료하게 됩니다.
3. 브랜드 요소 수집하기
웹사이트의 내러티브를 어떻게 조각할지 생각한 후, 디자인에 사용할 브랜드 요소를 수집합니다.
브랜드 가이드라인이 있다면, 이를 디자이너와 공유하거나 스스로 참조할 수 있습니다. 가이드라인이 없다면, 목업을 만들기 전에 타이포그래피, 그래픽 및 색상과 같은 브랜드 요소를 결정해야 합니다. 웹사이트의 그리드 레이아웃은 브랜드 글꼴의 줄 높이와 글자 간격을 기반으로 하므로, 웹사이트 목업을 그리기 전에 이러한 브랜드 요소를 결정하는 것이 중요합니다. 그리드 레이아웃이 마련되면, 디자인 자산과 창의적인 개요를 사용하여 목업을 만들 수 있습니다.
4. 각 페이지 유형에 대한 템플릿 디자인하기
웹사이트 목업을 디자인할 때 모든 웹페이지에 대한 목업을 만들 필요는 없습니다. 대신, 컬렉션 페이지 템플릿과 제품 페이지 템플릿과 같은 다양한 페이지 유형에 대한 목업 템플릿을 만듭니다.
각 템플릿을 디자인할 때, 한 걸음 물러서서 "어떤 요소가 경험을 가장 성공적으로 만들 것인가?"라고 질문해 보세요. 예를 들어, 여섯 개 이하의 제품으로 구성된 큐레이션된 모음을 가지고 있다면, 컬렉션 페이지는 각 제품을 보여주고, 상세 제품 페이지로 넘어가기 전에 약간의 맥락을 추가해야 합니다.
반면, 수십, 수백, 수천 개의 제품을 보유하고 있다면, 더 고급스러운 제품 필터링이 가능한 웹사이트를 디자인해야 합니다. 이는 컬렉션 페이지에 도착한 사용자가 가장 관련성이 높은 제품으로 결과를 좁힐 수 있도록 도와줍니다.
5. 의미 있는 플레이스홀더 추가하기
목업은 궁극적으로 웹사이트가 어떻게 보일지를 미리 보여주는 것이기 때문에, 목업 작업 중에 사이트의 콘텐츠를 생성하고 있을 가능성이 있습니다. 이 경우, 의미 있는 플레이스홀더를 사용할 수 있습니다.
목업에 사용된 이미지와 텍스트가 임시일지라도, 최종 목표에 최대한 가깝게 만들어야 합니다. 그렇게 하면 목업을 미리 볼 때 사이트의 의도된 방향을 실제로 느낄 수 있습니다. 예를 들어, "lorem ipsum" 플레이스홀더 텍스트 대신, 브랜드에 맞는 샘플 카피를 작성할 수 있습니다.
6. 피드백 받기
목업이 준비되면, 이해관계자에게 제시하고 피드백을 받아야 합니다. 웹사이트 목업을 만드는 주요 장점은 코드를 변경하지 않고도 수정할 수 있다는 점입니다. 따라서 생산에 들어가기 전에 모든 이해관계자가 목업에 대해 확신을 가질 수 있도록 이 기회를 활용하세요.
웹사이트 목업 도구
웹사이트 목업을 만드는 데 사용할 수 있는 다양한 디자인 도구가 있지만, 가장 인기 있는 도구는 다음과 같습니다.
Sketch
Sketch는 빠른 반복을 가능하게 하는 웹 디자인 앱입니다. 2010년에 UI 디자인을 위해 특별히 만들어졌으며, 목업과 인터랙티브 프로토타입을 생성할 수 있습니다. 기본 구독료는 월 12달러(약 만 7천원)부터 시작합니다.
Figma
Figma는 실시간 협업을 가능하게 하는 디자인 도구입니다. 여러 사람이 동시에 목업 작업을 하는 경우, Figma는 좋은 선택이 될 수 있습니다. Figma는 무료로 가입할 수 있지만, 모든 기능을 사용하려면 월 15달러(약 2만 천원)부터 시작하는 요금제를 사용해야 합니다.
Adobe XD
Adobe design 제품군(포토샵, 일러스트레이터, 인디자인, 라이트룸 등)을 사용하는 디자이너들은 다른 어도비 애플리케이션과의 원활한 통합 덕분에 어도비 XD를 선호합니다. 어도비는 더 이상 XD를 독립 제품으로 판매하지 않지만, 월 59.99달러(약 8만 5천원)의 Adobe Creative Cloud 구독을 통해 액세스할 수 있습니다.
*환율: 2025년 4월 기준
웹사이트 목업 FAQ
웹사이트를 무료로 목업 하려면 어떻게 해야 하나요?
웹사이트를 목업 하려면 디자인 도구가 필요하며, 목업 비용이 발생합니다. 다행히도 Figma와 같은 많은 디자인 도구는 무료 체험 기간이나 기능이 제한된 무료 버전을 제공하므로 시작할 때 사용하기 좋습니다. Canva는 무료 웹사이트 목업을 만드는 데 사용할 수 있는 또 다른 무료 도구입니다.
웹사이트 목업은 언제 만들어야 하나요?
웹사이트 목업은 완벽한 맞춤형 웹사이트를 구축할 때 유용합니다. 이는 개발로 넘어가기 전에 사이트의 외관과 느낌을 파악할 수 있게 해줍니다. 이는 사이트를 디자인하는 동안 공유하고 참조하며 반복할 수 있는 무언가를 제공합니다. 프로젝트에 따라, 와이어 프레임을 스케치한 후 웹사이트 목업을 만들 수도 있고, 프로젝트 요구 사항을 결정한 후 바로 목업으로 넘어갈 수도 있습니다.
웹사이트 목업은 필수인가요?
특정 프로젝트에 따라 웹사이트 목업을 만들 필요가 없을 수도 있습니다. 예를 들어, Shopify 테마를 사용하여 사이트를 생성하는 경우, 목업을 생략하고 템플릿을 인터랙티브 프로토타입으로 사용할 수 있습니다. 하지만, 좋은 목업을 만들어두면 좋습니다.
