🔎 UX/UI란?
UX(User Experience)
- 제품이나 서비스를 사용하는 사용자가 느끼는 전반적인 경험을 뜻함.
- 사용자 경험(서비스 이용 과정, 감정, 태도, 인식 등)의 모든 측면을 고려해 기획하고 구현하는 일
- 사용자의 요구사항과 행동을 고려하여 제품이나 서비스를 구성하는 것
- 사용자 경험을 분석하고 반영한 제품이나 서비스는 사용자 만족도와 충성도를 높일 수 있음.
UI(User Interface)
- 화면에 보여지는 인터페이스를 의미
- 사용자가 누르고 클릭하는 버튼, 텍스트, 이미지, 애니메이션 등의 시각적 요소로 사용자가 쉽게 찾고 따라할 수 있는 직관적인 디자인으로 구성
- GUI(Graphics User Interface)로 불리기도 함.
[미션1] UX/UI 용어 정리
UI용어
- 스피너(Spinner)
숫자 입력 컨트롤이며, 위아래 화살표 버튼을 사용하여 값을 조절하거나 필드에 직접 입력하여 추출
- 슬라이더(Slider)
입력 값이 제한되어 있음을 시각적으로 인지하고, 버튼을 밀고 당기며 값을 조절
- 입력 필드(Input Field)
키보드를 사용하여 직접 텍스트를 입력하는 곳(ex : 텍스트, 비밀번호, 날짜 등)
- 플레이스 홀더(Place holder)
값을 입력하기 전에 도움을 줄 수 있는 힌트를 Input박스 안에 표시(값을 입력하면 사라짐)
- 드롭다운 리스트(Drop-down List)
선택할 수 있는 여러 옵션 중 하나를 선택할 수 있도록 함. 드롭 다운 버튼을 클릭하거나 커서를 올리면 선택지가 펼쳐짐
- 콤보박스(Combo Box)
드롭다운 + 입력 필드의 기능을 결합한 형태
- 라디오 버튼(Radio Button)
선택/취소하기 위해 사용하는 버튼으로 하나만 선택할 수 있음.
- 체크박스(Checkbox)
여러 옵션 중 동시에 여러가지 항목을 선택할 때 사용
- 브레드크럼(Breadcrumbs)
사이트 이동 경로, 사용자가 현재 어떤 위치에 있는지 시각적으로 나타냄
- 토글 및 스위치(Toggle/swich)
특정 기능을 켜고 끌 때 사용
- 툴팁(Tool Tip)
부연 설명을 표시할 때 사용되며, 개체 위에 포인터를 올려놓았을 때 자동으로 표시
- 모달(Modal)
브라우저 위에 새로운 창이 아닌 레이어를 까는 것
- 팝업(Pop-up)
브라우저 페이지 위에 또 다른 브라우저 페이지를 띄우는 것
- 토스트 메시지(Toast Massage)
토스터기에서 식빵이 튀어오르는 것처럼 나오는 알림으로 버튼이 없으며, 시간이 지나면 사라지는 알림
- 알럿(Alert)
사용자에게 주의를 주거나 알림을 일방적으로 주는 경우에 사용. 예/아니오 등의 버튼 2개가 있다면 컨펌(Confirm), 텍스트를 입력받는 입력 필드가 있다면 프롬프트(Prompt)라고 함
- CTA(Call To Action)
사용자의 클릭을 통해 구매, 구독, 방문 등 원하는 행동을 하도록 유도하는 ‘행동유도버튼’을 의미
- 카드(Card)
이미지, 텍스트 등으로 구성하여 다양한 정보를 담는 직사각형 요소(한 눈에 확인할 수 있는 장점이 있음)
- 캐러셀(Carousel)
한 화면에서 두 개 이상의 여러 콘텐츠를 보여줄 때 사용. 주로 슬라이드 형태로 이미지나 영상이 순환하며 노출시키는 형태
- 디폴트(Default)
어떠한 컴포넌트의 기본 상태값을 말함. 유저가 아무 행도도 하지 않은 첫 화면에서 보여지는 상태
- 디스에이블(Disabled)
비활성화 상태를 의미, 입력창이라면 유저의 선택 값에 따라 입력이 필요없는 칸이 있을 때 디스에이블이 표현됨.
UX용어
- 네이티브 앱
안드로이드, iOS 등 각각 다른 모바일 운영 체제에 최적화되어 개발된 앱으로 흔히 플레이스토어/앱스토어에서 다운받을 수 있는 형태이며, 페이지가 레이어처럼 켜켜이 쌓이는 '스택'구조를 가지고 있어 사용성이 좋음.
- 웹 앱(반응형)
모바일에서 사용하기 적합한 형태로 만든 웹사이트로 외부 유입과 공유가 쉽고, URL로도 접근이 가능해 접근성이 좋음. 하지만 스택이 불가능한 '라우팅 구조'를 가지고 있어 새 탭으로 전환되는 형태.
- 하이브리드 앱
네이티브 앱과 웹 앱의 장점을 결합한 앱으로 네이티브 앱의 사용성과 웹 앱의 접근성을 갖추고 있음. 웹 런칭과 앱 다운로드가 가능하며, 기능적인(블루투스, QR 등) 제한도 없음. 하지만 스택이 불가한 구조는 UX적으로 사용성이 떨어지며 큰 이탈률을 야기함.
- IA(Information Architecture, 정보구조)
정보구조도로, 서비스의 전체 그림과 흐름을 파악하고 결정할 때 쓰임.
- 배포
준비 완료된 서비스를 사용자에게 제공하는 단계
[미션2] 스타터 노트 작성
✳️ 내일배움캠프 UX/UI 트랙을 신청한 이유
- 내가 UX/UI 코스에 참여한 계기는 무엇인가요?
- 커리어 및 직무의 범위를 넓히기 위해
- 자기계발을 위해
- 성향에 맞는 직무를 찾기 위해
- 내가 이해한 UX/UI 디자이너는 어떤 역할을 하는 사람인가요?
- 제품 및 서비스를 사용하는 사용자 및 사용자 니즈에 초점을 두고 분석이나 기획을 하거나 사용자를 위한 디자인을 설계하는 사람.
- UX/UI 디자이너의 역할과 비슷한 경험을 해 보았나요? 어떤 점이 유사하다고 생각했나요?
- 웹∙편집∙광고디자이너로 일하면서 각 프로젝트에 해당하는 고객 맞춤 기획과 분석을 통해 나온 디자인 경험과 팀을 리드하며 협업한 경험이 있었고 이 중 고객 맞춤, 고객에 대한 니즈를 분석하는 부분과 팀프로젝트 협업이 유사할 것 같음.
- UX/UI 디자이너의 역할을 수행하는 데에 있어 나의 강점과 연관된 부분은 무엇이라고 생각하나요? 혹은 보완, 개선하고 싶은 개인 역량이 있나요 ?
- 강점으로는 뭐든 가리지 않고 다양한 방법 활용, 신선한 아이디어 및 센스 활용
- 완벽주의 성향을 개선하고 싶음
- 본 코스 수료 후, 어떤 UX/UI 디자이너로 성장하고 싶나요?
- 만능 디자이너이지만 PM 및 기획자로도 성장하고 싶음.
- 그 외에 UX/UI 코스에 기대하는 것이 있다면 자유롭게 작성해 주세요.
- 만족스러운 결과물(포폴) 및 다양한 스킬 습득
- 취업
