UI/UX 용어에 대한 정리와 생각

모바일/웹 UI/UX 관련 용어

일단 UI/UX의 사용되는 용어와 기능은 비슷하지만 경험을 생각하는 것이 UX 비주얼 요소를 좀 더 보는 것이 UI라고 정의했을때 ,다음과 같이 용어를 정리하였고 아래 bold는 UI에서 더 중점적으로 다루는 용어이다.

• 사용자 인터페이스(User Interface, UI) : 사용자가 앱이나 웹사이트를 사용하는데 인식하는 그래픽(레이아웃, 버튼, 아이콘), 텍스트 및 오디오 요소를 포함한 화면 구성. 과거의 그래픽 디자이너의 영역에 해당되는 것 같다. 비주얼 요소가 중요하게 작용하여 앱에 대한 인상을 좌우한다.
• 사용성(Usability) : 앱/웹사이트가 얼마나 쉽고 효율적으로 사용될 수 있는지 나타낸다. 개인적으로 중요하다고 생각되는 부분. 앱의 기능적요소가 많으면 다 보여주고 싶을 수 있겠지만 사용성을 고려한다면 너무 복잡한 구성은 눈에 잘 들어오지 않으므로 어떻게 레이아웃을 구성하느냐가 UI디자이너의 역량이 될 것이라 생각한다.
• 접근성(Accessibility) : 다양한 환경에 놓인 사용자들이 앱을 사용할 수 있도록 기능을 고려하였는지 생각할때 쓰인다. 좋은 앱/웹 디자인은 누구나 사용할 수 있는 접근성에 대한 편리함을 고려할줄 알아야 Deep하게 설계했다고 말할 수 있을 것 같다. 나의 경우에는 청각적인 요소를 잘 사용하지 않는데, 서비스를 제작하게 된다면 청각적인 요소(오디오)까지 신경써야되는 부분이겠다.
• 인터랙션 디자인(Interaction Design) : 사용자와 제품간의 상호작용을 설계하는 과정. 개인적으로 가장 좋아하는 디자인 부분이다. 무언가를 눌렀을때 반응이 온다는 것을 즉각적으로 피드백할 수 있고, 시각적인 요소가 다수 포함되므로 기여할 수 있는 부분이 많다고 생각이 된다. 
• 프로토타이핑(Prototyping) : 초기 디자인 아이디어를 시험해보기 위한 앱/웹의 초안. 시범 모델의 뜻으로 내 아이디어를 어떻게 전개하고 있는지 보여줄 수 있는 부분이다. 피그마를 입문하면서 프로토타입을 가장 많이 건드렸었는데, 마치 PPT를 만드는 과정 같았다. 내가 이야기하고 싶은 것을 적절한 애니메이션을 포함해서 스무스하게 소개할 수 있는 단계이다.
• 와이어프레임(Wireframe) : 앱이나 웹의 기본 구조를 간단한 스케치로 나타낸 것. 개인적으로는 포트폴리오에 넣을때 가장 고민되는 부분이다. 나의 경우 와이어프레임을 오프라인 스케치로 진행했을때 좀 더 자유로운 표현과 새로운 아이디어를 많이 떠올리는데 이후 포트폴리오에 해당 과정을 첨가하려고 하면 너무 지저분하거나 불필요한 시간을 할애하여 다시 제작해야하는 과정이 되기도 한다. 좀 더 효율적으로 와이어프레임을 보여줄 수 있는 방법이 없을까 고민해봐야겠다.
• 피드백(Feedback) : 사용자로부터 받는 개선 의견. 의견이 많을수록 서비스가 사랑받고 있다는 것을 나타내는 것 같다.
• 사용자 경험 지도(User Journey Map) : 사용자가 제품을 통해 경험하는 전체 과정을 시각화 한 것. 아직 사용자 경험 지도를 제작해본 경험은 없지만, 용어만을 놓고 봤을때에는 페르소나 설정과도 긴밀한 연관이 있을 것 같다. 또한, 앞서 제품 판매 외주 페이지를 제작하면서 대표님이 페르소나를 설정하는 과정을 본 적이 있었는데, 구체적이고 일상에 밀접한 고객층을 짚어냄으로서 서비스나 제품의 방향성을 더 명확하고 뾰족하게 가져갈 수 있는 단계가 되어준다.
• 히스토그램(Heuristic Evaluation) : 전문가가 디자인의 사용성을 평가하는 방법. 디자이너가 모든 분야를 알고 있으면 좋겠지만, 간혹 모르는 분야에 대해 깊이 알기도 전에 디자인을 해야하는 때가 있다. 그때 실질적인 업계 사람들이 디자인을 피드백해줄 수 있는 것이 히스토그램인 것 같다.
• 반응형 디자인(Responsive Design) : 다양한 화면 크기와 장치에 맞게 콘텐츠와 레이아웃을 자동으로 조정하는 디자인 접근법. 피그마에서는 이 반응형 디자인 구현이 매우 쉬운 편이다. 그래서 수정이나 다양한 디바이스 반영이 깔끔할 수 있다.
• 콘텐츠 전략(Content Strategy) : 앱서비스의 콘텐츠를 기획, 작성, 관리하는 방법론. 마케팅의 분야와도 밀접한 관련이 있을 것 같다. 후킹(hooking)을 할 수 있는 요소를 포함하는 것이 콘텐츠 전략의 일부라고 생각한다.
• 정보 구조(Information Architecture) : 앱/웹사이트에 내 정보를 구성하고 분류하는 방식. 아직 개념이 가장 덜 잡힌 용어이다. 보안이나 서버와 관련이 있는 것일까? 차후 수업이나 디자인 경험을 할때 나오면 눈여겨봐야할 부분이다.

