화면설계서(Wireframe)란? 평생 써먹는 제작 꿀팁!

만약 여러분이 UX 디자인이라는 매력적인 분야에 관심이 있으시다면, 화면설계서(Wireframe)에 대해 종종 들어보셨을 겁니다. 와이어프레임은 제품/ 서비스 디자인 프로세스에서 아주 중요한 부분을 담당하고 있는데요. 아주 중요한 개념이지만 어렴풋이 알고 계신 분들을 위해 화면설계서에 대한 모든 것들을 알려드리는 시간을 가져보겠습니다. 화면설계서가 대체 무엇인지, 디자인 프로세스의 어느 곳에 사용되는지, 어떻게 구현하는 것이 좋을지 그동안 궁금하셨다면 이번 글을 놓치지마세요:) 화면설계서(Wireframe)이란? 누가 사용하는거지? 화면설계서는 건축에서의 청사진과 다르지 않습니다. 웹페이지 및 앱의 윤곽을 2차원으로 보여주는 것인데요. 이는 페이지의 구조, 레이아웃, 정보구조, 유저 플로우, 기능, 의도된 동작들에 대한 명확한 개요를 제공합니다. 일반적으로 화면설계서는 제품의 초기 컨셉을 표현하는 것이기 때문에 스타일, 컬러, 그래픽 등이 최소한으로 유지됩니다. 또한 세부사항이 필요한 정도에 따라서 수작업으로 그리거나 디지털 작업을 통해 만들어질 수도 있죠. 와이어프레임은 보통 UX디자이너가 가장 많이 사용합니다. 개발자가 인터페이스를 실제로 코딩하기 전, 이 프로세스를 통해 모든 이해관계자들이 각 정보들이 어디에 위치해야 하는지에 대해서 합의를 할 수 있습니다. 그렇다면, 언제 화면설계서를 만들어야할까? 와이어프레임 프로세스는 제품 수명 주기(product life cycle)의 탐색단계에서 수행되는 경우가 많습니다. 이 단계에서 디자이너들은 제품의 범위를 테스트하고, 여러 아이디어에 관해 협업하며, 비즈니스의 요구사항들을 파악하죠. 화면설계서는 일반적으로 제품 디자인의 시작 단계로 사용되면, 초기에 이것저것 살펴보는 버전이라고 할 수 있습니다. 디자이너는 사용자 피드백을 통해 파악한 내용들을 활용해서, 프로토타입이나 목업(mockup)과 같은 그다음의 보다 상세한 테스트 디자인을 제작할 수 있습니다. 화면설계서(Wireframe)을 만드는 목적! 1. 사용자에 초점을 맞춘 컨셉유지 와이어프레임은 효과적인 커뮤니케이션 도구를 활용됩니다. 사용자로부터 피드백을 쉽게 받을 수도 있고, 이해관계자들과의 의사소통도 원활하게 만들며, 디자이너들이 영감을 떠올리는데도 도움을 주기 때문인데요. 초기 와이어프레임 단계에서 사용자 테스트를 수행하면, 디자이너는 솔직한 피드백을 받아서 문제점을 파악할 수 있으며, 이를 바탕으로 제품의 컨셉을 수립하고 발전시키는 데 도움을 받을 수 있습니다. 결국, 화면설계서는 사용자가 인터페이스와 어떻게 상호작용할지를 측정할 수 있는 완벽한 방법이라고 보시면 됩니다. 2. 웹사이트의 특징, 분명하게 정의하기 화면설계서를 활용하면, 각각의 기능들에게 필요한 공간이 어느 정도인지, 사이트의 정보 구조를 시각적인 디자인에 어떻게 연결해야 하는지, 페이지의 기능을 어떻게 하면 선명하게 보여줄 수 있는지에 대해서 모든 이해관계자들이 생각해볼 수 있습니다. 이처럼 모든 기능들이 어떻게 함께 동작하는지를 명확하게 시각적으로 확인할 수 있게 되면, 방향성과 맞지 않는 불필요한 요소인지 아닌지의 여부를 판단하기가 쉬워집니다. 3. 빠르고 저렴하게 프레임 잡기 와이프레임의 가장 큰 장점은 저렴하고 쉽게 만들 수 있다는 것 입니다. 실제로 연필 한 자루와 종이만 있다면, 곧바로 와이어프레임을 그려낼 수 있습니다. (와이어프레임을 구현하는 방법은 잠시 뒤에 자세히 설명드리겠습니다.) 어떤 제품이 너무 세련되어 보인다면, 사용자는 그것의 첫인상에 대해서 솔직하게 말하지 않는 경향이 있는데요. 이때, 페이지의 핵심적인 레이아웃만 보여준다면, 별다른 시간과 비용을 들이지 않고도 그것이 가진 결점과 불만사항들을 쉽게 찾아낼 수 있습니다. 와이어프레임의 종류 3가지. 초급 와이어프레임 (Low-fidelity wireframes) 초급 화면설계서는 웹페이지의 기본적인 내용을 보여주는 것이며, 일반적으로 디자인의 첫 시작점 역할을 하는 경우가 많습니다. 그렇기 때문에, 구체적인 규모나 그리드, 픽셀 수준의 정확성 없이 상당히 거칠게 만들어지는 경향이 있는데요. 초급에서는 시선을 분산시킬 수 있는 자세한 내용들을 빠지고, 간단한 이미지/ 블록모양/ 콘텐츠 영역 등만 포함하고 있습니다. 라벨이나 헤더 이미지도 텍스트로 표시하곤 합니다. 초급 와이어프레임은 커뮤니케이션을 시작하고, 네이게이션 레이아웃을 결정하고, 유저 플로우를 매핑(mapping)하는데 유용하게 쓰입니다. 간단히 말해, 초급 와이어프레임은 회의실에 이해관계자 및 클라이언트가 있을 떄, 회의 도중에 펜으로 뭔가를 쓱싹 그려서 보여주고 싶을 때, 사용하는 방식이라고 할 수 있죠. 또한 제품에 대한 다양한 컨셉을 가지고 있는 디자이너가 빠른 결단을 내릴 수 있도록 도움이 되기도 합니다. 중급 와이어프레임 (Mid-fidelity wireframes) 셋 중에서 가장 많이 사용되는 중급 와이어프레임은 레이아웃을 보다 자세하게 표현하고 있습니다. 상세한 이미지나 타이포그래피와 같은 시선을 분산시킬 수 있는 것들은 여전히 빠져 있지만, 구체적인 요소들에 대한 세부적인 사항이나 특징들은 다른 것들에 비해서 보다 확실하게 구별되어 있습니다. 텍스트의 크기나 굵기 등을 다르게 해서, 제목과 본문의 콘텐츠를 구분할 수도 있죠. 여전히 흑백이긴 하지만, 디자이너들은 음영을 달리하여, 개별 요소들의 시각적인 중요도를 전달할 수도 있습니다. 아직 제품의 초기 단계라서 바뀔 가능성은 여전히 많지만, 중급 와이어프레임은 스케치(Sketch)나 발사믹(Balsamiq)과 같은 디지털 도구를 활용해서 만들어지는 경우가 많습니다. 고급 와이어프레임 (High-fidelity wireframes) 마지막으로 소개드릴 고급 와이어프레임은 픽셀 수준의 구체적인 레이아웃을 자랑합니다. 초급 와이어프레임에서는 라틴어처럼 보이는 임의의 텍스트가 보여지고, 회색 상자에는 이미지 대신에 'X'라는 글자가 표시되어 있었다면, 고급 와이어프레임에는 실제 서비스에서 사용되는 이미지와 텍스트 콘텐츠가 포함될 수도 있습니다. 이처럼 세부적인 사항들이 추가된 고급 와이어프레임은 메뉴 체계나 상호작용 매핑과 같은 복잡한 컨셉을 논의하고, 문서로 만드는 데 있어서 이상적이라고 할 수 있습니다. ※와이어프레임에 포함되는 것. : 화면설계서에 얼마나 많은 것들이 포함될지는 와이어프레임이 초급인지, 고급인지, 고급인지에 따라서 많이 다릅니다. 하지만 일반적으로 포함되는 요소들에는 로고, 검색 필드, 헤어, 공유하기 버튼, 플레이스홀더(placeholder) 등이 있는데요. 고급 와이어프레임의 경우, 네비게이션 체계, 연락처 정보, 푸터(footer) 등이 포함될 수도 있습니다. 초급이나 중급 와이어프레임에서는 타이포그래피와 이미지가 반드시 있어야 하는 것은 아닙니다. 그리고 디자이너들은 텍스트의 크기를 다르게 해서 헤더를 표시하거나 어떤 정보의 중요성을 다르게 보여주기도 하죠. 와이어프레임은 보통 회색 톤으로 만들기 때문에, 디자이너들이 음영을 활용하는 경우가 많습니다. 일부 고급 와이어프레임에서는 디자이너들이 색상을 보여주는 경우도 많은데요. 예를 들면, 빨간색은 경고나 오류 메시지를 나타내는 것이며, 짙은 파란색은 활성화된 링크를 보여주기도 합니다. 와이어프레임은 2차원이기 때문에, 드롭 다운(drop-down)이나 이미지 호버(hover) 상태, 메뉴를 접었다 폈다 하는 것과 같은 상호작용 인터페이스는 보여주지 않고 있다는 것을 명심하세요:) 와이어프레임이 다양한 방식으로 만들어질 수 있다는 것을 실제로 보여주기 위해 그리고 여러분이 직접 와이어프레임을 만들 때, 영감을 제공해주기 위해, 몇 가지 사례들을 준비해보았습니다. (초급 와이어프레임에서부터 고급와이어프레임 그리고 실제 최종 UI디자인으로 변해가는 과정)

