6. 웹/앱 디자인 용어 이해
GA 기획 및 개발자 소통을 위한 필수 개념
GA 관련이라기 보다는 IT 디자이너, 기획자, 개발자가 알아야 되는 용어이긴 합니다만 일단 아래 용어는 기본적으로 이해를 해야 원활한 기획과 태깅 작업이 가능합니다. 시중에 여러 자료를 취합하여 제가 좀 더 부연설명한 것이라 제 스스로도 공부하고, 참고하는 목적으로 기재한 것입니다.
<웹 관련>
1) UI와 UX
각각 User Interface와 User eXperience의 약자입니다.
UI를 그냥 검색하면 입력-출력 장치라는 뜻이 있는데 요즘에서는 이러한 의미로는 거의 사용하지 않고, 눈에 보이는 시각적인 디자인 요소들을 말합니다. 버튼, 폰트, 색상, 위치, 크기 등등 Web과 App에서 보여지는 모든 것들을 통칭합니다. UX는 사용자 경험을 뜻하고, UI와 항상 같이 다닙니다.
예를 들면, 아이폰의 경우 사파리 브라우저 주소창을 상단 또는 하단에 두도록 선택할 수 있습니다. 만약 하단에 있다면 주소 입력시 엄지로 입력을 할 것이고, 상단에 있다면 폰을 한 손으로 들고 다른 한 손 검지로 주소창을 누르는 행동이 자연스럽게 나올 것입니다. 주소창이라는 UI의 변동으로, 사용자의 경험인 UX가 달라지는 상황입니다. 디자인에 매우 중요한 요소이므로 가장 먼저 소개했습니다.
출처 : www.vservices.com2) 레이아웃(Lay-Out)
일정 해상도 공간(1920x1080, 또는 400x800) 안에 이미지나 텍스트, 버튼 등을 배치하는 것입니다. 블로그를 처음 만들어보신 경험이 있다면 메인배너를 어디에 넣을지, 메뉴를 몇 개의 층으로 할지 설정하는 화면을 많이 보셨을 겁니다.
출처 : https://web.dev/patterns/layout/3) 그리드(Grid)
레이아웃 안에서 정확한 위치 배정을 위해 수직-수평의 격자 개념의 구분 기준입니다.
4) 반응형 웹
접속하는 디스플레이 크기에 따라 자동으로 웹 화면이 ‘반응’하여 변하도록 한 형태입니다. 기본적인 콘텐츠는 다 들어있지만 PC냐 모바일이냐에 따라 위치나 크기가 바뀌는 형태입니다.
출처 : https://blog.helloweb.co.kr/hello-web-ecommerce-responsive-web/5) 스토리보드(화면설계서)
웹사이트 전체 경로 및 화면 구성을 이해할 수 있는 기획서이자, 화면 설계도를 뜻합니다. 서비스의 흐름, 각 화면의 구성이 자세히 나와있어야 하며 보통 기획자가 만듭니다. 이것을 토대로 디자이너가 작업할 수 있습니다.
https://mklab-co.medium.com/%EC%9E%91%EC%84%B1%EB%B2%95-%ED%99%94%EB%A9%B4%EC%84%A4%EA%B3%84%EC%84%96) 스타일 가이드
디자인의 정체성이 흐트러지지 않게, 텍스트 폰트, 컬러, 줄간격, 버튼 등 일관성을 유지하기 위해 보통 디자이너가 만들며 퍼블리싱, 개발자가 참고합니다.
화면 구성이 다르더라도 기본적인 규칙은 일정하게 만들어야 통일성이 있어보이므로 이를 지키기 위한 별도의 가이드 양식을 뜻합니다.
https://bonsae.tistory.com/737) GNB(Global Navigation Bar)
메인 메뉴 보통 상위에 고정으로 배치되며, 메인 페이지 뿐만 아니라 어느 페이지를 가도 없어지지 않고 다른 경로로 이동하기 위해 ‘내비게이션’역할을 하는 바 메뉴를 뜻합니다. 왼쪽에 있으면 Left Navigation Bar를 줄여 LNB라고 합니다.
https://geonlee.tistory.com/2448) 푸터(Footer)
GNB와 유사하지만 발(Foot) 쪽, 아래쪽에 위치한 바 형태입니다. 보통 회사 이름, 주소, 개인정보 처리방침 등이 있고 필수적이지만 사용자에게 크게 관심이 없는 콘텐츠가 들어갑니다. 푸터의 반대는 헤더(Header) 영역이라고 합니다.
https://www.beusable.net/blog/?p=43919) 톤앤매너
웹 전반의 스타일, 방향, 색상 같은 포괄적인 느낌입니다. 이를 구체적으로 가이드 형식으로 세부적으로 만들면 스타일 가이드가 됩니다.
10) 목업(Mock up)
실제 구현되는 형태를 가상으로 보여주는 것으로, 일반적으로는 PC나 모바일 화면 껍데기에 실제 만든 콘텐츠를 집어넣어 마치 실제처럼 꾸며 보여주는 시안 등을 뜻합니다.
https://plan.yesform.com/ppt/100409709.php11) 파비콘(Favicon)
아주 작은 소형 아이콘으로, 보통 서비스 로고를 작게 16x16 픽셀 사이즈로 만듭니다. 브라우저에 사이트가 뜰 때 노출되며, 사이트 내에 텍스트 옆에 넣어 서비스 IC를 강조하는 목적으로 사용합니다.
https://searchadvisor.naver.com/guide/markup-favicon12) 인풋(Input) 창
뭔가 입력할 수 있는 공간을 뜻합니다. 보통 회원가입시 이메일이나 비번 등이 되겠죠. 각 항목에 뭘 쓰면 되는지 정보가 써져있는 것을 라벨 또는 레이블(Label), 입력하는 공간에 연한 음영으로 예시를 써놓는 것을 플레이스홀더(Placeholder)라고 합니다.
https://webdir.tistory.com/42913) 썸네일(Thumbnail)
요즘은 유튜브 때문에 더 유명해졌는데, 원래 페이지나 사진을 축소해서 미리 알아보기 쉽게 보여주는 축소해서 보여주는 이미지를 말합니다. 영상 재생 전에 나오는 이미지 뿐만 아니라 쇼핑몰 등에서 상세 화면 들어가기 전에 제품 이미지를 보여주는 것을 통칭합니다.
<앱 관련>
1. 스플래시 스크린(Splash Screen)
: 앱이 처음 켜지고 작동하기 전에 나오는 화면을 말합니다. 보통 서비스 로고나 광고 화면이 나옵니다.
https://www.justinmind.com/blog/splash-screen-designs/2. 엠프티 데이터 (Empty Data)
: 앱을 처음 실행 시켰을 때, 제일 처음 아무것도 설정이나 추가가 안된 상태를 엠프티 데이터라고 합니다. 말 그대로 빈 화면이죠. 아무 가이드가 없으면 오류인 것으로 착각할 수 있습니다.
https://www.toptal.com/designers/ux/empty-state-ux-design3. 코치 마크(Coach Mark)
: 처음 앱을 실행하는 경우, 음영이 있는 반투명으로 기존 화면을 덮어서 각 버튼이나 메뉴에 대한 설명을 해주는 화면을 뜻합니다. 이름 그대로 코치 해주는 마크.
https://jaeyoung2010.medium.com/coach-mark-144457d01d554. 워크스루 페이지 (Walkthrough page)
: 보통 왼쪽에서 오른쪽으로 스와이프 하는 페이지로 구성된 첫 시작 튜토리얼 화면을 뜻합니다. 좀 더 사용에 자세한 안내를 해야하는 경우에 넣습니다.
https://stackoverflow.com/questions/54428294/how-can-i-implement-an-onboarding-walkthrough-page-in-a5. 스프링보드 (SpringBoard)
: 모든 스마트폰이 이 구조로 되어있습니다. 보통‘런처(Launcher)’라고도 하는데, 아이콘이나 카테고리를 구분시켜놓고 일정 수를 넘어가면 다음 페이지로 넘어가는 구조로 되어있습니다.
https://androidayuda.com/ko/%EA%B8%B0%EA%B3%84%EC%A0%81-%EC%9D%B8%EC%A1%B0-%EC%9D%B8%EA%B0%84/%EC%9E6. 드롭다운(Drop Down) : 버튼 터치(클릭) 하고 세부 항목 중에 선택지가 발생하는 UI
https://docs.unity3d.com/kr/2020.3/Manual/script-Dropdown.html7. 콤보박스 (Combo Box) : 입력할 수 있는 기능이 더해진 드롭다운 메뉴
https://experience.sap.com/fiori-design-web/combo-box/8. 라디오 버튼(Raido Button) : 여러 선택지 중 하나만 선택할 수 있습니다. (라디오가 하나의 주파수 밖에 못 맞추는 성격 때문에 라디오 버튼)
https://www.jitbit.com/alexblog/242-the-history-of-a-radio-button/9. 체크박스(Check Box) : 여러 선택지를 고를 수 있습니다.
10. 브레드크럼(Breadcrumbs) : 이동경로, 뎁스(Depth)를 알려주는 UI
https://www.pinterest.co.kr/pin/breadcrumbs--337840409531752736/11. 토글(Toggle) : 스위치라고도 하고, 해당 기능을 켜고 끌 때 사용합니다.
https://brunch.co.kr/@writer-beyou/612. 툴팁(Tool Tip) : 이름 그대로 툴에 대한 팁, 특정 버튼이나 기능에 부연설명을 해주는 자동으로 뜨는 표시를 뜻합니다.
https://userguiding.com/blog/tooltip-examples-best-practices/13. 스피너(Spinner) : 숫자를 입력하거나 화살표로 조절할 수 있는 UI입니다. 로딩 화면 때 뱅글뱅글 도는 것도 스피너라고 하는데, 여기서는 아래 버튼을 의미합니다.
14. 슬라이더(Slider) :
위아래, 좌우로 조절하여 수치를 줄이고 늘리도록 시각적으로 만든 UI
https://www.justinmind.com/blog/slider-design-web/15. 캐러셀(Carousel)
위에서 설명한 워크스루나 스프링보드처럼 스와이프하면 페이지가 바뀌듯이 이미지나 영상 등의 콘텐츠가 좌우, 위아래 순환하며 전환되는 UI
https://webflow.com/blog/carousel-slider-design-best-practices16. 플로핑 액션 버튼(Floating Action Button) : 약자로 FAB라고 하고, 그냥 플로팅 버튼이라고 많이 합니다.
https://developer.android.com/guide/topics/ui/floating-action-button?hl=ko17. 팝업 : 웹, 앱 포함하여 창 위에 또다른 창을 띄우는 경우로, 메인 화면과 별개로 구분되어 메인 창을 종료하더라도 팝업은 남아있습니다.
18. 모달(Modal) : 창 위에 또다른 창이 뜨는 것은 팝업과 동일하나 다음 진행단계 상에서 모달을 무조건 거치도록 만든 것으로 종료하기 전까지는 메인 화면을 볼 수 없습니다.
https://velog.io/@eensungkim/Modal-TIL-58%EC%9D%BC%EC%B0%A819. 아코디언(Accodion) : 악기 이름처럼 메뉴도 접었다 펼쳤다 할 수 있습니다.
https://dev.to/monalishamondol/how-to-create-accordion-menus-using-simple-html-and-css-i8o20. 메뉴 : 해당 버튼에 메뉴 따라 조금씩 차이가 있습니다.
https://www.behance.net/gallery/89736895/Know-Your-Menu-Bento는 현 월드컵 축구 국가대표 벤투 아닙니다. 일본어로 도시락을 뜻하는 '벤또'입니다. 도너과 케밥이 이해가 안가실 수 있는데, 실제로 우리나라의 케밥은 도너에 고기를 잘라서 또띠야 같은 거에 싸서 먹죠. 위가 크고 아래가 가는 모양이라서 저렇습니다. 원래 케밥은 꼬치처럼 세로로 끼워먹어서 저렇게 표현합니다.
아래 사진 보면 이해 가시죠?
21. 픽커(Picker) : 아이폰의 경우는 휠 방식으로 회전해서 날짜를 정하는 경우가 많고, 일 단위를 넘어가면 보통 월/년은 선택하는 경우가 많습니다.
22. 뱃지(Badge)
: 새로운 정보나 업데이트 건이 있을 때 숫자나 표시를 해주는 기능입니다. 숫자가 있는 경우 보통 컨테이너 뱃지라고 합니다.
https://setproduct.com/blog/badge-ui-design다시 말씀드리지만, 사실 위 용어들은 GA와 직접적인 연관은 없습니다. 그러나 각 화면과 버튼 등에 GA 태그를 삽입해서 각 Event 마다 특정 데이터를 수집하기 위해서는 명칭을 정확하게 불러줘야합니다. 기획자 또는 개발자가 되어 혼동없이 소통을 해야, 처음에 구축도 수월하고 이후 검수(QA) 단계에서도 시간 낭비를 막을 수 있습니다.
사실상 GA는 외주를 주더라도, GA를 구축하려는 온라인 서비스 실무 담당자가 계속 대응을 해야하기 때문에 해당 IT 용어는 필수입니다.
구축을 한 번 해보시면 왜 기본 용어를 알고 넘어가야하는지 바로 이해할 겁니다.
