백색소은 앱의 비네트 예제

민수는 오늘 기말 시험 준비를 위해 강의 내용을 정리하려고 근처 카페로 나왔다. 집보다 외부 환경에서 공부할 때 집중이 잘 되는 편이라 카페를 자주 찾는 편이다. 조용한 자리를 찾아 앉아 노트북을 꺼내고 이어폰을 연결한 후 온라인 강의를 재생하기 시작했다. 하지만, 주변에서 사람들이 대화하는 소리와 카페 출입문이 열리고 닫히는 소리에 자꾸 주의가 분산된다. 이에 지민은 잠시 강의를 멈추고, 백색 소음 앱을 켜서 소음을 차단하기로 한다. 이어폰을 통해 들려오는 백색 소음 덕분에 지민은 다시 집중할 수 있게 되었고, 강의를 재생하며 필기를 이어갔다. 방해 요소가 사라지자, 민수는 안도감을 느끼며 강의 내용을 더 깊이 이해할 수 있게 되었다.

Q비네트에서 가장 중요한 요소는 무엇인가요?
사용자가 어떤 제품을 사용하는지
사용자가 느끼는 감정과 행동
사용자가 앉아 있는 카페의 위치
사용자가 사용하는 이어폰의 브랜드

Q이 비네트 예제가 담고 있는 정보 중 중요한 부분은 무엇인가요?
사용자가 카페에서 느끼는 집중력 방해 요소와 극복 방법
사용자가 카페에서 자주 주문하는 메뉴
사용자가 카페에 얼마나 자주 방문하는
지
사용자가 사용하는 앱의 데이터 요금

Q비네트 예제에 포함된 “민수가 백색 소음 앱을 켜는 장면”의 역할은 무엇인가요?
백색 소음 앱의 다양한 기능을 설명하기 위함
사용자가 백색 소음을 선호하는 이유를 설명하기 위함
사용자가 카페에 있는 사람들에게 앱을 추천하기 위함
사용자가 소음을 극복하기 위해 취하는 행동을 보여주기 위함

Q 비네트의 특징을 가장 잘 설명하는 문장은 무엇인가요?
비네트는 사용자의 전체 하루 일과를 기록하는 방식이다.
비네트는 사용자가 좋아하는 브랜드와 제품을 나열한다.
비네트는 사용자의 감정, 상황, 행동을 통해 특정 경험을 간단히 보여준다.
비네트는 사용자가 제품을 사용할 때의 기술적인 문제를 설명한다.

비네트

포도덩굴을 의미하는 vigne에서 유래.
사용자가 특정 상황에서 어떻게 행동하고 반응하는지를 간단한 시나리오 형태로 묘사
목적: 구제척 이해 사용자 경험
특징: 감정과 상황 강조
구성요소: 사용자(퍼스나_페르소나), 상황 또는 맥락, 목표와 동기, 구체적인 행동, 감정이나 반응

비네트 실습

나
지훈은 새벽 2시, 불안한 마음으로 침대에서 몸을 뒤척였다. 중요한 발표를 앞두고 피곤한 몸을 이끌고 잠을 청하려 했지만, 머릿속은 발표로인한 걱정들로 가득 차 잠이 오지 않았다. '내일 중요한 발표가 있는데, 오늘 잠 못 자면 어떻게 하지?' 긴장감이 더해져 핸드폰으로 시간을 여러 번 확인하며 불안해했다.
결국, 그는 스마트폰을 꺼내 수면 음악 앱을 열었다. ‘잔잔한 빗소리’ 트랙을 선택하고, 수면에 불편하지 않을 정도로 소리를 키우기 시작했다. 처음에는 음악이 그저 배경음처럼 들렸지만, 시간이 지나면서 부드러운 빗소리와 편안한 선율이 그의 긴장을 풀어주기 시작했다. '이거, 되네...' 지훈은 점차 몸의 힘이 빠지고, 고요한 빗소리 속에서 조금씩 편안해지기 시작했다.
그는 눈을 감고 천천히 숨을 들이쉬었다. 빗소리는 그를 더욱 차분하게 만들어주었고, 시간이 흐를수록 마음속의 불안감도 가라앉았다. 몇 분이 지나자 지훈은 어느새 깊은 잠에 빠져들었고, 음악은 계속해서 빗소리와 함께 그의 귀를 감싸며, 단잠 속으로 그를 이끌었다.

비네트

비네트는 많이 만들수록 좋다. 사용자와 상황을 Most Normal Least로 나누어 둘 다 Most인 즉 가장 많은 사용자와 상황에 해당되는 비네트를 제작하는 것이 좋다. Least와 Most가 겹치면 세모정도! 그 외에 Least는 x이다.

