[UXUI디자인] 9년차가 알려주는 진짜 실무 용어 1탄 - UX편ㅣ출근 겁내지 마세요
안녕하세요 디블리셔 써니입니다.
오늘은 실무에서 자주 사용하는 UX 용어들을 한 번 정리해보려고합니다.
써니씨~ 기획팀에서 추가 된 화면에 대한
스토리보드랑 플로우차트를 보내왔어요. 확인해주시고,
오늘은 관련 레퍼런스 좀 찾아 보고 내일부터 디자인 작업 들어가주세요.
작업 끝나면 바로 프로토타입 준비해서 디자인 QA 진행할 예정이니,
프로토타입 제작 일정 세부적으로 계획해서 내일까지 전달해주세요.
저 또한 신입 시절에 '누끼'라는 단어조차 알아듣지 못했던 일인입니다.
출근 일주일차에 과장님께서 누끼좀 따서 전달해달라고했는데,
누끼가 뭔지 몰랐고 , 그렇다고 물어보는거는 눈치보이고 ..인터넷 검색하고 그랬거든요.
그래서 신입분들의 그 말못할 고충의 시간을 너무 이해합니다.
디자이너 뿐만 아니라 기획자분들도 함께 보시면 좋을 실무 용어들이니깐
꼭 숙지하셔서 실무에 도움이 되길 바라겠습니다.
01. 와이어프레임 (Wireframe)
웹사이트, 앱 또는 스크린이 사용되는 인터페이스 화면 디자인의 초기 단계에서 사용되는 기본적인 화면 레이아웃 입니다.
간단한 선과 도형들로 화면에서 필요한 로고나 검색 아이콘, 이미지등의 구성 요소들의 대략적인 위치를 잡아놓은 기획 화면이라고 생각하시면 됩니다.
02. 스토리보드 (Storyboard)
스토리보드는 디자이너랑 개발자가 작업할때 최종적으로 확인하게되는 기획 문서입니다.
와이어프레임을 토대로 디테일한 화면 플로우나 기획 내용들을 포함하고 있는 문서입니다.
보통은 PPT나 PDF등의 파일로 제작되어 전달이 되며, 줄여서 SB라고 하기도 합니다.
03. 플로차트 or 플로우차트 (Flow Chart)
'플로차트'라는 말이 올바른 명칭이지만, '플로우차트'라고 말하기도 합니다.
플로차트는 전체적인 서비스의 프로세스와 동작 흐름들을 도형이랑 화살표등을 이용해서 한눈에 볼 수 있도록 표현해놓은 것 입니다.
스토리보드는 각각의 화면들에 대하여 디자인과 개발 사항을 상세히 나타낸 문서라면, 플로 차트는 전체적인 서비스 프로세스의 흐름을 나타내는것이라고 생각하시면 됩니다.
04. 목업
목업은 디자인을 이미지로 시뮬레이션 한 것입니다.
목업을 통해서 실제로 디자인이 어떤식으로 보여질지 미리 확인 할 수 있습니다.
05. 프로토타입 (Prototype)
앞서 말한 목업이 멈춰있는 시뮬레이션 화면을 이미지화 한 것 이라면, 프로토타입은 실제 서비스 화면처럼 클릭하고 이동하고 하는 등의 기능을 간단하게 갖춰놓은 시뮬레이션 모형입니다.
- 디자이너 : 디자인의 흐름을 파악할 수 있습니다.
- 개발자 : 개발 가능여부와 더불어서 기술적인 제약을 미리 고려 할 수 있습니다.
나아가서 사용자들이 제품이나 서비스를 어떻게 사용할 지 미리 파악하고 서비스의 품질을 높일 수 있습니다.
06. 유저빌리티 (Usability)
간단하게 '사용성'이라고 생각하시면 됩니다.
사용자가 서비스 안에서 원하는 것을 얼마나 쉽게 찾을 수 있는가, 또한 얼마나 편리하게 이 서비스를 이용할 수 있는가에 대해 이야기하는 것 입니다. 접근성이나 가독성, 효울성, 일관성 등을 고려하는것이 모두 이 유저빌러티 안에 속합니다.
그래서 이 유저빌러티는 기획,디자인,개발 등 프로젝트의 모든 단계에서 고려하여 사용이 됩니다.
07. 어포던스 (Affordance)
사실 유저빌러티랑 같이 실무에서 자주 사용되는 단어는 아니에요.
그러나 알고있어야 하는 단어이기에 함께 넣어놓았습니다.
어포던스는 사용자에게 어떤 행동을 유도하거나 특정한 동작을 촉발시키는 디자인 특성을 말합니다.
쉽게 말하면, 어떤 행동을 할 수 있도록 유도해주는 겁니다.
예를 들어서, 첫번째로 인풋 박스에서 어떤 식의 내용을 입력해야하는지 사용자가 알 수 있도록 힌트를 주는것과
두번째로 버튼을 버튼으로 인식하도록 만드는 것 등이 모두 어포던스를 고려한 디자인입니다.
08. 반응형/적응형
반응형은 1개의 화면에서 접속한 기기의 화면 크기에 따라 웹페이지가 맞춤으로 변하는 것 입니다.
적응형은 웹용 화면과 모바일용 화면을 별도로 제작하여 사용자가 접속한 화면 크기에 따라 지정된 화면을 노출시키는 것 입니다.
반응형의 대표적인 예로는, 애플 홈페이지가 있습니다.
애플 홈페이지에 접속해보시면 화면이 줄어듬과 같이, 사이트를 구성하는 레이아웃도 유동적으로 변하는걸 확인할 수 있습니다.
그리고 적응형의 대표적인 예로는, 네이버가 있습니다.
네이버는 웹용 주소와 모바일용 주소가 이렇게 별도로 준비되어 있습니다.
- 웹 접속 주소 : www.naver.com
- 모바일 접속 주소 : m.naver.com
09. 네이티브앱/하이브리드앱/모바일웹앱
네이티브앱은 우리가 보통 아는 모바일 APP입니다.
안드로이드랑 IOS등 각각의 운영체제에서만 동작하는 방식으로 만들어진 앱입니다.
그래서 안드로이드용 따로, IOS용 따로 제작해야하고 유지보수도 번거롭다는 아주 큰 단점이 있지만,
그 각각의 운영체제에서만 제공하는 특별한 기능들을 이 네이티브앱만이 활용 할 수 있기에 현재에도 가장 많이 사용하는 앱 제작 방식입니다.
하이브리드앱은 웹을 기반으로 제작된 APP입니다. html형식으로 제작이 되며, 제작된 하나의 파일로 안드로이드와 IOS등 모든 운영체제에 대응 할 수 있어서 빠른 개발이 가능하다는 장점이 있지만 네이티브앱에 비해서 각각의 운영체제들이 제공하는 기능들을 사용할 수 없기도해서 접근성이나 성능면에서 다소 떨어질 수 있습니다.
모바일웹앱은 앱이라기보다는 인터넷 브라우저라고 생각하시면 됩니다.
별도의 앱을 다운로드 하지 않아도 접속 하능하고 그래서 유지보수랑 업데이트또한 즉시 반영할 수 있다는 장점이 있습니다.
그치만 앱에 비하여 성능적인 한계도 크고, 오프라인에서는 접속이 불가하다는 단점이 있습니다.
10. AB테스트 (AB Test)
AB테스트 사용자의 선호도를 파악하는 테스트입니다.
예를들어서, 같은 콘텐츠를 가지고 2가지 버전으로 디자인을 한다음에 사용한테 각각 노출을 시켜본뒤에
어떤 버전이 더 반응이 좋은지 확인하는 테스트입니다.
이 단계에서는 디자인이나 구성을 많이 바꾸는것은 좋지 않고, 예를 들어 버튼의 색감이나, 위치등을 변경하여 해당 요소에 대한 사용자의 반응을 확인해보는것이 더 효과적입니다.
11. 뎁스 (Depth)
'깊이'라고도 하며, 사이트의 계층 구조를 표현하는 단위 입니다.
예를들어, 사이트맵을 기준으로 첫번째 대메뉴는 원뎁스,원뎁스 안에 속한 메뉴들을 2depth 이런식으로 깊이를 표현하는 단위입니다.
어떤 페이지로 이동할 때에, 3depth 이상 들어가면 사용자들이 길을 잃는다고 하니, 기획을 할때에 이런걸 고려하여 기획하면
많은 도움이 될 것 입니다.
12. 킥오프미팅 (Kick-off Meeting)
킥오프미팅은 프로젝트 시작시에, 초기단계에 열리는 회의입니다.
프로젝트에 참여하는 다양한 부서의 담당자들도 확인하고 , 목표나 일정등 전체적인 프로젝트 방향성을 잡는 회의라고 생각하시면 됩니다.
13. 레퍼런스 (Reference)
참고자료라고도 하며,
디자인이나 기획을 하기에 앞서서 제작하려는 화면들에 대해 참고 할 수 있는 사례들을 모아보는것을 뜻합니다.
다양한 레퍼런스 수집 사이트가 잇지만, 대표적인 사이트로는 '핀터레스트'가 있습니다.
14. 디자인QA
디자인QA는 디자인한 화면이 예상대로 구현이 되었고 잘 작동하는지 확인하는 시간입니다.
이 디자인 QA는 디자인이 완료되었을때(개발 들어가기 전) 한 번,
그리고 개발이 완료되었을때 또 한 번 이렇게 총 두 번정도 해주시는게 좋습니다.
디자인 완료 단계에서 QA때는 디자인이 일관성있게 작업 되었는지 확인하며,
개발 완료 단계에서 QA때는 뭐 마진이나 컬러들이 디자인대로 잘 구현이 되었는지, 버튼의 플로팅이나 스크롤들이
의도한대로 반영이 잘 되었는지 확인합니다.
