화면설계 (4) 디스크립션

디스크립션 작성의 필요성

1. 요소/속성에 대한 정의를 통해 누락의 방지

요소(Element): 개별 항목(예: 주문 상태, 기간 조회, 회원 구분 등)

속성(Attribute): 해당 요소에 포함되는 값(예: "결제 대기", "결제 완료", "배송 중" 등)

• ex. 주문일 순위기준이 기본 값이지만 인기 순위나 아니면 신청 순으로도 볼 수 있어야 된다라는 것이 설명이 되어 있지 않으면 구현자가 어려워한다.

 

예시

• 주문 상태 항목: "결제 대기", "결제 완료", "배송 중"
• 기간 조회 항목: "주문일", "출고일" (사용자가 선택 가능)
• 회원 구분 항목: "일반 회원", "VIP 회원"

 

2. 오버/클릭 등에 따른 화면변화에 대한 움직임 정의

사용자의 행동에 따라 변화하는 부분을 명확하게 설명해야 한다.

- 터치 오버 마우스 클릭 같은 모든 행위에 대한 변화점들이 생기게 된다.

 

📌 예제

• 검색 버튼을 누르면 : 입력된 값에 따라 결과 목록이 업데이트됨
• 초기화 버튼을 누르면 : 모든 입력값이 기본값으로 초기화됨
• 엑셀 다운로드 버튼을 누르면 : 현재 보이는 데이터가 엑셀 파일로 변환되어 다운로드됨

모바일 환경에서 추가적으로 고려할 요소

• 터치(Tap)
• 더블 탭(Double Tap)
• 롱 프레스(Long Press)
• 스와이프(Swipe)

 

3. 알럿/컨펌 등 진행 피드백 통해 사용자의 실수 예방

사용자 행동에 대한 피드백 메시지는 일관되게 정의해야 한다.

 

피드백의 두 가지 유형

1. 알럿(Alert)

- 단순한 안내 메시지

>> 예시 : "이 작업을 실행할 수 없습니다."

 

2. 컨펌(Confirm)

- 사용자에게 선택을 요구하는 메시지

>> 예시: "정말 삭제하시겠습니까? [예/아니오]"

 

📌 예제

• 삭제 버튼을 클릭하면: "정말 삭제하시겠습니까?" 컨펌 창 표시
• 비밀번호 입력 오류 시: "비밀번호가 일치하지 않습니다." 알럿 표시

⇒ UI적으로 표현할 수도 있지만, 텍스트로 정의하는 것이 빠르고 효율적이다.

ex. Confirm : 쿠폰이 리스트에서 삭제되고 고객에게 발급된 쿠폰은 유지됩니다. 선택된 데이터를 삭제하시겠습니까? → 예/아니오 ⇒ 예 → 정상적으로 삭제되었습니다.(토스트 메시지)

⇒ 재활용도 훨씬 좋다.

 

UI적으로 설명을 하게 된다면 물론 이것도 방법이겠지만 모바일과 PC 버전에 따라서 또 다르게 좀 그려줘야 된다. 모바일에서는 이렇게 안 나올 수 있기 때문에. 이제 채널마다 또 다른 특성을 갖고 있는 것들을 다 좀 포함해서 설명을 해줘야 되다 보니까 차라리 텍스트로 상술하고, 채널에서 어떻게 표출될지는 적지 않는다.

 

---

링크 연결과 관련된 서술

링크로 이동했을 때 어떤 페이지 호출이라고 해서 그 페이지에 아이디를 써주는 것도 좋다.

• ex. 선택 시, 수기 발급 팝업 호출(GN-5.3.4.1.2) 이런 식으로.
• 화면명을 쓰게 되면 자칫 혼동이 있을 수 있다. 그러니까 정확하게 정보 구조화에서 정의했던 화면 아이디를 기재해 준다.

 

설명 작성의 중요성

- 설계를 할 때 설명란에 무엇을 써야 하는지 고민하는 경우가 많다.

>> 설명이 부족하면 구현이 어려워진다는 것.

=> 특히 아래 세 가지 요소를 명확하게 설명해야 혼동을 줄이고 원활한 개발이 가능해진다.

 

---

설명 작성 시 필수 포함 요소

디스크립션 작성 포인트

 

디스크립션 작성 Tip

 

설명란에 반드시 기재해야 될 세 가지의 포인트가 있는데 첫 번째가 요소와 속성이다.

- 요소는 그 항목 자체를 의미하고 속성은 그것에 대한 어떤 속성이 있는 경우에 속성까지 같이 기재를 해 준다.

- 변화에 대한 정의는 어떤 레이아웃이 변화되는 경우도 있지만 기능적인 변화도 있어서 그 변화가 어떤 것이든 간에 사용자의 인터랙션이 발생하는 것이면 규제해 준다.

- 피드백은 알락과 컨펌이 있는데 알락과 컨펌들을 설명해 준다.이 세 가지가 이 설명 란에 반드시 있어야 되는 것들이고요

추가적으로 어떤 해상도 같은 것들을 기재하거나 또는 "그 프론트 영역이 관리자 어디서 관리된다" 처럼 관리 포인트를 기재해 줄 수 있다.

 

설명 작성 시 유의할 점

1) 혼동 방지

- 각각의 요소를 설명할 때 최대한 구체적으로 서술해야 함

- "다들 알겠지?"라는 생각은 금물! 명확한 설명이 필요함

 

2) 변화 정의 시 고려할 사항

- 버튼 클릭 시 변화뿐만 아니라 UI 레이아웃 변경도 포함

- 이동 경로를 명확히 기재해야 개발자가 혼동하지 않음

 

3) 피드백 정의의 중요성

- 잘 정의된 피드백은 사용자의 실수를 방지하고 경험을 향상시킴

- 모바일과 PC 환경에 따라 다르게 동작할 수 있으므로, 설명 시 고려해야 함

 

 

설명 작성 시 반드시 포함해야 할 3가지 요소

(1) 요소와 속성 정의: 각 항목의 의미와 가능한 값을 명확히 설명

(2) 변화(Interaction) 정의: 버튼 클릭, 마우스 오버, 터치 등 변화 요소 설명

(3) 피드백(Feedback) 정의: 알럿(Alert), 컨펌(Confirm) 등 사용자 응답 요소 설명

 

추가적으로 고려하면 좋은 요소

이동 경로 정의 : 특정 버튼 클릭 시 이동하는 페이지를 명확히 설명

공통 요소 모듈화 : 헤더, 네비게이션 바, 공통 UI 요소를 따로 관리하여 수정 용이