작년 봄 신입이 들어왔었다. 기획 직무는 아예 처음인 친구였다. 나랑 같은 프로젝트를 하는 것도 아니었고, 우리 부서 사람이라는 것 외에는 큰 접점이 없었다.
평소에 사람들은 나한테 질문을 굉장히 많이 하는 편이다, 업무든 아니든. 회사 사람이든 그저 지인이든. 그 신입도 겹치는 프로젝트도 없는데.. 왠지 모르게 나한테 질문을 되게 많이했다. 그땐 그저 마음이 너그러웠는지 열심히 받아주려고 했었지만 원래 성질 어디로 안가는지 하루에 질문 3개만 하라고 못 박았다. 분명 손가락만 좀 움직여도 정보의 홍수..아니 이젠 정보의 우주라고 불러야 하나.. 무튼 네이버와 구글이면 못찾을 정보가 없는 세상인데.. 검색도 안하고 질문하는게 괘씸했다. 이건 이 친구만의 문제가 아니다 그냥.. 사람들은 검색하기 전에 사람한테 질문을 한다.
그 중 하나가 알럿과 팝업에 관한 내용이 있다.
그리고 나는 그 친구에게 숙제를 냈다. 감히 내가 누구한테 숙제를 낼 위치는 아니었지만, 좀 상황을 유쾌하게.. 풀어보고 싶었다.
팝업, 알럿, 토스트 팝업, 레이어 팝업에 대해서 조사해오라고 했다. / 언제까지 / PPT에 정리해서
이 글은 그 친구의 숙제 결과를 기반으로 작성되었다. 꽤 잘 조사해서 부서원들에게 공유했던 기억도 있다.
1. 팝업
팝업 창은 특정 웹사이트가 어떠한 내용을 표시하기 위해 갑자기 ‘pop’하고 생성되는 새 창을 의미한다.
새 창을 표시하기 위해 기존 페이지를 전환하는 방식이 아닌, 새로운 웹 창을 하나 더 추가시키는 기능이라 할 수 있다.
주 용도는 광고 혹은 새로운 정보를 갱신, 알리는 것. 다만 트래픽을 증가시키기도 하고, 팝업창이 교묘히 보이지 않게 떠올라서 쓸데없이 메모리를 잡아먹는 일도 있기 때문에, 웹브라우저는 팝업창 차단 기능을 지원한다.
특히 요즘은 대부분의 브라우저가 팝업을 차단한 상태가 default라서 새 창으로 열리게끔 하는 UI보다는 상황에 맞춰 아래 나올 토스트 팝업, 레이어 팝업, 모달을 많이 사용한다.
2. Alert / Confirm / Prompt
자바스크립트를 이용해 사용자에게 주의를 주거나 또는 확인을 받거나 입력값을 받는 브라우저 메시지 창이다. 인터넷을 사용해본 사람이라면 한번은 만났을 가장 흔한 창이다.
Alert / Confirm / Prompt는 직관적으로 구분이 가능하다. 버튼의 개수 또는 입력창의 여부로 확인할 수 있다.
Alert은 이렇게 버튼이 하나다. 주로 사용자에게 주의를 주거나 알림을 일방적으로 주는 경우에 사용한다. 이미지 속 'members.ssg.com' 부분은 페이지의 도메인이 노출되는 영역으로 없앨 수 없다. '아이디 또는 이메일 주소를 입력해주세요.' 와 '확인'의 문구 변경은 가능하지만 줄바꿈을 불가!
Confirm은 true / false로 사용자의 행위에 대해서 true와 false의 사용자 선택 값에 따라서 다음 행동을 결정해야 할 때 사용한다. 말로 쓰고 보니 어렵지만, 블로그와 같이 장문의 글을 쓰는데 저장 없이 창을 닫으려고 할 때(닫기 버튼을 누를 때), 사용자에게 '지금 페이지를 이탈하면 작성한 내용이 모두 사라진다. 정말 나갈거니?'라고 알려주는 것이다.
Prompt는 이렇게 브라우저 메시지 창 내에서 입력값을 받는 자바스크립트인데, 알고만 넘어가자. 요즘은 잘 안쓰는 것 같다.
alert창이나 confirm창 모두 사용자에게 한번 더 생각하거나 취소할 여지를 주는 것으로, 중요한 부분이다. 개발자의 경우 alet이라고 말하면 저 자바스크립트 알럿을 떠올려버리기 때문에 버튼이 두개인 경우 confirm으로 알려주면 조금 덜 혼란스럽게 의사소통할 수 있지 않을까?
3. 레이어 팝업
페이지 위에 하나의 layer를 쌓아서 보여주는 창이다. 한화처럼 주로 공지사항을 노출하기 위해서 활용하는 경우가 많고 최근엔 모바일에서 더 많이 자주 볼 수 있다.
한화의 사례와 달리, 모바일에서 배경을 어둡게 처리하고 팝업을 강조하며 선택을 안하는 경우 팝업에서 이탈을 못하게 하는 경우도 있는데 이는 모달에 대해서 알아야 한다.
4. 모달(Modal; 모달 윈도)
모들 윈도(Modal Window)는 사용자 인터페이스 디자인 개념에서 자식 윈도에서 부모 윈도로 돌아가기 전에 사용자의 상호동작을 요구하는 창을 말한다. 그래서 응용 프로그램의 주 창의 작업 흐름을 방해한다. 일반적으로 모달 대화상자로 불리는데, 그 이유는 대화상자를 부를 때 흔히 사용되기 때문이다. 우리가 자주 사용하는 파일 열기/저장 대화상자를 생각하면 이해하기 쉽다.
모달 창들은 일반적으로 사용자의 명령을 인식하기 위해서나, 긴급 상황을 알리기 위해 많이 사용된다. 웹에서는 이미지 작업을 예로 든다면 이미지를 자세하게 볼 때 자주 사용된다.
위키백과(링크)
모달은 주로 강제성의 의미가 많이 부여되어 있다. 위에서 언급한 것처럼 선택을 하지 않는 경우 페이지 이동이 어렵게 만든다. APP 권한 동의, 개인정보 동의 등 명확한 행동이 필요한 경우에 사용하면 좋다.
사실 최근에 레이어 팝업이나 모달이나 정확하게 칼처럼 구분하지는 않는다.
5. 토스트 팝업
gif가 길지만 뭔가 완료되고 나오는 저 툭튀어나오는 아이, 빵이 구워지고 토스트 기기에서 툭 튀어나오는 것 같다고 해서 토스트팝업이라고 궁예해본다. 하지만, 구글 머터리얼 디자인에서 저 영역에 아이콘이나 이미지를 넣는 것을 지양한다.
모바일 쇼핑을 하다가 보면 가끔 발견한다. '장바구니에 상품을 담았어요' 라는 문구로
사용자의 행동에 대한 메시지를 전달하고 싶은데 굳이 확인/취소 이런 버튼이 필요없고 간단한 정보만 전달할 때 사용한다. 토스트 팝업은 텍스트로 이루어져 있고, 언제 나타날지(트리거), 얼마나 지속될지(시간)을 정하면 된다.
위의 이미지처럼 ACTION 버튼이 있건 없건 간에 구글 머터리얼 디자인에서는 모두 Snack bar라고 칭하고 있다. 팝업으로 만들기엔 내용이 적고, 토스트 팝업으로 하기엔 액션이 필요할 경우 사용하기에 좋다. 텍스트, 트리거, 시간, 링크를 결정하면 된다.
이미지도 찾고, 내용도 추가하면서 작성하다보니 꽤 오래 작성했다. 내용 중 틀린게 있다면 댓글로 달아주시길.....
그 신입 친구는 성실했고, 꽤 잘 조사해왔으며, 나도 덕분에 공부할 수 있었다. 그리고 성격을 볼 수 있었다. 꽤 성실하고 꽤 꼼꼼했고 주어진 일을 열심히 했다. 이래서 어른들이 똘망똘망 열심히 하려는 사람 예뻐하는 건가 싶을 정도로 더 알려주고 싶었다. 그 전에 다른 슬픈 사연이 있기 때문에 더 알려주는 건 안했지만, 이런 비슷한 걸 몇 번 반복했다. 부디 그 친구가 기획자로 성장하는데 도움이 되길 바라며
'기획 N년차' 카테고리의 다른 글
| [설계를 해보자] 01. 회원가입 (0) | 2023.01.19 |
|---|---|
| 화면 설계할 때 가장 먼저 고려해야 하는 것들 - Web (0) | 2021.08.05 |
| 지도 앱, 이런 서비스 없을까? (1) | 2021.07.12 |
| 제발 익스플로러 좀 버려주세요! (0) | 2021.06.16 |
| 기획자의 사소한 글쓰기 (0) | 2021.06.07 |
| 서비스 유도 - 스타벅스 쿠키 수집 후 (0) | 2021.05.20 |
| 제안, 제안, 그리고 또 제안 (0) | 2021.04.27 |
| 성장일기 (0) | 2020.09.19 |