UX/UI 디자인 기초 - 부트캠프 1일차 강의노트 및 리뷰

 

 

#1. 강의 기록

실시간 강의를 들으며 결국 중요한 것은 문제의식을 갖는 것이라는 생각이 들었다.

어떠한 문제를 발견하는 것부터가 디자인의 시작이 아닐까?

• 예술과 디자인의 차이
  • 예술 : 보기 좋게 만드는 것
  • 디자인 : 솔루션 제공
• 디자이너의 역할 변화
  • 1920 - 1970 : 제품을 어떻게 만들까? - 제품 설계자, 제품의 외형/기능 설계
  • 1970 - 1990 : 브랜드나 제품이 어떤 가치와 이미지를 가져야 할까? - 디자인 경영 시작, 제품/브랜드/기업이미지/CI,bI시스템
  • 1990 - 2010 : 사용자가 쉽게 앱이나 서비스를 이용하려면 어떻게 해야 할까? - 화면 설계, 사용 흐름, 서비스 블루프린트, 고객여정 등
  • 2010 - 현재 : 온라인, 오프라인, 가상경험, 서비스 전체를 어떻게 연결할 수 있을까? - 앱, 웹, 물리공간, 서비스 프로세스, 공공정책, 메타버스
• 현재는 서비스 경험 전체를 통합적으로 디자인하고 있어
• 심미적 디자인 vs. 문제해결 디자인
  • 심미적 디자인 : 시각적인 기교나 심미성 중심의 디자인, 보기 좋은 디자인
    • 색상, 균형, 비례 등 시각적 요소 활용해 고객의 호감 획득
    • 감성적 만족과 첫인상을 결정짓는 시각적 완성도에 집중
  • 문제해결 디자인 : 문제 정의와 해결방안 도출 설계와 전략 포함
    • 사용자 경험 분석, 불편함 해결, 니즈 충족 → 솔루션 설계
    • 데이터와 리서치 기반
• 프로덕트디자이너는 문제해결 디자인을 더 중점적으로 다룸(but, 심미성도 중요해)
  • 심미성이 좋은 제품이 기능이 좋다고 인식하는 경향이 있기 때문에 심미성을 무시할 수 없음
• 요약
  • 디자인은 나를 표현하는 것이 아니라 문제를 해결하는 것
  • 디자인의 역할은 총체적 경험(DX) 설계로 진화
  • 프로덕트 디자이너는 심미성보단 전략적 사고에 집중하여 가치 창출
• 문제해결 디자인 사례
  • 공간/환경
    • 도로 위의 주행 유도선 - 도입 후 교차로 교통사고가 약 27% 감소
    • 바닥 신호등 - 스마트폰 보며 고개 숙이고 있는 사람들의 행태적 특징 분석해 시선이 머무는 바닥에 신호등 설치
    • 공간 디자인 - Wayfinding(길찾기), 마트, 병원, 놀이동산 내 이용경험
  • 제품
    • 다이슨의 날개 없는 선풍기 - 아이들의 손가락 사고 위험을 줄이기 위해 위험 요소인 날개 제거
  • 시니어디자인
    • 큰 글씨 ATM - GUI 솔루션 사례, 시니어 맞춤 디지털 화면, 포용적 디자인
  • 앱 서비스
    • 쿠팡 - 원클릭 주문, 토스 - 송금 절차 간소화, 캐치테이블 - 원격 웨이팅
  • 사용자의 실제 문제와 불편을 해결하기 위한 솔루션 제공
• 실습 관련
  • 바로 피그마나 PPT에서 작업하기보다는 종이 등에서 먼저 그려보는 것이 좋음

---

#2. 과제

1. 테드 강연 영상 시청 후 리뷰 (https://www.youtube.com/watch?v=YTRIeWI0EGQ)

해당 과제를 수행할 때는 릴리스 AI를 활용하여 스크립트를 확인했다.

릴리스 AI는 URL을 입력하거나 파일을 업로드하면 자료를 정리해주는데, 유튜브 영상의 스크립트를 제공하거나 내용을 요약하고 AI와 영상에 대해 대화를 나눌 수 있는 서비스를 제공한다. 이외에도 플래시카드, 교재, 대화노트 등 제공한 자료 내용을 기반으로 한 다양한 형태의 내용물을 확인할 수 있다.

한글로 번역된 전체 스크립트를 빠르게 확인하고 싶어 찾은 AI서비스인데, 여러모로 유용하게 사용할 수 있을 것 같다. 특히 무료로 사용 가능하며, 추가 지불 없이 꽤 다양한 기능을 사용할 수 있다.

- 링크 : https://lilys.ai/

1) 영상 내용 요약

• 데이터는 사용자의 행위의 측정이자 표현이다.
• 데이터의 그 자체에 매몰되기보다 사용자의 경험을 이해하고 행위를 부각하는 도구로 활용해야 한다.
• 디자이너는 데이터와 디자인이라는 두 가지 도구를 활용해 사용자 경험을 설계해야 한다.
  • 핵심 질문
    • 사람들이 제품을 통해 달성하고자 하는 것은?
    • 우리는 그 경험을 얼마나 잘 전달하고 있나?
