서비스 기획자가 알아야 할 기초 상식으로 2편으로 팝업과 팝업 내 버튼 위치 그리고 팝업 구성에 대해서 알아보자. 또한, 레이블링의 원칙과 유형, 세부규칙과 관련하여 작업을 하는 동안 오류나 실수, 혼란을 방지하기 위하여 어떠한 화면 정의를 해야 하는지 알아보겠습니다.
화면 정의서 정의 규칙이 있을까?
1편에서는 아이콘과 CSS Style과 화면 정의서 작성 기준인 기본규칙에서 Touch Gesture에 대해서 알아보았다. 이제 파업에 대한 사용기준과 팝업의 구성에 대해서 잠시 살펴보겠다. 두 가지 종류의 팝업을 살펴볼 예정인데 속성이 조금 다르다고 할 수 있다.
1. 레이어 팝업
아래 그림에서는 쇼핑했을 때 혹은 무언가의 액션을 했을 때의 알림 팝업이며, 아래 우측은 일명 레이어 팝업으로 안내, 확인 등 시스템에 부하를 주지 않는 단순 데이터 또는 콘텐츠를 보여주는 경우에 사용된다.
우측에서 보이는 팝업이 거의 정석적인 방법으로 상단에 타이틀을 배치하고 중앙에는 하고자 하는 말 즉, 콘텐츠 설명을 붙인다. 그리고 마지막으로 확인 버튼이 있는데 우측 팝업을 정보성 팝업이라고 보통 부릅니다. 또한, 팝업 내 "확인" 또는 "취소" 버튼이 있다면 이는 고지형 팝업이라고 부릅니다.
만약, 모바일 내에서 팝업이 노출된다면, 정보성이든 고지형이든 전체 화면 팝업으로 내보내거나 일부 화면 팝업으로 내보내질 수 있습니다. 이는 기획자의 의도를 통해 방향성을 정하기 나름입니다.
2. 레이블링(Labeling)
라벨링, 일명 레이블링이란 라벨을 붙이는 규칙을 표현하는 것으로 화면에서 많이 필요한 규약이라고 볼 수 있다. 그렇다면 이는 어떻게 활용될까? 라벨링은 메뉴명, 화면 타이틀, 화면 내 소타이틀, 버튼명, 테이블의 칼럼명 등 각기 다른 형태의 레이블이라 하더라도 각기 동일한 규칙을 적용하는 것을 말한다.
원칙적으로 해당 버튼이 어떤 액션을 수행하는지 알 수 있어야 하며, Action을 수행하는 형태와 대상에 대한 정보의 형태를 포함해야 한다. 또한, 영어의 사용은 자제하고 띄어쓰기를 준수한다. 어떤 수행을 하는지에 대한 정보가 있어야 한다는 등의 규칙이 존재한다.
이렇게 말하니깐 정말 어려워 보인다. 이게 도대체 무슨 말일까? 결국에는 국어를 혼용해서 쓰지 말라는 말 같기도 하다.
| 구분 | 설명 |
| 목록 | '리스트, list' |
| 오류 | '에러, Error' |
위에 표현된 표처럼 이를 사용하는 데 있어 주의를 기울이라는 뜻이며, 정체불명의 언어는 최대한 자제하여 사용하도록 한다.
3. 콘텐츠 레이아웃(Contents Layout)
이제 레이아웃을 그리는 과정에 대해서 효과적이고 효율적인 설명을 하고자 한다. 레이아웃과 Flow는 모두 인터넷에서 활발하게 볼 수 있기 때문에 검색하면 다 나오지만 간단하게 말하자면 다음과 같다.
1) 메인 이동
우리는 광고 또는 검색을 통해 사이트에 접속된다는 사실을 모두가 알고 있다. 그러면 그 페이지를 랜딩페이지 혹은 메인 페이지라고 부르는데 메인 페이지에서 어떠한 액션이 일어날 수 있는지에 대한 설계를 하는 것이 가장 중요하다. 생각을 해보자. 그리고 실제로 쇼핑몰이나 어느 사이트에 들어가서 나는 무엇을 하는지에 대해서 곰곰이 생각해볼 수 있다.
따라서, 페이지에 가서 하는 행동을 네모 박스, 다이아몬드 박스로 그려 볼 수 있다. 이는 이동 경로를 표시하며, 컨버젼(전환)이 일어날 수 있도록 구매 여정을 고객의 입장에서 그려보는 것이 가장 중요하다.
또한, 모바일이냐 웹이냐에 따라서 다르지만 레이아웃에 대한 구도를 잡고 기획, 상품 리스트를 나열할 설계를 하는 것도 필요하다.
이렇게 레이아웃을 잡게 되면 이제 진짜 화면 기획으로 들어가게 된다. 광고주의 니즈 파악도 중요하지만 어떤 기능이 정말 중요한지에 대한 파악도 중요하기에 콘셉트인 계획단계가 다시 한번 여기에서 중요하다고 할 수 있다.