1주차 심화화면설계_220702

1. 기획자가 화면 설계 전 작업 순서
 

1) 서비스 정책 사전 확인 필요

• 메인 정책 : 상품 / 주문 / 회원
• 보조 정책 : 오퍼 / 배송 / 게시물 등

 2) 리서치 보고서로 해결안 합의하기

• 요구사항 정의서인 텍스트로 합의하기 보다 시각적인 것으로 합의
•  화면설계서 작성 후 다시 작성할 일을 방지 (합의를 안하거나 번복했을 경우 발생)

 3) IA 로 전체 분량 확인

• 팝업 / 탭 / 스텝 별도 페이지로 산출 필요
• IA 보다 평균 10% 증가분까지 감안한 여유로운 일정 산출 필요

2. 화면 설계의 방식과 각 장단점 소개

 1) PPT

• 장점 - 정책, 이력, Flowchart 등 범용적 활용도 높음 / 작업자들이 인쇄하기 가장 좋은 수단
• 단점 - 업데이트 시 지속적인 파일 공유 필요(실시간 공유X), 프로토타입 X (설득 어려움)

 2) Figma (웹 기반)

• 장점 - 편리한 접근성과 사용성, 프로토타입 기능, 공유 기능
• 단점 - Flowchart, 이력 기록 등이 어려움 => 이것도 도형으로 만들면 가능은 함

3) Adobe XD (보안에 민감한 조직 선호, 설치해서 사용)

• 장점 - 그래픽 디자인과의 연동성 좋음, 컴포넌트 관리 쉬움, 프로토타입 기능(피그마와 유사)
• 단점 - 설치 프로그램 무거운 편, 웹 기반 활용 아쉬움 (공유할 때 번거로움 - 파일 공유 등)

※ 초보 기획자의 경우 ppt + Figma 활용 추천
※ 인하우스 대기업/스타트업 기획은 거의 대부분 Figma, Adobe XD, Sketch, Axure 툴 사용
    에이전시 PPT 중심 + Figma 보조적 활용 : 운영팀의 반발, 클라이언트의 높은 활용 의지X
=> 앞으로는 인하우스/에이전시 모두 Figma 의 활용 비중이 높아지고 가속화 예상

3. 화면설계 이전 선행 단계

 1) 마인드 맵

• 유용한 툴 : https://www.mindmeister.com/ko
• 엑셀 Export 는 유료 기능

 2) IA (Information Architecture)

• 마인드맵의 내용을 엑셀파일에 Depth별로 구분
• 크게 Main, GNB, Search, Utility, Footer 로 0Depth 구분
  - Main : PC에서는 메인페이지, 메인팝업 / APP에서는 스플래쉬, 온보딩, 접근 권한 설정까지 포괄
  - GNB : 각 페이지에 접근할 수 있는 게이트
  - Search : 검색 관련 그룹
  - Utility : 사용자의 편의를 위한 메뉴 ex) 찜, 장바구니, My 페이지
  - Footer : 서비스 운영 주체 관련 정보 메뉴 ex) 회사소개, 개인정보처리방침, 이용약관 등
• 이후 1Depth에서 페이지 단위로 구분
• 화면ID는 보통 IA 정리 단계에서 0Depth 또는 1Depth의 앞 2자리+숫자결합으로 부여

4. 화면설계서 작성 단계

 1) 템플릿+작성가이드

• IA 확정 이후 이를 반드시 공급받은 상태에서 화면설계서 작성해야 함
• 버전 업은 v0.1 -> +0.05 또는 +0.1 씩 증가 / 고객사의 컨펌 이후 v1.0 로 업데이트
• 기획자가 정의하는 flowchart : 화면 간의 연계성을 보여줌 (IA에서 정의된 화면 ID를 표기)
• ★ 컴포넌트 작성가이드 반드시 필요 : 미리 정의하지 않으면 중구난방, 동일한 작업을 반복할 가능성多, 약속을 해두면 고민할 포인트↓
• 공통모듈 (Header, Tab Bar, Footer, Navigation / 목록의 아이템(그리드형, 썸네일형)) 정의
• 본문에 대한 정의 (ex. 맑은고딕 8p 기본 / 폰트변화 7~10 사이), Description 은 영역 내 요소들에 대한 설명, 수정이력 카드활용(v0.9_수정이력 / 2022-07-03 수정 반영 / 상세내용)

 2) 공통영역 설계

• 공통 네비(Header, Footer, Tab Bar 설계)
• 공통 모듈(반복적인 영역에 대한 정의)
• 공통 페이지(스플래쉬, 온보딩, 메인페이지 등)
• 공통 팝업(날짜/기간선택, 이미지업로드, 휴대전화 인증팝업 등)

 3) 레이아웃 설계

• 레이아웃은 목표 시간에 따라 먼저 페이지별 레이아웃을 그려놓음, 이후 Description은 한 번에 기술

 4) Description 작성

• 영역정의 + 넘버링
• Description 작성
• 화면목록 정리
• Flowchart 작성