(UX디자인 프로젝트에서 손으로 그린 와이어프레임)

(초급 와이어프레임과 모바일 우선의 디자인 접근법으로 완성시킨 고급와이어프레임의 프로토타입)

웹사이트 화면설계서 VS 모바일 화면설계서 일반적으로 와이어프레임이라고 하면, 사람들은 데스크톱의 웹사이트 와이어프레임을 떠올리는 경우가 많습니다. 하지만 모바일 와이어프레임에 대해서도 특별한 관심을 가지는 게 좋은데요. 이번에는 둘 사이의 핵심적인 차이들을 알아보겠습니다. - 크기 모바일 앱과 데스크톱 웹사이트 사이에는 크기의 차이가 있기 때문에, 레이아웃에 대해 매우 신중하게 생각해야 합니다. 예를 들어, 데스크톱 웹사이트에는 화면의 폭이 넓기 때문에, 와이어프레임에서도 세로 칸을 여러 개 만들어서 레이아웃을 넓게 펼쳐 보일 수 있습니다. 모바일 앱에서는, 세로 칸의 개수가 최대 1-2개로 제한되는 경우가 일반적입니다. 그리고 아래쪽에서 다른 콘텐츠를 보여주기 위해서 무한정 스크롤을 내릴 수 있게 할지, 또는 여러 개의 페이지로 나눠서 보여줄지에 대해서도 결정을 해야 합니다. - 행동 두 번째 핵심적인 차이점은 모바일 앱과 웹사이트에서 일어나는 행동입니다. 웹사이트를 이용할 때, 사용자들은 마우스나 노트북의 터치패드를 이용해서 페이지를 탐색합니다. 그리고 사용자들은 추가적인 정보를 얻기 위해서 특정한 메뉴를 클릭하거나, 메뉴를 보기 위해서 특정한 버튼 위로 마우스를 가져갈 수 있습니다. 하지만 모바일 앱에서는, 사용자들이 화면을 터치해서 메뉴를 열게 됩니다. 그렇기 때문에 모바일 앱을 위한 와이어프레임을 만들 때는, 사용자들이 어떤 목표에 도달하려면 특정한 버튼을 누르도록 해야 한다는 것을 알려주기 위해서 보다 신중하게 생각해야만 합니다. - 상호작용 사용자들이 모바일 앱으로 상호작용하는 방식은 데스크톱에서 하는 방법과 아주 많이 다릅니다. 앱에서도 웹사이트와 비슷한 방식으로 인터넷에서 콘텐츠와 데이터를 가져올 수는 있지만, 많은 앱들이 콘텐츠를 다운로드해서 오프라인 모드에서 사용할 수 있는 옵션을 제공하고 있습니다. 그렇기 때문에 와이어프레임을 만들 때도 이러한 모바일 애플리케이션 전용의 '오프라인 모드'가 반영되어야만 합니다. > 이 글은 'What Exactly Is Wireframing? A Comprehensive Guide'을 각색하여 작성되었습니다.