wireframe

와이어프레임 디자인 팁

본격적인 디자인 시작에 앞서 최종 디자인의 뼈대가 되는 와이어프레임을 만드는 것은 중요합니다. 사용자 리서치를 통해 얻은 아이디어를 가지고 와이어프레임을 만들면서 각각의 페이지별 정보를 계층화시키고 전체적인 콘텐츠의 내용, 구조, 기능, 페이지의 흐름을 설계할 수 있습니다.



설계도





예를 들자면, 새롭게 집을 지을때 집의 뼈대를 먼저 세우고 각각의 생활공간 (현관입구, 복도, 침실 ,화장실, 거실) 을 나누고, 수도, 환기장치, 혹은 전기 배선을 설치하는 거라고 생각하시면 됩니다. 이러한 필수 장치들이 완료되었을 때, 그다음부터 전체적인 인테리어 디자인 (UI Design)이 들어가는 거죠.


기본적으로 와이어프레임에 들어가는 엘리먼트로, 버튼, 네비게이션 메뉴, 헤딩등이 있습니다. 와이어프레임은 최종디자인의 블루 프린트이기 때문에 디테일한 디자인 엘리먼트를 만들 필요 없이 간단한 흑백의 다이어그램으로 이용하여 종이에 쉽게 스케치하거나 와이어프레임 디지털 툴을 사용해서 만들 수 있습니다.










와이어프레임



와이어프레임을 만들어야 하는 이유


머릿속에 있는 추상적인 아이디어를 종이에 스케치함으로써 디자인 솔루션을 실체화시켜주고 보다 명확하게 정리시켜줍니다. 와이어프레임을 통해 전체적인 디자인의 일관성을 도와주고 어떤 특정한 콘텐츠를 우선순위를 두고 디스플레이할지 콘텐츠의 계층화를 도와줍니다. 각각의 페이지의 흐름과 서로 어떻게 상호작용하는지 쉽게 이해할 수 있습니다. 와이어 프레임 안에서 디자인 부분에 문제가 있을시 쉽게 수정이 가능합니다.








와이어프레임 스케치


준비하기


경쟁자분석 (competitor analysis) 혹은 사용자 리서치 이후에 얻은 아이디어를 가지고 펜과 종이, 마커와 화이트보드, 혹은 디지털 툴을 사용하여 쉽게 아이디어를 스케치할 수 있습니다. 너무 디테일 할 필요없이 전체적인 제품의 중요한 정보들과 흐름 정도만 생각하고 디자인하면 됩니다. 디지털 툴같은 경우에는 이미 기본적인 디자인 엘리먼트툴 (버튼,메뉴,헤딩) 이 바로 사용 가능하기에 좀 더 빠르게 작업할 수 있고, 또한 필요에 따라 팀원들과 쉽게 공유할 수 있기 때문에 원활한 협업이 가능합니다. (사실 스케치, 피그마, XD만 사용하셔도 기본적인 와이어프레임 템플릿이나 플러그인이 많이 있기 때문에 쉽게 작업하실 수도 있고 대표적으로 유명한 전용툴로는 발사믹등이있습니다.)









Dribbble 페이지


영감받기


현재 디자인하고 있는 비슷한 상품이나 비즈니스 모델을 가진 경쟁자의 사이트를 들어가서 관찰하거나 혹은 Behance, Dribbble 등과같은 디자인 작업물들이 올라오는 사이트에 들어가서 영감을 받는 것이 중요합니다.









와이어프레임 다이어그램

간단한 다이어그램을 이용하기


와이어프레임은 단순하고 한눈에 전체적인 정보를 쉽게 파악할 수 있어야 합니다. 그러므로 전혀 디테일할 필요가 없습니다. 단순한 블랙/그레이 색상의 다이어그램을 사용하여 각각의 정보를 배치하는 게 좋습니다.










와이어프레임 화이트보드


Step 1: 와이어프레임 만들기