---

• 아이콘 : 기능이나 콘텐츠를 나타내는 소형 그래픽 요소. UI는 이런 그래픽 요소를 조금 더 많이 신경쓴다.
• 타이포그래피 : 텍스트의 스타일과 배열, 가독성과 시각적 매력을 증가시키는 요소.
• 컬러 스킴 : 디자인에서 사용되는 색상 조합. 정체성과 사용자 감정 반응에 영향을 준다.
• 그리드 시스템 : 디자인 요소를 정렬하기 위한 구조적인 프레임워크

 

모바일/웹 UX 기능 요소 용어

• 네비게이션(Navigation) : 사용자가 앱이나 웹에서 이동하는 방법을 제시한다. 예시로 메뉴바, 드롭다운 메뉴, 탭바 등이 있습니다. 어느 페이지에서 어떻게 움직이는지 설계하는 요소.
• 인터랙티브 요소(Interactive Elements) : 사용자가 상호작용하는 요소, 예시로 버튼, 링크, 슬라이더, 토글 스위치 등. 사용자를 가장 현혹시킬 수 있는 요소라고 생각한다.
• 입력 폼(Input Forms) : 사용자가 데이터를 입력하거나 선택할 수 있는 필드. 텍스트 박스, 체크박스, 라디오 버튼 등이 있다. 
• 피드백 및 상태 메시지 : 사용자가 시스템을 작동시켰을때 시스템의 반응이나 상태를 나타내는 메시지. 예시로 로딩 인디케이터, 에러 메시지, 확인 메세지 등이 있다. 특히 인디케이터를 잘 사용하면 대기 시간이 많이 길게 느껴지지 않을 때도 있다. 이를 비주얼 요소와 적절히 섞어 활용하면 사용성이 좋은 앱이 된다.
• 콘텐츠 레이아웃 : 텍스트, 이미지, 비디오 등 콘텐츠를 구성하는 방식. 비주얼적으로는 UI에 가까운 것 같다.
• 검색 기능 : 특정 콘텐츠나 카테고리를 쉽게 찾을 수 있도록 돕는 검색 바나 필터링 옵션이다. 개인적으로 앱이나 웹서비스를 사용할 때 나는 많이 사용하고 있다. 
• 모달 및 팝업 : 추가 정보 제공, 경고 표시, 또는 사용자의 확인 요구할 때 사용되는 오버레이 창. '이해했어?' '이거 해도돼?' 느낌을 보여주는 팝업 창이다. 중요한 정보를 처리하고 받을 때에도 종종 사용된다.
• 툴팁 및 헬프 메시지 : 사용자가 특정 요소나 기능에 대한 추가 정보과 지침을 얻을 수 있게 하는 메시지 창. 처음 서비스를 하게 되면 어색한 부분이 많으므로 여기를 눌러보세요. 와 같은 역할을 한다. 
• 반응형 또는 유동적 디자인 : 앞서 UX용어에서 설명한 반응형 디자인의 일환이다. 다양한 화면과 디바이스에서 콘텐츠가 적절하게 보이고 작동하도록 만들어진 접근법이다.
• 애니메이션 및 전환 : 사용자 경험을 향상시키기 위한 시각적 효과, 예시로 페이지 전환, 버튼 클릭 효과 등이 있다. 모바일의 경우에는 버튼 클릭 효과 (hover)이 작동되지 않아 그부분은 많이 신경쓰지 않아도 좋다.

UX 디자인패턴

