와이어프레임 제작 가이드

리포트 예제

---

필자 크루가 작성했던 문서를 레퍼런스로 제시하겠습니다.

문서 제작에 도움이 된다면 좋겠습니다.

---

---

reference.pptx

0.05MB

---

---

와이어프레임이란?

웹사이트나 앱의 기본 뼈대, 즉 화면 구성의 설계도

---

 

이미지 출처

https://lionbum.tistory.com/220

[피그마]와이어 프레임(wire frame) 제작, 유용한 템플릿 추천

---

 

한마디로 말하면, 실제 디자인이나 색상 없이, 각 페이지에 어떤 요소들이 어디에 배치될지 그림처럼 단순하게 보여주는 도구입니다.

예를 들어, 버튼이 어디에 있고, 메뉴는 어떻게 구성될지, 텍스트나 이미지가 어느 위치에 들어갈지를 선과 박스 등으로 간단히 나타내는 거죠.

 

이렇게 하면 개발자, 디자이너, 기획자 모두가 화면 구성을 빨리 이해하고, 어떤 기능이 어떻게 배치될지 합의할 수 있어요.

즉, 본격적인 디자인 작업이나 개발에 들어가기 전에 “이 페이지는 이렇게 생겼다!” 하는 큰 그림을 함께 맞춰 보는 역할을 하는 문서입니다. 그래서 오류를 줄이고 의사소통을 편하게 만들죠.

 

주로 기획자나 UX/UI 디자이너가 만들고, 개발자나 관련 팀원이 검토하며 프로젝트 초반에 중요한 역할을 합니다.

 

쉽게 말해서, 와이어프레임은 웹 프로젝트의 ‘기본 설계도’로, 멋진 웹페이지 만들기의 첫 번째 발걸음이라 할 수 있어요.

---

피그마 템플릿 보기

https://www.figma.com/ko-kr/community/wireframes/mobile-apps?resource_type=files&editor_type=figma

 

---

---

와이어프레임 작성 방법

---

기존에 출시된 앱을 역으로 분석하여 와이어프레임을 그리는 과정을 '리버스 와이어프레임(Reverse Wireframing)' 또는 'UI 스크래핑'이라고 합니다.

이미 완성된 훌륭한 UI/UX 구조를 뜯어보며 벤치마킹할 수 있는 가장 확실한 방법이죠.

기존 앱 분석을 위한 와이어프레임 작성 가이드와 실무 팁을 정리해 드립니다.

---

1. 리버스 와이어프레임 작성 3단계 프로세스

1단계: 대상 화면 캡처 및 흐름(Flow) 정리

• 벤치마킹하려는 앱의 핵심 유저 시나리오(예: 회원가입, 상품 구매, 콘텐츠 탐색 등)를 정합니다.
• 시나리오의 시작부터 끝까지 발생하는 모든 화면을 순서대로 스크린샷으로 캡처합니다.
• 팝업창, 토스트 메시지, 드롭다운 메뉴 등 인터랙션으로 인해 발생하는 변화도 놓치지 않고 캡처합니다.

2단계: 구성 요소(Component) 분해 및 골격화

• 피그마(Figma), 미로(Miro) 등의 툴에 캡처본을 올린 뒤, 그 위에 투명도를 낮춘 도형을 얹거나 옆에 새로 그리며 골격을 추출합니다.
• 텍스트, 이미지, 아이콘, 버튼, 입력창(Input) 등 기본 컴포넌트 단위로 단순화합니다.
  • 텍스트 $\rightarrow$ 선(Line) 또는 가짜 텍스트(Lorem Ipsum)
  • 이미지 $\rightarrow$ 대각선 $X$자가 그려진 사각형 Box
  • 아이콘 $\rightarrow$ 원이나 사각형 안의 단순한 심볼

3단계: UI 레이아웃 및 정보 계층(Hierarchy) 분석

• 왜 이 위치에 버튼이 있는지, 왜 이 정보가 가장 크게 강조되었는지 레이아웃의 의도를 분석합니다.
• 화면 간의 이동 경로를 화살표로 연결하여 유저 플로우(User Flow)를 완성합니다.

---

2. 와이어프레임 작성 가이드 (규칙 및 수준)

와이어프레임을 그릴 때는 '어디까지 디테일하게 그릴 것인가'의 수준(Fidelity)을 정하는 것이 중요합니다. 벤치마킹 목적이라면 미드 피델리티(Mid-Fidelity) 수준이 가장 적당합니다.

구분	작성 가이드
컬러 사용 금지	색상에 시선을 빼앗기지 않도록 **블랙, 화이트, 그레이(Grayscale)**만 사용하세요. (단, 클릭 가능한 핵심 CTA 버튼 하나 정도만 포인트 컬러 사용 허용)
실제 데이터 반영	가짜 텍스트(Lorem Ipsum)로만 채우기보다, "최저가 상품 리스트", "사용자 프로필 이름" 등 실제 정보의 속성을 명시해 두는 것이 분석에 유리합니다.
그리드와 정렬	기기의 해상도(예: iOS 393x852)를 기준 잡고, 좌우 여백(Margin)과 컴포넌트 간의 간격(Padding) 구조를 일관되게 유지하며 그리세요.

---

3. 실무자들을 위한 꿀팁 (Tips)

① 디자인에 매몰되지 마세요 (구조에 집중)

기존 앱이 너무 예뻐서 폰트나 아이콘 모양을 똑같이 따는 데 시간을 쓰는 경우가 많습니다. 우리는 '디자인 카피'가 아니라 'UX 구조 분석'이 목적임을 잊지 마세요. 레이아웃과 정보의 배치 이유를 파악하는 것이 먼저입니다.

② 화면 옆에 '디렉션(Annotation)' 적극 활용하기

와이어프레임 이미지만 보면 시간이 지난 후 왜 이렇게 분석했는지 잊어버립니다. 화살표나 말풍선을 활용해 실무적인 메모를 꼭 남겨두세요.

[메모 예시]

• "상단 배너를 스와이프할 때 인디케이터가 움직임."
• "스크롤을 내리면 타이틀 바가 상단에 고정됨(Sticky)."
• "이 버튼은 구매 전환율을 높이기 위해 화면 하단에 플로팅 처리됨."

③ '컴포넌트화'하여 속도 높이기

피그마 같은 툴을 사용하신다면 GNB(하단 탭바), 상단 헤더, 버튼, 카드 레이아웃 등 반복되는 요소들을 미리 컴포넌트(Component)로 등록해 두세요. 화면이 10~20장으로 늘어나도 드래그 앤 드롭으로 빠르게 와이어프레임을 찍어낼 수 있어 작업 시간이 대폭 단축됩니다.

④ 숨겨진 '인터랙션'과 '예외 케이스' 기록하기

눈에 보이는 화면이 전부가 아닙니다.

• 데이터가 없을 때의 화면(Empty State)
• 글자 수가 너무 길어질 때의 처리(말줄임표 ... 등)
• 네트워크 오류나 로딩 중일 때의 스켈레톤 UI
• 벤치마킹 앱이 이러한 예외 상황을 어떻게 매끄럽게 처리했는지 와이어프레임 구석에 함께 기록해 두면, 추후 본인 앱을 설계할 때 엄청난 자산이 됩니다.

---