화면정의서의 기본 구성

1. 상단 영역 (메타데이터)

필수

• 화면 이름

부가

• 화면 이름
• 버전
• 작성자
• Depth
• 기획 의도
• 작성일

2. 화면 영역

기기 기준을 먼저 정합니다.

• 모바일
• PC (16:9)

그리드 방식으로 외곽선을 그리고, UI 레이아웃만 배치합니다. 이때 UI 가이드를 함께 작성하면 이해도가 올라갑니다.

3. 디스크립션 영역

UI 명칭과 동작을 정의합니다.

 

주요 UI 정의 방법

TextView

• 텍스트를 보여주는 UI

시스템화 X

값이 고정된 경우
→ 화면에 바로 적어도 됩니다.

시스템화 O

값이 변하는 경우
→ 어떤 규칙으로 바뀌는지 정의합니다.

 

TextField

• 입력창 UI

정의해야 할 것

• Placeholder
• 입력 제한 글자 수
• 키보드 유형 (모바일)
• 비밀번호 마스킹 여부
• 키보드가 사라지는 시점

 

Button

• 클릭/터치 시 이벤트 발생

정의 요소

• 이벤트 내용
• 활성화 / 비활성화 조건
• 디자인 타입 (텍스트형 / 이미지형 / 합성형)

Image

• 단순 표시 UI

정의 요소

• 기본 이미지
• 이미지 로드 실패 시 처리
• 시스템화 여부
• 터치 이벤트 여부

버튼과 이미지의 차이

• 눌림 모션이 있으면 버튼
• 평면 터치면 이미지

시스템화가 가장 많이 발생하는 영역

테이블, 리스트, 셀 구조입니다. 같은 구조 안에서 데이터만 달라지는 형태입니다. 예를 들어 프로필 사진, 상태 메시지, 게시글 목록 등은 모두 시스템화 영역입니다.

 

화면정의서는 단권화 작업이다

기능정의서를 기반으로 화면정의서를 작성합니다. 메뉴트리, 스토리보드, UI 가이드, 플로우를 함께 묶어 관리하는 것이 좋습니다.
이 문서는 “예쁘게 만드는 문서”가 아니라  “개발과 디자인이 같은 기준으로 움직이게 만드는 문서”입니다.