• 정교한 개인 데이터 수집이 가능하기에 앞으로 개인화된 서비스 경험이 중요해질 것이다.
• 올바른 질문을 던지고, 데이터를 활용해 서비스를 개선하는 것이 앞으로 디자이너의 임무

2) 영상 내용 정리

• 디지털에선 사용자 경험 전과정에서의 데이터를 더욱 정교하고 자세히 수집할 수 있다.
• 데이터는 사람들이 제품을 어떻게 사용하는지에 대한 정보를 제공하며 이를 고객 직관을 다듬고 정교화하는 데에 활용할 수 있다.
• 데이터의 본질은 실제 사람들이 현실 세계에서 제품을 사용하는 행위의 표현이자 측정치
• 데이터는 인간의 행동으로부터 우리를 추상화하는 것이 아니라 그 행동을 부각시키는 도구로 사용되어야 한다. → 데이터 그 자체에 매몰되기보다는 도구로 활용해야 한다
• → 수치 뒤에 숨겨진 ‘사람들의 실제 경험’을 이해하기 위한 도구로 삼아야 한다.
• 디자이너의 핵심 질문 두 가지
  • 사람들이 제품을 사용할 때 달성하고자 하는 것은 무엇인가?
  • 우리는 그 경험을 얼마나 잘 전달하고 있는가?
• 디자이너의 역할 : 올바른 질문을 던지고, 데이터를 취해 결과를 측정하고, 데이터의 미묘한 차이를 이해해야 한다.
• 데이터와 디자인은 사람들을 위한 경험을 만드는 데 사용되는 두 가지 도구임을 기억할 것
• 스포티파이 사례
  • 다크모드 도입
    • 스포티파이의 기존 인터페이스는 라이트/다크 모드가 혼재되어 일관성이 부족
    • 사용자는 각 모드에 따라 각기 다른 경험을 하고 다른 감상을 느낌
    • 디자이너는 시각 자료와 콘텐츠를 강조하는 어두운 경험이 사용자 참여를 높이고 사용자가 원하는 음악을 더 쉽게 찾도록 도울 것이라는 가설을 세움
    • a/b테스트 실행
      • 갑자기 모두의 인터페이스를 어둡게 전환하는 것은 사용자에게 큰 변화를 요구하는 큰 위험
      • so, 전체 사용자의 1~5%에게 새로운 어두운 경험을 제공하고 나머지 사용자는 기존의 밝은 경험을 유지하도록 설정하여 새로운 디자인을 실제 세상에서 테스트
      • 테스트 결과 새로운 디자인을 사용하는 사람들이 기존 밝은 인터페이스를 사용하는 사람들과 동일하거나 더 많은 음악을 청취
      • 사용자 피드백(설문조사)에서 사용자들은 새로운 디자인이 음악을 더 잘 보여주고 콘텐츠를 전면에 내세우며, 더 폭넓은 범위의 음악을 제공한다고 느꼈다.
  • 재생 버튼
    • 커버아트의 재생버튼 필요성에 대한 논쟁
    • 일부는 사용자가 명시적인 클릭 유도가 있어야 하며 사용자 기반이 덜 정교할 경우 시각적 단서가 중요하다고 주장
    • 일부는 버튼은 인터페이스를 어지럽히는 불필요한 버튼이며 음악을 보여주는 원칙에 위배된다고 주장
    • 두 디자인 비교 테스트 결과 버튼이 없는 그룹이 반대 그룹보다 더 많은 음악을 재생
  • 제품의 핵심이 음악이라면 사소해 보이는 디테일도 경험의 기반이 될 수 있다.
  • 두 사례에서 데이터는 디자이너에게 많은 것을 알려주었지만, 한편으로 논쟁과 아이디어 자체는 데이터에서 시작되지 않았다.
  → 서비스 개선을 위한 문제를 발견하기 위해선 데이터만 들여다봐서는 안 되지만, 데이터는 문제 해결을 위한 도구로 활용할 수 있다.
• → 한 걸음 물러서서 데이터 패턴을 살펴보면, 디자인 원칙을 추출할 수 있다.
• 디지털세계에서는 물리적 세계보다 더 정밀하고 정확하게 사용자의 경험 데이터를 수집할 수 있다.
• 사용자 개개인으로부터 자세한 데이터를 수집할 수 있기에 경험을 개인화할 수 있는 잠재력이 크다.
• 디자이너의 임무는 데이터의 힘을 활용하고 증폭하는 것이다.

3) 느낀점