• 카루셀(carousel) : 이미지, 콘텐츠, 또는 제품을 순환시키는데 사용되어 사용자가 여러 항목을 빠르게 볼 수 있게 해준다. 나는 디자인패턴을 모바일 앱 메인 배너로 사용했었는데, 처음에 UX개념이 없었을 때에는 배너 이미지를 일렬로 쭉 세워놓고 주석으로 '얘네 순차적으로 돌아감'이라고 써놨다. 나중에 개발자 친구가 '이게 뭔말이야'라고 했을때, 프로토타입으로 기능을 구현해서 더 이상의 설명을 할 필요가 없었다. 이래서 UX가 필요하구나.
• 카드 레이아웃(Card layout) : 관련 정보를 카드 형태로 구성하여 시각적으로 매력적으로 보여주며, 구조화된 방식으로 정보를 제공한다. 
• 메가 메뉴(Mega Menu) : 대규모의 사이트 네비게이션에 사용되며 많은 옵션과 카테고리를 한눈에 보여준다. 주로 이커머스에 많은 것 같다.
• 인피니트 스크롤(Infinite Scrill): 사용자가 페이지 끝에 도달하면 자동으로 추가 콘텐츠를 로드한다. 예시로 소셜 미디어 피드가 있다.
• 탭(taps) : 콘텐츠를 카테고리별로 분리하여 각 탭 아래에 배치하여 원하는 정보를 찾기 쉽게 한다. 보통 모바일에서는 슬라이드 방식으로 인터랙션까지 넣는 경우가 많다.
• 토글 스위치(toggle switch) : 사용자가 설정을 켜고 끄는 방법을 제공한다. 예시로 온/오프 스위치가 일반적이다. 알림이나 마케팅 수신여부 등에서 자주 볼 수 있다.
• 아코디언 : 정보 섹션을 나누고 각 섹션을 확장하거나 축소하여 공간을 절약하고 콘텐츠에 쉽게 저작할 수 있다.
• 모달 윈도우 : 주요 콘텐츠 위에 부가적인 콘텐츠나 기능을 오버레이 형태로 표시한다. 예시로 폼 제출이나 추가 정보를 제공할 때 사용된다. 
• 검색바 : 웹사이트나 앱 내에서 정보를 쉽게 찾을 수 있게 하는 기능이다.
• 햄버거 메뉴 : 네비게이션 링크를 숨겨놓고, 사용자가 필요할때 볼 수 있도록 한다. 주로 모바일 인터페이스에서 사용된다.
• 브레드크럼(Breadcrumbs) : 웹사이트 내에서 사용자의 위치를 나타내며, 이전 페이지로 돌아가거나 사이트 구조를 이해하는데 도움을 준다. 마치 열어본 페이지 경로의 느낌이다.
• 스킵 네비게이션 : 접근성을 향상하기 위해 키보드만 사용하는 사용자가 페이지의 주요부분으로 바로 갈 수 있게 하는 링크. 킬링포인트가 있는 앱이나 서비스라면 유용할 것 같다.

UX 컴포넌트 정리

1. 네비게이션 컴포넌트 : 메뉴바/탭/드롭다운메뉴/사이드바/브레드크럼/페이징컨트롤(검색창 하단에 1,2,3... 있는 네비게이션을 생각하면 된다.)
2. 입력 컨트롤 : 버튼/텍스트필드/체크박스/라디오버튼/토글스위치/드롭다운리스트/슬라이더/데이트피커
   데이트피커도 UX디자이너가 생각할 요소구나. 싶다가, 아 맞겠네! 했다. 프로토타입에 추가해야지!!!
3. 정보 컴포넌트 : 툴팁/아이콘/진행바/알림메시지/모달윈도우
4. 컨테이너 : 카드/아코디언/탭패널/모달
5. 인터랙티브요소 : 캐러셀/드래그앤드롭 인터페이스/컬랩서블 섹션
6. 피드백 및 상태 : 로딩 스피너/상태메시지/스켈레톤스크린/오류메시지

---

원래는 UI 디자인에 굉장히 관심이 많았었는데 UX는 알게될수록 매력적인 요소인것 같다. 특히 이번 스파르타코딩클럽에서 UX/UI 단어 요소를 정리하는 숙제를 통해 가진 시간은 지금까지 내가 디자인했었던 요소들을 떠올리며 어디를 더 보완해야하는지, 뭐가 부족했는지 돌이켜볼 수 있는 시간이 되었다. 또한, 디자인 분야에서 더 공부하고 싶었는데 어떻게 접근할지 몰라하고 있다가 오랜만에 디자인에 관련된 공부를 제대로 할 수 있었던 시간이다.

 

UI(User Interface)

유저가 제품을 사용하기 위한 상호작용의 모든 것