유저 스토리 보드

3컷으로 주로 만드는데 사용 전(현재 상태), 사용 중, 사용 후. 이 원칙을 잘 지켜야한다! 예를들면 사용전 사용후 사용후처럼 되면 안된다. ex) 아이폰을 개봉-카메라가 좋아졌어-야간촬영하기 좋겠다. 가 아니라 아이폰을 개봉-카메라를 켜보니 카메라가 더 선명하게 보여서 이전에 겪던 화질 문제가 해결했다-앞으로 과제걱정이 적어졌넹
주로 흑백으로 그린다. 컬러가 들어가면 불필요한 시각적 자극이 많아진다.

---

Q비네트에 비해 유저스토리보드가 가진 강점에 대해 설명한 것 중 옳지 않은 것을 고르시오.
유저스토리보드는 사용자가 겪는 상황을 시각적으로 표현해, 이야기 흐름과 감정을 한눈에 이해하기 쉽게 해준다.
유저스토리보드는 각 단계별로 사용자의 경험과 감정 변화를 시각적으로 나타내어 이해도를 높여준다.
유저스토리보드는 특정 상황에서 사용자의 행동과 의사결정 과정을 쉽게 파악할 수 있도록 도와준다.
유저스토리보드는 구체적인 텍스트 설명을 통해 모든 장면을 명확히 전달할 수 있어 비네트보다 정보 전달에 강하다.

Q 다음 중 비네트를 사용하는 것이 더 적합한 경우로 옳은 것을 고르시오.
사용자가 서비스 이용 중 겪는 여러 단계를 순서에 따라 이해시키고자 할 때
특정 상황에서 사용자의 감정, 목표, 행동을 짧고 구체적으로 묘사하여 여러 사용자 유형을 파악하고자 할 때
사용자가 앱을 사용하면서 느끼는 감정 변화와 맥락을 전달하고자 할 때
서비스의 사용 과정을 단계별로 나누어 각 과정에서 사용자가 하는 행동을 보여주고자 할 때

Q 비네트와 유저스토리보드의 청자가 아닌 사람은?
기획자 본인
팀멤버
투자자 등 팀외 협력자
사용자

---

좋은 UX를 만들기 위해 기억하고 이해할 3가지
내가 사용자라는 착각 버리기
이 제품에서 어떤 경험(감정)을 느끼게 해주고 싶은가?를 질문하기-->기획 의도(Design)
실제 제품 UX 디자인을 위한 "재료"에 대해 이해하기

(기획)의도와 맥락
기획의도
고객상황-고객경험-고객
경쟁상황-차별화(USP Unique Special Process)-투자자
회사상황-기획서-나/동료
좋은 기획서에 반드시 포함되어야 하는 두가지: 기획 의도(비네트, 유저스토리보드를 사용), 맥락(의도를 가지게 된 이유. 실전 기획서를 히스토리로 관리함. AI로 기획서를 작성시키고 바로 프로토타입으로 가기도 한다.)

Storyboard Artist GPTs

다양한 기법들

브레인 스토밍, 브레인 라이팅, 더블다이아몬드 등..

스타트업 방식

혁신적인 아이디어와 혁신적이거나 적정 기술로 애자일 방식으로 빠르고 점증적으로 문제를 해결해나갑니다. 이 때, 우리가 쓰고 있는 틀이나 기법의 주객이 전도되는 것을 중요하다.

사용자 인터뷰 실습(내가 사용자라는 착각 버리기)

1:1(N) - 인터뷰 대상은 1명이어야 편향 없는 답변이 가능하다.
공식적이되 편안한 분위기여야 한다 - 절차를ㄹ 공식적으로 진행하고 수고비도 가능한 드려라
유도심문 금지 - 내 가설을 의견으로 검증받는 자리가 아니기에 아이디어를 직접 물어보지 말라
최근 경험을 물어보라 - 주말에 보통 뭐하세여?가 아니라 지난 토요일 일과를 간단히 말씀해달라
정해진 질문 순서대로 질문하지 말라 - 질문을 클리어하는게 목적이 아니다
근원 동기나 심리를 알려고 하라 - 사용자의 멘탈 모델, 근원적인 행동 동기를 통해 사용자가 정말로 원하는게 무엇인지 추적하라
인터뷰 결과에만 의존하지 마라 - 인터뷰 결과가 강력하더라도 제품 기획과 개발 과정에서 약간의 거리두기가 필요하다.

Q 1:1 인터뷰를 할 때 인터뷰이가 1명이 되어야 하는 이유는 무엇인가요?
인터뷰 시간이 짧아지기 위해
질문을 쉽게 하기 위해
여러 명이 있으면 편향된 답변이 생길 수 있기 때문에
기록이 쉬워서

