5. UI/UX용어를 알아보자 (프리스쿨/얼리버드 챌린지)

01.
UI/UX관련 용어 알아보기

아래의 자료들을 읽고 몰랐던것들과 중요한것들(주관적) 정리해보았다.

 

참고한 자료 출처 :

https://brunch.co.kr/@zero-base/20

IT 회사의 비전공자를 위한 UX 용어 모음집

https://brunch.co.kr/@sue/34

[UX 스터디] 실무에서 쓰는 UX/UI 용어 정리

https://brunch.co.kr/@fastfive/428

담당자도 헷갈리는 UX/UI 용어 모음.zip

https://startupinfoshare.tistory.com/60

[개발 용어] 프로토타입(Prototype), MVP 뜻과 차이점

---

1. UI

User Interface

 

2. UX

User eXperience

 

3. GUI

Graphic User Interface

 

4. Feature 피처

서비스에서 하나의 기능 단위

*핵심기능 - key feature

 

5. Feasibility

실현 가능성

*한글로 대체되지 않는 단어도 아닌데 왜 영어를 사용하는거지?

 

6. VOC

Voice of customers

 

7. UGC

User Generated Content

사용자가 생성한 참여한 콘텐츠

*스타일쉐어- 코디 같은 콘텐츠

 

8. 와이어 프레임

기획단계에서 배치나 정보의 흐름을 보여주는 lo-fi 버전 디자인

 

9. 스토리보드 *SB

와이어프레임에 시나리오나 설명들이 첨부 된 버전

 

10. Toggle *토글

On/Off 설정할때 쓰는 스위치 버튼

 

11. Accordian  *아코디언

접었다 폈다 할 수 있는 컴포넌트

무신사 스토어

 

12. Carousel  *캐러셀

메인 화면에 주로 쓰임

컨베이어벨트나 회전목마라는 뜻의 단어답게 

옆으로 돌아가는 콘텐츠~

29CM

 

13. IA *Information Architecture

정보구조도

정보의 우선순위, 흐름등을 포함

*가장 기초적인 작업

 

14. UT *Usability Testing

사용성 테스트

*테스트 목표/질문/방식/대상 고려할 것

 

15. Bread crumbs

'빵 부스러기' 헨젤과 그레텔에서 따온 용어

사용자가 어떤 위치에 있는지 시각적으로 나타냄(길 잃지 않게)

네이버 쇼핑

 

16. Modal *모달

기존에 열려있는 브라우저위에 레이어를 까는 것

원래 브라우저와 종속적인 관계

브라우저 옵션과 관계없이 띄울 수 있음

 

17. Pop-up *팝업

기존에 열려있는 브라우저 페이지 위에 또 다른 페이지를 띄우는 것

원래 브라우저와 독립된 관계

옵셥으로 열리지 않게 강제 할 수 있음

 

모달과 팝업.. 비슷한듯 다르다

요즘은 대부분 모달을 사용하는 추세라고 함!

 

18. Alert *알럿

사용자에게 주의를 주거나 알림을 주는 경우 사용

알럿은 버튼이 있다 (확인/나가기/네/아니요/취소 등)

cf - 저장하시겠습니까? 네/아니오

 

19. Toast *토스트

토스트기에서 식빵이 뿅! 튀어나오는 것에서 따온 용어

토스트는 버튼이 없다. 사용자가 버튼을 눌러주지 않아도 시간이 지나면 알아서 사라진다

cf - 결제가 완료되었습니다

 

20. Pagination *페이지네이션

정보가 너무 많을때 페이지를 구분해주는것

쿠팡

 

21. 무한스크롤

페이지네이션 하지 않고 무한 스크롤 할 수 있는것

*트위터

 

22. GNB

Global Navigation Bar

 

23. Prototype *프로토타입

아이디어나 디자인, 기능 등을 시각적 또는 동작적으로 구현한 초기버전

제품의 컨셉을 시험하고 피드백 수집을 위해 사용

일반적으로 개발 초기단계에 활용

디자인 컨셉을 검증하고 사용자의 요구사항을 이해하고 문제 해결하는데에 도움

완전한 제품이 아니며 시간과 비용을 최소화하고 피드백을 수용하는데에 초점

 

23. MVP *Minimum Viable Product

최소 기능 제품. (핵심기능)

아이디어를 검증하고 기능을 테스트하고 시장적합성을 확인

최소한의 특징을 갖추어 시장에 출시할 수 있는 상태

좋은 MVP는 적은 기능을 가지고 있되, 핵심기능은 완전히 동작해야함

 

24. AB test

임의로 나눠진 집단에게 서로 다른 UI/UX를 제시하고, 어떤 집단이 더 높은 성과를 보이는지 정량적으로 평가

대부분의 IT기업이 의사결정 도구로 활용함

목표설정>가설수립>실험설계 및 진행>결과검증 의 단계를 거침

 

25. User Journey map *유저저니 맵

서비스를 이용하면서 겪는 과정을 단계적으로 시각화 한 것

그 과정에서 소요되는 시간, 목표, 감정, 페인포인트를 단계별로 표현

 

26. Persona *페르소나

대상 고객을 나타내는 가상의 인물

사용자를 개인화함으로써 사용자를 실제로 시각화 하는데 도움

구체적으로 설정하는것이 좋음

 

27. 플로우 차트

특정 기능, 서비스 플로우의 흐름을 순서도나 기호를 사용해 도식적으로 표현한 다이어그램

 

28. CTA (Call To Action)

행동유도 버튼

눈에 띄어야 함

cf - 시작하기, 지금 상담 신청하기

 

29. Affordance

디자이너의 의도대로 사용자의 행동을 유도하는것을 의미

사용자가 직관적으로 어떻게 사용해야하는지 안다 > Affordance 가 좋다

cf - 밀어서 잠금 해제

옛날 아이폰 잠금화면

 

30. Floating button *플로팅 버튼

주로 모바일에서 사용되는 우측 하단에 둥둥 떠있는 버튼

cf - 챗봇