오픈패스 챌린지 1기 | Wireframe, Storyboard, Wrap up

8-5 Wireframe
Wireframe 의 작업방식

 

Wireframe

: Wire + frame - 선을 활용한 툴을 구성하는 것

: 화면 단위의 레이아웃을 설계하는 작업

 

Purpose

: 실제 작업 이전에 세밀한 계획이 가능하므로 누락된 작업을 최소화해서 작업이 번복되는 위험성을 줄여준다.

• 원활한 커뮤니케이션; 효과적인 커뮤니케이션 도구
• 명확한 기능정의; 각 기능들의 필요성을 생각해볼 수 있음 (필요성의 논의를 통해 기능을 가감, 서비스의 정보구조의 연결 논의 가능 등 화면에서 제공해야하는 주요 기능을 선별하는것에 효과적이다.)
• 제작시간 단축; 저렴하고 쉽게 만들 수 있다.

Things to consider

✅ 와이어프레임을 보여주는 대상을 선정

✅  논의 항목에 대한 선정

✅  수집해야하는 피드백 내용 선정

✅  프로젝트의 전체 진척사항 파악

 

How to create

Wireframe은 크게 3가지 방식으로 제작이 가능하다

• Low-fidelity - 화면의 기본적인 내용을 보여 줌. 일반적으로 제작의 첫 시작점 역할을 함 
• Mid-fiedlity - Low 보다는 다양한 요소들의 세부사항 검토가 가능하다. (텍스트의 크기나 굵기 조절, 영역간 음영을 달리한 시각적 중요도 전달 등)
• High-fidelity - 픽셀수준의 구체적인 레이아웃 (메뉴체계, 기능의 상호작용여부 등 복잡한 컨셉을 논의하고 문서를 만드는것에있어 중요한 역할을 한다)

왼쪽부터 low, mid, high fidelity 예시 (출처: hubspot)

 

When creating 'Wireframes' you should...

✅ 화면 상단에는 가장 중요한 정보를 제공 (예시: 1. Who - 누가 판매하는 것인지 > 2. What - 무엇을 판매하는 것인지)

✅ 좌측상단에서 우측하단 순으로 정보를 배치 (예시: 앱서비스 로고 > 상품이미지 > 제품상세 정보 > 저장기능/쿠폰받기)

✅ 한 페이지 당 하나의 목적만을 수행

 

https://wireframe.cc/

Wireframe.cc | The go-to wireframing tool.

https://balsamiq.com/

Balsamiq: Fast, focused wireframing for teams and individuals | Balsamiq

https://miro.com/login/

Login | Miro | The Visual Workspace for Innovation

https://www.justinmind.com/

Free prototyping tool for web & mobile apps - Justinmind

📍 Summary

- Wireframe 정의: 화면 단위로 레이아웃을 설계하는 작업

- Wireframe 목적: 작업자 간의 원활한 커뮤니케이션, 화면에서 필요한 기능을 명확하게 정의하기 위해서.

 

8-6 Storyboard
Storyboard의 개념과 목적, 작성방법

 

Storyboard

: 실제 구현해야하는 서비스에 대한 상세한 정보를 제공하여 전반적인 서비스의 흐름과 세부적인 화면의 내용을 파악할 수 있도록 도와준다.

: 다양한 화면 간의 연관성과 기능의 역할을 파악할 수 있다.

: 업계에서는 스토리보드 이외에 화면정의서, 요구사항 명세서, 화면설계서 등 다양한 명칭으로 불리기도 한다.

 

Purpose

: 실제 작업에 필요한 기능을 파악하고 구현에 필요한 계획을 수립하여 의도한 서비스가 정상적으로 제공될 수 있도록 한다.

• 프로젝트의 규모 파악
• 필요한 기능 및 기술의 협의
• 프로젝트의 계획 수립

➡️ 프로젝트 정책을 수립하고 실제 구현을 진행하며, 두 과정은 지속적인 수정 및 보완 과정을 반복한다.
기본 정책 수립 (구축 범위 / 기술 정보) <----> 화면설계 (구축 화면 / 기능정보 )

 

기본정책(Standard rule) 수립

: 프로젝트 개요 및 공통 준수 사항을 전달한다.

: 개발을 하기 위한 문서 - 서비스의 공통적인 정책을 배포 함으로써 화면설계와 기능, 동작에 대한 다양한 정보를 명시하여 개발 구현을 수월하게 함, 서비스의 개발 완료 이후에도 지속적으로 서비스를 관리하고 업데이트 하는것에 도움이 된다.

: 프로젝트 전반적으로 준수 되어야 할 사항이나 화면 설계시 혹은 시나리오에서 반복적으로 설명되어야 지침을 작성한다