Q 1:1 인터뷰를 진행할 때 유의할 점으로 옳은 것은 무엇인가요?
가능한 가볍고 편안하게 진행해야 한다
절차는 공식적으로 진행하고 수고비를 제공하는 것이 좋다
인터뷰 대상자에게 아이디어를 직접 묻는다
준비한 질문은 순서대로 진행한다

Q 인터뷰에서 유도 질문이 왜 좋지 않은가요?
인터뷰이의 편안한 분위기를 해칠 수 있어서
시간을 절약하지 못해서
인터뷰에 진지함이 떨어져서
결과가 편향되므로

Q 인터뷰에서 하지 말아야 할 질문 유형은 무엇인가요?
최근에 경험한 일에 대해 묻는 질문
인터뷰 대상자의 의견을 확인하는 질문
사용자가 원하는 기능에 대해 아이디어를 직접 묻는 질문
인터뷰이의 경험을 묻는 질문

Q 인터뷰 결과는 어떻게 활용하는 것이 좋은가요?
결과에만 의존하여 제품을 바로 개발한다
결과가 강력해도 기획 과정에서 약간의 거리를 둔다
모든 결과를 제품에 반영한다
결과를 기반으로 인터뷰 대상자에게 추가 질문을 계속한다

[과제?]질문리스트 만들기 해보자.

20개정도 만든 뒤, GPT에게 역활을 부여해서 유의미한 질문과 무의미한 질문을 구분할 수 있다.

근원적 동기 탐색

사용자 인터뷰의 내용을 바탕으로 근원적 동기를 유추하는 데에 GPT를 활용할 수 있다. 5-Whys를 적용하자.
다만 GPT는 예시를 보여주는 것이지 실제 우리가 타겟하는 유저의 진짜 근원 동기를 찾아주지는 못한다.

인터뷰 후 GPT에게 문제의 본질을 이해하고 창의적인 기획안을 도출해달라고 할 수 있다.

정리

GPT로 비네트 추출하기, 서술형으로 반영하기, 유저스토리보드 만들기, 유저스톹리보드 그리기, 인터뷰 질문리스트 만들기, 사용자 인터뷰 리허설, 근원적 동기 탐색, 인터뷰 결과 반영.

중간발표에서 GPT에게 교수님 역활로 지정하여 내 발표자료를 비판해보라고 말하면 좋다. 그리고 방안을 만들어달라고 하자.

인터뷰 결과를 기획에 반영할 때 거리두기 방법

진짜 필요와 표면적 요구 구분-근본적인 필요 파악
모든 피드백을 반영하지 않기-핵심기획방향과 일치하는 피드백만 반영
인터뷰 내용을 절대적 진리로 보지 않기-타깃 사용자 전체의 니즈 고려
데이터와 병합하여 해석-객관적 사용 데이터와 결합해 분석
'왜?'를 묻고 본질 파악-문제의 본질을 이해하고 창의적인 기획 도출

재료 이해하기

• 디자인
  Google Material Design(Design System_open sourse) --> 이게 쓰긴 쉽다 항상 별로
  Apple HIG(Human Interface Guidelines) --> 어려운데 항상 예쁘다

• 디자인 시스템의 목적
  Audience <- Digital Experiences <- Design System <- Brand

• 디자인 파운데이션
  타이포그래피, 컬러 시스템, 그리드 및 간격, 아이콘, 모션

작은 의미의 재료 - 컴포넌트(Components) Material Design을 중심으로 한

90개의 컴포넌트 이름을 달달 외워야한다.
https://flutter.github.io/samples/web/material_3_demo/

• 스타트업의 실전 UX 및 서비스 기획
  역기획해서 그대로 베끼고 최소한의 수정 생각보다 굉장히 잘 작동한다.

[과제1] 사용자 이해하기 과제

중간발표의 아이디어에 관해 사용자 2명 이상을 인터뷰하고 과졍/결과 및 인터뷰 내용을 반영한 새로운 비네트, 유저스토리보드를 작성하라. 3.20 09:00까지 스레드 제출. pdf제출

[과제2] Flutterflow 과제

학생 라이센스 신청, https://www.youtube.com/playlist?list=PLsUp7t2vRqx9UE13G8Xod8F-m248iR0E3 7강(54m)까지 공부하고 직접 구현하고 프로젝트 링크 제출(색상 상관x. 6강부터 해도 과제는 가능. 그리고 3강 5강은 패스) 3.20 09시 까지. 2명이 pair로 과제하기로 한명이 배우고 알려주며 서로 습득!
ps. Branch기능 사용하면 링크 공유가 안되며

다음수업

실습용 UI 각자 구현 및 2명 Pair 코딩 예정.