이제 와이어프레임을 만들어봅시다. 만들면서 몇가지 염두해둘 사항들이있습니다. 하단의 몇가지 사항을 머릿속에 끊임없이 기억하며 와이어프레임을 만들어나갑시다.

1. 프로젝트의 골이 무엇인가?
2. 사용자가 누구이고 그들의 니즈는 무엇인가?
3. 프로젝트 골을 달성하기 위해 어떻게 콘텐츠를 효과적으로 분류하고 계층화시킬 수 있을까?
4. 어떤 특정한 콘텐츠를 우선순위에 두고 배치해야 할까?
5. 목적달성을 위해 어떤 버튼과 어떤 터치 포인트를 두어 사용자의 행동 유도를 도와줄 수 있을까?
6. 사용자가 제품 (사이트나 어플리케이션)에 처음 들어갔을 때 가장 먼저 노출되어야 할 콘텐츠는 무엇일까?
7. 특정한 페이지의 영역 안에서 사용자에게 노출 되어야 할 콘텐츠는 무엇이 되어야 할까?











Step 2: 와이어프레임의 디테일한 부분을 채우기


이제 조금 더 디테일한 부분들 채워나가야 합니다. (전체적인 디테일한 정보의 흐름은 위에서 아래로 왼쪽에서 오른쪽으로 진행되야 자연스럽습니다.) 상단에는 네비게이션 메뉴 상단 오른쪽에는 검색창 그리고 하단에는 푸터등과 같은 Usability Convention을 적극적으로 활용해서 만들어나갑니다.

그다음은 전체적인 콘텐츠 사이의 스페이싱, 레이아웃, 정보 간의 계층구조 발전시켜나갑니다. 예를 들어 온라인쇼핑몰 (이커머스)에서 제품상세페이지안에는 구매하기 버튼 혹은 장바구니 담기 버튼이 들어가야 합니다. 그리고 페이지별로 어떤 적절한 이미지들이 노출되어야 하는지 그리고 이미지는 어떤 크기가 최적의 사이즈인지 결정해야 합니다.


최종 와이어프레임을 설계하면서 하단의 3가지 중점 포인트를 충족하는지 확인해봅시다.

명확성
와이어프레임은 페이지안에서 사용자가 깊이 생각할 필요없이 그들에게 전달하고자 하는 정보를 명확하게 보여줄수있어야합니다.

유저 컨피던스
유저 컨피던스란 제품에 관한 신뢰를 뜻합니다. 예를 들어 직관적이고 명확한 네비게이션 메뉴 디자인과 사용자가 미리 예측할 수 있는 위치에 버튼이 놓여있음으로서 사용자가 해당 브랜드와 제품을 더믿고 신뢰활 수 있는거죠.

단순성
와이어프레임안에서 모든 디자인 엘리먼트들은 단순 명료해야 합니다. 와이어프레임안에서 너무 쓸데없이 많거나 복잡한 엘리먼트들은 매끄러운 사용자 흐름을 저하시킵니다. 색상이나 모양에 신경 쓰는 것보단 최대한 단순하고 명확한 정보의 계층구조를 만들어나가는 것에 더 신경 써야 합니다.












Step 3: 간단한 프로토타이핑과 사용성 테스팅


와이어프레임을 가지고 간단하게 클릭 가능한 프로토타입 목업을 만들어 사용성 테스팅을 하는것은 중요합니다. 팀원들과 혹은 테스터들과 함께 프로토타입으로 사용성 테스트를 한 후 문제발견 시 추가수정 뒤에 그다음 최종 UI 디자인을 시작하는 것이 디자인이 끝난 후 문제를 발견하는 것보다 훨씬 시간과 노력을 절약할 수 있습니다.

SNS 공유하기

Share on facebook
Share on twitter
Share on linkedin

매주 주말마다 새로운 디자인 뉴스레터를 받아보세요 📪

Scroll to Top