• Cover -  프로젝트 명 또는 문서의 주제를 나타낸다 (basic requirements; company's logo, 문서 제목, 문서 버전, 작성(수정)일)
• History - 프로젝트 진행 간 변경되는 주요 사항을 지속적으로 나타낸다 (basic requirements; 업데이트 날짜, 작성자, 업데이트 내용, 버전정보)
• Index - 목차를 작성하여 전달할 정보의 내용을 미리 나타낸다 (basic requirements; 챕터제목, 하위 컨텐츠)
• Technical Considerations - 프로젝트 진행 과정에서 기술 준수 사항에 대한 지침을 나타낸다. (basic requirements; 호환성(Browser compability), 리소스 용량(Image size), 웹 접근성(Accessibility)
• Policy - 프로젝트 진행과정에서 정책 준수 사항에 대한 지침을 나타낸다. (대분류, 중분류, 정책 세부 내용, 비고)
• Permission - 프로젝트에 권한 설계가 필요한 경우에는 권한 정책을 나타낸다 (대분류, 중분류, 소분류, 사용자 유형 - 권한 분배 대상; 통상적으로 마스터 관리자, 일반관리자, 스태프, 방문자 등으로 분류, 권한의 종류 - Read, Update, Delete, Create, 비고 - 추가적 논의사항 및 결정사항)

File Naming 예시 (출처: 오픈패스)

File Naming 예시

 

OPUR_SB01_화면설계서/스토리보드/프로젝트 명칭_Product_OnlineLecture_ PC_V1.01

 

➡️ Project code: OPUR(Openpath UI Renewal)_Document code: SB01(Storyboard 01, 02, 03 ...)_Document name: 화면설계서/스토리보드/프로젝트 명칭_ 1Depth: Product_2Depth: Online lecture (Depth 1,2: 메뉴 및 화면 명칭)_Device: PC(D-Desktop, MO-Mobile, MA-Mobile App)_ Vn.nn: V1.01(Ver1.01-99; 정책 및 기능 협의 단계, Ver 2.01-99; 기능과 GUI 기능의 최종 협의 단계, Ver 3.0; 최종 산출물 정리 단계)

 

 

8-7 화면설계
스토리보드 작성과정에서 필요한 요건

 

화면설계

: 프로젝트 완료를 견인하는 주요 정보의 작성 단계

: 화면 디자인과 개발을 위한 지침서이며, 해당 문서를 바탕으로 다양한 이해관계자 간의 커뮤니케이션이 진행된다. 

• IA: Sitemap - 프로젝트의 전체적인 구조를 시각화 하여 정보를 전달한다
• IA: Table - 문서가 설명하고 있는 화면 목록을 전달하여 정보를 전달한다
• Flow Chart - 서비스를 사용하는 흐름 순서를 시각화하여 정보를 전달한다 (사용자가 특정 목적을 달성하는 데 필요한 화면의 순서를 나열함으로써 요구기능 파악에 효과적이다)

Flow Chart 예시 (출처: 오픈패스)

• Functional Specification - 프로젝트에 요구되는 기능 종류와 개발 공수 정보를 전달한다. (사양서 기본정보, 기능분류 ID, 세부기능 항목 ID, 세부기능 항목 명칭, 기능 설명, 개발 여부, 비고, 작성 일)
• Storyboard - 프로젝트에 필요한 각 화면의 레이아웃과 기능 정보를 전달한다 (스토리보드 기본 정보 - 화면 명, 화면 아이디, 작성및 수정일, 화면위치 | 화면영역 - 와이어프레임, 기능별 순번 적용 | 화면설명 - 기능별 순번 나열; 화면 영역의 일원화, 기능별 상세 설명 서술)

📍Summary

- Storyboard 개념과 목적: 실제 구현할 서비스에 대한 상세한 정보를 제공하는 작업물이며, 전반적인 서비스의 흐름과 세부적인 화면의 내용을 파악할 수 있도록 해야한다

- Storyboard 기본 정책 수립: 프로젝트 개요 및 공통 준수 사항에 대한 지침을 전달

- Storyboard 화면 설계: 프로젝트 구축 과정부터 완료까지 전반적인 프로젝트 진행에 필요한 화면들의 주요 정보들을 전달

 

8-8 Wrap up

 

UI Structure: 서비스의 실제 구현을 위한 계획 단계

• IA - 외부요소 (Context, Users, Content), 내부요소 (Organisation, Navigation, Labeling, Searching)
• Wireframe (Layout, UX, UI)
• Storyboard (Policy, History, IA, Functional Specification, Permission, Technical Considerations, Flow chart, Storyboard-scenario)

📍Summary

체계적인 정보 구조 설계를 위해서는 외부요소와 내부요소를 명확하게 정의하고 진행하면 매우 견고한 UI Structure를 구현할 수 있다.

추가로 UI Structure에서 요구되는 작업은 레퍼런스 수집이 매우 중요한 만큼 각각의 작업 단계별 템플릿을 미리 설계하고 기능 수집이 필요하다.

 

✏️Practice. 기획단계에서 레퍼런스를 조사할 경우 한정된 시간 동안에 조사하기 때문에 상세한 기능확인이 어렵다. 때문에 평소에 관련된 서비스 기능을 정리해서 스크립 하는 방법을 추천한다. (IA, Policy, Permission, Functional Specification)