• 데이터는 직관을 대체하는 것이 아니라, 직관을 검증하고 다듬는 도구라는 점을 깨달았다. 스포티파이 사례를 보며, 디자인의 근거가 ‘감’이 아닌 ‘데이터’일 때 디자인이 설득력을 얻음을 확인할 수 있었다.
• 사용자 개인 데이터의 수집도 가능하기 때문에 앞으로는 각 서비스 개인화를 위한 시도가 많이 이루어질 것이다. 디자이너는 어떻게 하면 데이터를 활용해서 각 개인의 서비스 경험을 향상할 수 있을지에 대해 고민해야 하는 시대가 도래했다.
• 단순히 보기 좋은 디자인도 중요하지만, 서비스 개선을 위해 어떤 데이터가 필요하고 어떤 데이터를 활용할지 데이터를 선별하고 올바르게 분석하는 능력이 앞으로 디자이너에게 있어 핵심 역략이 될 것이다.
• 문제 해결을 위한 아이디어 자체는 데이터에서 시작되지 않을 수 있지 않다. 숫자에 매몰되기보다는, 올바른 질문을 던지고 데이터 뒤의 맥락을 읽어내는 것이 중요하다.

 

2. UX 사례 찾기

1) UX가 좋은 사례 찾기

• 서비스 : 스포티파이 - 크로스페이드&오토믹스
• 상황
  • 사용자가 운동, 운전, 파티 등 음악이 끊기지 않고 재생되기를 원함
• 좋은점 분석
  • 곡이 끝나기 전 다음 곡을 겹쳐 재생하여 곡 사이의 공백을 없애는 크로스페이드 기능과 단순 이어 붙이기가 아닌 곡의 비트에 맞춰 자연스럽게 다음 곡으로 넘어가는 오토믹스 기능을 제공함
  • 이를 통해 사용자는 음악을 지연 없이 듣게 되며 끊김 없이 몰입하는 경험을 할 수 있음.

2) UX가 불편한, 안좋았던 사례 찾기

• 서비스 : 왓챠 웹버전 - 로그인 랜딩페이지
• 상황
  • 왓챠는 영화, 드라마, 웹툰 등 다양한 콘텐츠를 볼 수 있는 OTT 플랫폼.
  • 정기구독 시 볼 수 있는 콘텐츠와 개별 구매해야 볼 수 있는 콘텐츠가 있음.
  • 월 정기 구독권을 결제한 사용자가 구독 혜택을 이용하기 위해 웹사이트에 로그인함.
• 문제점 분석
  • 구독 여부와 관계 없이 로그인 직후 첫 화면(랜딩 페이지)이 구독권으로 볼 수 없고 추가 결제가 필요한 개별 구매 탭으로 설정되어 있음.
  • 이미 비용을 지불한 구독자는 추가 비용 없이 다양한 콘텐츠를 즐길 것을 기대하고 왓챠에 접속하게 됨
  • 개별 구매 콘텐츠를 먼저 보여줌으로써 사용자는 응당 받아야 하는 혜택을 받지 못한다는 괴리감을 느끼게 되며, 더 나아가 이미 비용을 지불했는데 추가로 비용을 지불해야 하는 데에 대한 배신감과 저항감을 느끼게 됨.
  • 사용자가 본인의 구독 혜택을 누리기 위해서는 로그인 후 매번 구독탭을 직접 눌러야 하는 불필요한 과정이 발생함.

3) 2)에 찾은 문제를 어떻게 개선할지 개선점 찾기

• 지금처럼 개별 구매 탭과 구독 탭을 분리하되, 구독 회원이 로그인 한 경우엔 구독탭이 기본 홈 화면으로 보이도록 개선
• 피드백 : 문제점 개선을 위해 GUI 디자인도 생각해볼 것
  • GUI : ‘Graphical User Interface’의 약자로, 사용자가 텍스트 명령 대신 아이콘, 버튼, 창, 메뉴 같은 그래픽 요소를 이용해 컴퓨터나 앱을 조작하는 방식의 인터페이스를

 

3. 과제2 전체 피드백

• 읽는 사람의 입장에서 내용을 작성하는 것도 ux의 기본
• 사용자의 관점뿐만 아니라 제공자(사업자)의 입장에서도 생각해볼 것
• 사용자의 멘탈모델을 파악하는 것이 중요해.
• 스케치 → 생성형 ai를 통해 솔루션 이미지로 구현해보기
• 과제에서 해지 과정이 복잡해서 불편했다는 의견이 많이 나옴 → 어떻게 하면 해지를 막을 수 있을지 생각해보기
• 사용자의 멘탈모델* 
  • 사용자가 어떤 상황이나 시스템을 이해하고 해결하는 데 사용하는 사고의 모형
• 레퍼런스 찾아보는 것도 좋은 접근방식
• 앱을 사용할 때 피드백이 어떤 식으로 주고 있는지 평소에 관찰하기
• 개선안 제시
• 사용자의 데이터가 없을 때 콜드 스타트*
  • 서비스가 처음 시작되거나, 사용자/데이터가 거의 없는 상태에서 제대로 된 UX를 제공하기 어려운 상황
• 내 솔루션을 기반으로 어떤 데이터를 찾아보면 좋을지 나열 → 구글링 또는 AI 활용(AI는 팩트체크 유념)