[정리] UX/UI/GUI 기본 개념과 UX 설계 프로세스

• UX: 경험하는 것에 포커싱 = 행동
  • 고객 경험이 좋다고해서 무조건적으로 비즈니스적 이득X
• UI: 보여지는 것에 포커싱 = 표현
  • CLI(Command-line Interface), CUI(Character User Interface), 대부분 GUI(Graphic User Interface)
• GUI: 심미적인 것에 포커싱
• UX를 어디까지 알아야 하는가?
  1. 디자인 패턴 이해: 가이드라인 숙지, 컨셉 이해 → GUI 피드백
  2. UX 리서치 실행/관리: ’어떤 결과를 도출할 것인가’ 인지, 리서치 결과 → 인사이트 도출
  3. 아이디어 프로토타입 설계: Lo-Fi, Mid-Fi 정도는 설계.
  • 반드시 시각적인 산출물? X, 유저 스토리, 스토리 보드 등을 작성해 제품 로드맵 공유
• UX 설계 프로세스
  1. 요구사항 분석 —> PM, 서비스 기획자, UX 리서처, UX 디자이너
  2. 기능 정의(Function) —> “
  3. 화면 설계(Wireframe/Storyboard, Low/Mid-fi Prototype) —> 서비스 기획자,UX 디자이너, 프로덕트(UX/UI) 디자이너
  4. 디자인(GUI Design, Hi-Fi Prototype) —> (G)UI 디자이너, 프로덕트 디자이너 : Hi-fi = 인터렉션+그래픽 디자인 (실제 개발 산출물에 가장 근접한 결과물)
• 읽기 자료 (web-design)

Web Page Design: A Comprehensive Guide | Adobe XD Ideas

---

UX 설계 시 기억해야 할 요소

• 이미지 : 적절한 위치에 적절한 이미지를 배치하는 것 (PM, 서비스 기획자), 화면설계서나 유저스토리 같은 문서를 통해 “사용자에게 어떤 경험을 주고 싶다” 설계 with 디자이너
  • 우버의 드라이버 트래킹
• 텍스트 : ex. 손실/혜택 홍보 문구를 어떤 사용자에게 어떻게 노출할 것인가 → 마케터/카피라이터/PM 등 다양한 직군의 사람들을 통해 작성될 수 있지만, 어떤 경로를 통하든 PM을 통해 고객에게 제공됨.
  • 토스 사례
  • CTA: 서비스의 목표를 달성하기 위해 사용자가 눌러야 하는 것
• 흐름 (=발견 지면의 확장): 콘텐츠의 콘텐츠, 댓글의 댓글 등 계속 이어지는 끝없는 흐름
• ★ 유저가 직접 발견의 지면을 확장하도록 만드는 것 (앱 사용 시간, 체류 시간을 늘리기 위한 방안)
• 마이크로 카피의 목적 #Useful #Clear #Concise #On Brand
  1. 사용자의 행동을 유도(동기 부여, 전환율 증대)하거나 가이드 제공
  2. 브랜딩 및 차별성 강화
  3. 사용자 행동에 따르는 문제를 미리 방지하며, 긍정적인 사용자 경험을 제공