[기획]/기획 문서, 산출물

화면정의서 (3)

완벽한 장면 2024. 12. 24. 00:44

화면정의서의 영역별 구성

1) 상단 영역

- 화면들의 메타데이터를 넣는다.

 

필수

  • 화면의 이름

부가

  • 버전
  • 작성자명
  • Depth
  • Page (PPT에서는 필요함)
  • 화면 기획의도
  • 작성 날짜

양식을 PPT로 만드는 방법

상단의 [보기] 메뉴 -> [슬라이드 마스터] -> [레이아웃 삽입] 

슬라이드 마스터에서 페이지 넘버는 #인데 이걸 상단 우측으로 와서 놔주면 페이지 번호가 나온다.

이렇게 만든 양식을 가져다가 쓰면 되는데, [새 슬라이드] 에서 사용자 지정 형식을 선택하면 만든 부분을 사용할 수 있게 된다.

 

 

2) 화면 영역

-> 어떤 기기로 하느냐가 중요.

기기 선정

  • 모바일
  • PC (16:9)

⇒ 프레임 설정 (비율) → 구글에 검색 “갤럭시 노트4 해상도” ⇒ 픽셀 → 비율

아이폰은 일반 기종을 기준으로 한다.

 

그리드 방식

  • UI 요소의 레이아웃만 작성한다.
  • UI 가이드를 만들어 참조한다.

 

3) 디스크립션 영역

- UI 명칭, 설명

 

TextView

- 텍스트를 보여주는 UI

- 어떤 텍스트를 보여줘야 할지

  • 시스템화 X : 같은 위치에 있는 텍스트의 값이 변하지 않는 경우
    • 설명기입 or 화면에 바로 작성해도 된다.
    • 보통 제목에 해당하는 내용.
    • ex. 디스코드 창의 왼쪽 상단의 discord 글자
  • 시스템화 O : 같은 위치에 텍스트가 다르게 보일 경우
    • 어떤 규칙으로 텍스트가 보여져야하는지
    • (DB 개념에서) 유저가 선택한 페이지의 제목값을 보여준다.
    • => 이 규칙에 근거해서 제목값이 바뀌게 된다.

 

Textfield

- 텍스트를 기입하는 UI

- 주로 검색창처럼 보임.

특성

  • Placeholder : 글씨에 입력할 수 있는 힌트를 표시하는 기능
    (TextView의 성질)

 

키보드

PC

→ 하드웨어

 

모바일

→ 키보드의 영샹

  • 언어 키보드
  • 넘버 패드
  • 이메일 패드
  • 비밀번호 키보드
    • 비밀번호 입력하면 텍스트 필드에 있는 글씨가 점으로 바뀐다.
  • 이모티콘
  • 커스텀 키보드 : 키보드 설계가 필요
    • 키보드를 사라지게 하는 시점이 필요함

범위

  • 몇 자까지 입력 받을지?
  • 키보드에 대한 입력값과 사라지게 하는 시점(모바일)도 중요하다.

 

Button

- 클릭과 터치하는 인터렉션을 갖고 있는 UI

- 기본적으로 버튼은 눌려야 한다.(활성화 / 디폴트 - 설정하기 전 기본값 )

 

  • 이벤트 : 클릭 or 터치를 했을 때 발생하는 사건을 기입한다.
  • => 조건 : 버튼은 클릭했을 때 사건이 발생한다. 이 현상 자체를 이벤트라고 한다.
    어떤 상황일 때? 어떤 상황이 발생했을 때? 관련된 설명을 적어주면 된다.
  • ex. 이벤트 : "어떤 화면으로 이동시킨다."

 

디자인 타입

  • 글씨형, 이미지타입, 합성형
    • 글씨형 : 어떤 글씨를 쓸지
    • 이미지타입 : 여기에 어떤 이미지를 넣어야 하는지
    • 합성형 : 글씨와 배경이 어떻게 보여야 할
  • 활성화(디폴트) / 비활성화 (활성화 조건)
  • ex. 회원가입 시 모든 필수 필드가 입력되지 않으면, 다음으로 넘어가는 버튼이 죽어 있다.

 

Image

- 버튼과는 좀 다르다.

- 그림 또는 사진을 보여주는 UI

- 확장자, 사이즈, 그래픽적 요소 등 설정 가능

 

그런데 디스크립션에 써야 하는 내용은!

- 1) 디폴트 이미지 : 어떤 이미지를 보여줘야 하는지

-- 만약 이미지를 불러와야 하는데, 이미지를 불러오지 못한 상황이라면? 뭔가 처리가 필요하지 않을까? 

예시

  • 카카오톡 기본 프로필 사진 => 시스템화 된 것.
  • 시스템화 여부 O/X 나눠서 설명을 기입하면 된다
    • 바뀌면 O / 안 되면 X 인 것이다.
  • 시스템화가 어디서 가장 많이 발생?
    • 테이블 / 셀
    • ex) 디스코드에서 규칙은 있으나 사람마다 프로필 사진, 상태메시지 등이 다른 것

- 2) 터치 여부 : N(디폴트) / Y(이벤트)

  • Yes로 바뀌게 되면 이벤트를 추가해주면 된다.
  • ex) 카카오톡 프로필 사진을 누르면 하나의 창이 뜨는 것 -> 그게 터치가 되게 이벤트를 추가해놓은 것이다.

 

뭐가 버튼이고 뭐가 이미지인지?

  • 눌리는 모션이 있다 : 버튼
  • 모션 없이 단순하게 평면적으로 터치가 된다 : 이미지

 

테이블 자동적으로 늘려가는 플러그인 뭔지 찾아보기

 

먼저 UI 가이드라고 먼저 하고 기획의도는 옆에 써준다

 

1. 피그마는 사이즈의 구애를 받지 않는다.

2. 피그마는 실시간 수정이 쉽다 

3. ppt는 보안에 뛰어나다

4. 피그마는 UI 템플릿 / 플러그인이 많다.

728x90
반응형