화면설계 (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) 이런 식으로.
- 화면명을 쓰게 되면 자칫 혼동이 있을 수 있다. 그러니까 정확하게 정보 구조화에서 정의했던 화면 아이디를 기재해 준다.
설명 작성의 중요성
- 설계를 할 때 설명란에 무엇을 써야 하는지 고민하는 경우가 많다.
>> 설명이 부족하면 구현이 어려워진다는 것.
=> 특히 아래 세 가지 요소를 명확하게 설명해야 혼동을 줄이고 원활한 개발이 가능해진다.
설명 작성 시 필수 포함 요소
설명란에 반드시 기재해야 될 세 가지의 포인트가 있는데 첫 번째가 요소와 속성이다.
- 요소는 그 항목 자체를 의미하고 속성은 그것에 대한 어떤 속성이 있는 경우에 속성까지 같이 기재를 해 준다.
- 변화에 대한 정의는 어떤 레이아웃이 변화되는 경우도 있지만 기능적인 변화도 있어서 그 변화가 어떤 것이든 간에 사용자의 인터랙션이 발생하는 것이면 규제해 준다.
- 피드백은 알락과 컨펌이 있는데 알락과 컨펌들을 설명해 준다.이 세 가지가 이 설명 란에 반드시 있어야 되는 것들이고요
추가적으로 어떤 해상도 같은 것들을 기재하거나 또는 "그 프론트 영역이 관리자 어디서 관리된다" 처럼 관리 포인트를 기재해 줄 수 있다.
설명 작성 시 유의할 점
1) 혼동 방지
- 각각의 요소를 설명할 때 최대한 구체적으로 서술해야 함
- "다들 알겠지?"라는 생각은 금물! 명확한 설명이 필요함
2) 변화 정의 시 고려할 사항
- 버튼 클릭 시 변화뿐만 아니라 UI 레이아웃 변경도 포함
- 이동 경로를 명확히 기재해야 개발자가 혼동하지 않음
3) 피드백 정의의 중요성
- 잘 정의된 피드백은 사용자의 실수를 방지하고 경험을 향상시킴
- 모바일과 PC 환경에 따라 다르게 동작할 수 있으므로, 설명 시 고려해야 함
설명 작성 시 반드시 포함해야 할 3가지 요소
(1) 요소와 속성 정의: 각 항목의 의미와 가능한 값을 명확히 설명
(2) 변화(Interaction) 정의: 버튼 클릭, 마우스 오버, 터치 등 변화 요소 설명
(3) 피드백(Feedback) 정의: 알럿(Alert), 컨펌(Confirm) 등 사용자 응답 요소 설명
추가적으로 고려하면 좋은 요소
이동 경로 정의 : 특정 버튼 클릭 시 이동하는 페이지를 명확히 설명
공통 요소 모듈화 : 헤더, 네비게이션 바, 공통 UI 요소를 따로 관리하여 수정 용이