[오늘의 목표]
오전(~14시까지)
- 디자인 카타 / TIL 댓글
- 강의 3,4강 실습 및 복습
오후(~19시까지)
- 강의 3,4강 실습 및 복습
- 특강(태길튜터님) 준비 및 참석
- 개인과제 진행하기
저녁(~21시까지)
- 개인과제 진행하기
- TIL 작성
오늘은 생각보다 일찍 눈이 떠져 9시 전에 데일리 스크럼을 작성함.
9시가 되자마자 디자인 카타를 정리하고 팀원들과 이야기 나눔.
어제 TIL 글 작성에 대한 꿀팁을 들어,
오늘은 어제 들었던 강의 1·2강 실습 내용을 정리하려고 함.
챕터 1 _ (실습)
1-1. UI 디자인의 개념
💬 질문 1. 홈 화면을 구성할 때, 가장 먼저 보여야 하는 정보는 뭘까?
→ 그리고 왜 그것이 가장 먼저여야 할까요?
Q. 홈 화면을 구성할 때, 가장 먼저 보여야 하는 정보는?
선정앱 : 인스타그램
- 사용자가 팔로우한 계정의 최신 피드 콘텐츠
Q. 왜 그것이 가장 먼저여야 할까?
: 사용자가 인스타그램을 여는 주된 목적이 콘텐츠 소비이기 때문에, 팔로우한 계정의 최신 피드를 홈 화면 최우선으로
노출하는 것이 먼저라고 생각함
💬 질문 2. 최근에 사용한 앱 중, 내가 가장 많이 누른 버튼은 뭐였지?
→ 그 버튼은 어디에 있었고, 어떤 모습으로 배치되어 있었나요?
Q. 최근에 사용한 앱 중, 내가 가장 많이 누른 버튼은?
선정앱 : 인스타그램
- 검색 버튼(돋보기 아이콘)
Q. 그 버튼은 어디에 있었고, 어떤 모습으로 배치되어 있었나요?
: 하단 탭 바에 고정된 검색 버튼으로, 항상 접근 가능한 위치와 직관적인 돋보기 아이콘을 통해 사용자의 탐색 행동을 빠르게
유도하도록 배치되어 있음
1-2. 사용자 행동 설계하기
💬 질문 1. 내가 사용 중인 앱을 보고, 사용자가 무엇을 하게 하려는지 찾아보세요.
예시) ‘원하는 옷을 찾고 구매하게’ 만들고 싶어요
‘원하는 지역의 스터디를 찾고 신청하게’ 만들고 싶어요
Q. 이 앱은 사용자가 무엇을 하게 만들고 싶을까?
선정앱 : 인스타그램
: 인스타그램은 사용자가 관심 있는 콘텐츠를 끊임없이 탐색하고 반응하며, 개인화된 콘텐츠 소비 흐름 속에 오래 머물도록 유도
💬 질문 2. 그 행동은 어떤 단계들로 구성되나요?
단계별 흐름을 간단히 리스트업해보세요.
단계는 자유롭게 구성해 보세요!
사용자 행동 단계 흐름
1. 앱 실행
→ 개인화된 홈 피드 또는 이전 사용 맥락 화면을 확인
2. 검색 버튼을 눌러 탐색 진입
→ 관심 있는 주제·이미지 중심의 게시물 그리드를 확인
3. 콘텐츠를 스크롤하며 탐색
→ 이미지·릴스를 빠르게 훑으며 취향에 맞는 콘텐츠를 발견
4. 관심 콘텐츠에 반응
→ 좋아요, 저장, 댓글 등의 행동을 선택적으로 수행
5. 관련 콘텐츠로 확장 탐색
→ 유사한 게시물·계정·해시태그를 연속적으로 확인
6. 체류를 유지하며 소비를 반복
→ 추가 스크롤 또는 다른 콘텐츠 탭으로 이동
1-3. UI 설계와 북극성 지표
💬 질문 1. 내가 설계 중인 제품에서, 사용자는 어떤 목적을 가지고 있을까요?
→ 가장 대표적인 사용 목적을 한 줄로 써보세요
Q. 내가 설계 중인 제품에서, 사용자는 어떤 목적을 가지고 있을까요?
제품(과제용) - 중고거래 앱
사용 목적
: 상품 정보를 확인한 뒤 판매자에게 거래를 요청하고 대화를 시작하기 위해 이 제품을 사용하는 목적을 가짐
* 마침 개인과제 발제 듣고 진행하는데 강의 과제에 하면 좋겠다 싶었음.
💬 질문 2. 그 목적을 수치로 표현하면 어떤 지표가 될까요?
→ 그 수치는 어떻게 측정할 수 있을지도 같이 생각해보세요
Q. 그 목적을 수치로 표현하면 어떤 지표가 될까요?
상품 상세 페이지 대비 ‘대화 시작’ 전환율
- 사용자가 상품 상세 페이지 진입 시 → 1회 카운트
- 사용자가 ‘거래 요청’ 또는 ‘채팅 시작’ 버튼 클릭 시 → 이벤트 기록
- 해당 이벤트가 발생하면 대화 시작으로 집계
1-4. 인게이지먼트 게임
💬 질문 1. 내가 설계하는 제품은 어떤 게임에 가장 가까운가요?
어텐션 / 트랜잭션 / 프로덕티비티 중 선택해보세요
Q. 내가 설계하는 제품은 어떤 게임에 가장 가까운가요?
: 트랜잭션 게임 (Transaction Game)
💬 질문 2. 그 게임에 맞춰 사용자의 핵심 행동 흐름을 3단계로 나눠본다면 어떻게 될까요?
→ 예: 피드 탐색 → 콘텐츠 클릭 → 계속 탐색 (어텐션 게임)
Q. 그 게임에 맞춰 사용자의 핵심 행동 흐름을 3단계로 나눠본다면 어떻게 될까요?
: 상품 탐색 → 상품 상세 확인 → 거래 요청 및 대화 시작
+
1️⃣ 상품 탐색
- 사용자는 홈 또는 검색을 통해 거래 가능한 상품을 빠르게 찾기
이 단계의 목적: 👉 관심 가질 만한 상품을 발견하는 것
2️⃣ 상품 상세 확인
- 사용자는 가격, 상태, 설명, 위치 등을 확인하며 거래할 가치가 있는지 판단
이 단계의 목적: 👉 거래 요청을 해도 되겠다는 확신을 얻는 것
3️⃣ 거래 요청 및 대화 시작
- 사용자는 ‘거래 요청’ 또는 ‘채팅 시작’ 버튼을 눌러 판매자와의 대화를 시작
이 단계의 목적: 👉 거래를 실제로 시작하는 행동을 완료하는 것
1-5. 사용자 행동 유도와 흐름
💬 질문 1. 당신이 설계 중인 서비스의 최종 목적은 무엇인가요?
→ 그 목적을 달성하기 위해 사용자가 따라야 할 주요 행동 흐름(3~5단계)을 써보세요.
Q. 당신이 설계 중인 서비스의 최종 목적은 무엇인가요?
: 사용자가 관심 있는 상품에 대해 판매자와 거래를 시작할 수 있도록, 대화 연결을 성공적으로 만들어내는 것
** 주요 행동 흐름 (총 4단계 작성해봄) **
1️⃣ 상품 탐색
- 사용자는 홈 또는 검색을 통해 거래 가능한 상품을 탐색
2️⃣ 상품 상세 확인
- 사용자는 가격, 상태, 설명 등을 확인하며 거래 가능성을 판단
3️⃣ 거래 요청
- 사용자는 상품 상세 화면에서 거래 요청 또는 채팅 시작을 선택
4️⃣ 대화 시작
- 사용자는 판매자와의 대화를 통해 실제 거래를 시작
💬 질문 2. 각 단계에서 사용자는 어떤 ‘고민’이나 ‘결정’을 할까요?
→ 그 고민을 덜어줄 수 있는 UI 요소나 정보는 무엇인가요?
Q. 각 단계에서 사용자는 어떤 ‘고민’이나 ‘결정’을 할까요?
1️⃣ 상품 탐색 단계
▼ 사용자의 고민 / 결정
• “지금 이 상품이 내가 찾는 조건에 맞을까?”
• “아직 거래 가능한 상품일까?”
• “굳이 눌러서 자세히 볼 가치가 있을까?”
▼ 고민을 덜어주는 UI 요소 / 정보
• 가격, 상품 상태, 위치 등 핵심 정보의 카드 요약 노출
• ‘거래 가능’, ‘예약 중’ 등 상태 배지
• 최신순 / 거리순 / 가격순 등 정렬·필터 기능
• 썸네일 이미지 강조
👉 결정: 클릭할 상품을 빠르게 결정하게 돕기
2️⃣ 상품 탐색 단계
▼ 사용자의 고민 / 결정
• “이 가격이 합리적인가?”
• “상품 상태가 설명과 다르진 않을까?”
• “이 판매자는 믿을 수 있을까?”
• “지금 거래 요청을 보내도 될까?”
▼ 고민을 덜어주는 UI 요소 / 정보
• 상품 상태, 사용감, 하자 여부 등 명확한 설명
• 실제 촬영 이미지 다수 제공
• 판매자의 거래 이력, 응답률, 매너 점수
• 직거래 / 택배 가능 여부, 위치 정보
• ‘거래 요청’ 버튼의 명확한 노출
👉 결정: 거래 요청을 해도 되겠다는 ‘확신’을 주기
3️⃣ 거래 요청 단계
▼ 사용자의 고민 / 결정
• “어떤 메시지를 보내야 하지?”
• “괜히 번거롭게 하는 건 아닐까?”
• “지금 요청 보내도 괜찮을까?”
▼ 고민을 덜어주는 UI 요소 / 정보
• ‘안녕하세요, 아직 거래 가능할까요?’ 같은 기본 메시지 템플릿
• 거래 요청 버튼 클릭 시 행동 결과가 명확한 안내
• 판매자의 최근 접속 시간 / 응답 평균 시간 표시
👉 결정: 행동에 대한 심리적 부담 최소화
4️⃣ 대화 시작 단계
▼ 사용자의 고민 / 결정
• “이 사람이 실제로 거래할 의사가 있을까?”
• “어떻게 대화를 이어가야 하지?”
• “다음 단계는 뭘 하면 될까?”
▼ 고민을 덜어주는 UI 요소 / 정보
• 상품 정보가 상단에 고정된 채팅 화면
• 약속 잡기 / 가격 제안 등 빠른 액션 버튼
• 거래 진행 상태 안내 (대화 중 / 예약 / 거래 완료 등)
👉 결정: 대화가 거래로 자연스럽게 이어지도록 지원
1-6. 사용자 문제 정의 이해
💬 질문 1. 최근 당신이 불편하다고 느꼈던 앱이나 서비스는 무엇인가요?
→ 그 불편함을 느낀 상황과 행동의 흐름을 단계별로 써보세요.
Q. 최근 당신이 불편하다고 느꼈던 앱이나 서비스는 무엇인가요?
최근 불편했던 앱/서비스
: 테무(Temu), 알리익스프레스(AliExpress)
불편 상황
: 특정 상품의 가격과 후기를 빠르게 확인하려 했지만, 앱 진입 직후 연속된 신규 고객 이벤트 팝업과 과도한 메인 화면 정보로
인해 탐색 흐름이 방해되어 혼란을 느낌
행동 흐름 (단계별)
1. 앱 실행
앱을 켜고 메인 화면 진입을 기대함
2. 팝업 연속 노출(신규 고객 이벤트/쿠폰/혜택 안내 등)
화면을 가리는 팝업이 여러 개 떠서
→ 닫기(X) 찾기 / 다음(넘기기) 반복을 하게 됨
3. 메인 화면 진입했지만 화면이 과밀함
배너, 특가, 추천, 카테고리, 광고성 콘텐츠가 동시에 노출
→ 시선 분산 / 원하는 기능(검색/카테고리) 찾기 어려움
4. 원래 하려던 행동(상품 검색/탐색)으로 이동하려고 함
검색창 또는 카테고리를 찾아 눌러야 하는데
→ 중간에 추가 팝업/유도 요소로 흐름이 끊김
5. 피로감/짜증으로 탐색 의욕 저하
“일단 닫는 것부터 해야 하는 앱”처럼 느껴져
→ 탐색 집중이 깨지고 이탈하거나 다른 앱으로 이동
💬 질문 2. 그 경험에서 문제는 어디에 있었을까요?
→ UI 자체가 아니라 사용자 행동 흐름 중 어떤 지점이 문제였는지 분석해보세요.
Q. 그 경험에서 문제는 어디에 있었을까요?
문제 지점
: 앱 진입 직후, 사용자가 ‘탐색을 시작하기도 전에’ 흐름이 끊긴 지점
- 사용자의 원래 행동 흐름은 앱 실행 → 메인 진입 → 검색/탐색 시작 이었음
- 하지만 실제 경험에서는 앱 실행 → 연속된 이벤트/쿠폰 팝업 대응 → 메인 진입 지연 → 탐색 맥락 상실로 흐름이 바뀜
👉 즉, ‘상품을 찾기 위한 첫 행동’을 하기 전에 불필요한 선택과 대응 행동을 강요받은 지점이 핵심
챕터 2 _ (실습)
2-1. UI 설계와 정보 구조
💬 [실습] 클러스터링 : 주어진 정보를 알맞게 덩어리로 나눠보기
실습 가이드라인
💡 실습 예제 프레임 안에 우측의 컴포넌트를 넣어보면서 직접 오토레이아웃으로 묶어 보세요.
- 프레임 안에 있는 구성 요소들을 살펴보고 적절한 정보끼리 묶어요.
- 묶은 정보들을 하나의 프레임으로 담고, 적절한 이름을 붙여 덩어리를 만들어 주세요.
- 각 클러스터는 어떤 사용자 행동을 위한 정보 그룹인지 메모를 작성해 보세요.
생각해 볼 것
- 이 정보들은 어떤 행동을 유도하려고 모여 있나요?
- 묶은 정보들이 진짜 ‘한 덩어리’라고 말할 수 있을까요?
- 그룹 간의 간격, 위치, 정렬은 논리적으로 연결되고 있나요?
2-2. 시각적 위계와 시선 흐름
💬 [실습] 시각적 위계 설계하기
실습 가이드라인
💡 실습 예제 프레임 안에 우측의 컴포넌트를 넣어보면서 직접 위계를 조정해 보세요
1. 텍스트 요소의 우선순위에 따라 다른 스타일 지정하기
텍스트 크기, 굵기, 색상 등을 스타일로 지정해서 통일감 있게 맞춰 보세요.
2. 중요한 요소는 더 강조해보기
중요하다고 생각한 이유도 같이 메모해보세요.
3. 여백과 정렬 기준을 만들고 적용해 정돈하기
여백과 정렬 값을 4픽셀 그리드나 8픽셀 그리드로 정리해보고, 영역 간의 간격도 조정해보세요.
생각해 볼 것
- 지금 이 UI에서 가장 먼저 보여야 하는 정보는 무엇인가요?
- 강조하려는 요소와 실제로 눈에 먼저 들어오는 요소가 일치하나요?
- 정보 간 위계가 행동 흐름과 맞게 구성되어 있나요?
2-3. 플랫폼과 레이아웃 변화
💬 [실습] 플랫폼 별 레이아웃 전략
실습 가이드라인
💡 실습 예제 프레임 안에 있는 서비스 이미지를 활용해 보세요
1. 동일한 서비스의 데스크탑 및 모바일 화면 비교해보세요
구글 맵, 유튜브, 에어비앤비 중 하나를 선택해 데스크탑과 모바일 화면을 비교 분석해보세요.
2. 각 플랫폼에서 가장 먼저 보이는 정보, 행동을 유도하는 구조, 탐색 흐름 등을
첫 화면에서 보이는 정보의 양이나 형태가 플랫폼에 따라 달라지는 점을 눈여겨 보세요.
3. 유사한 서비스를 설계한다면 어떤 전략으로 배치할지 적어보고 직접 아이디어를 적어보세요.
생각해 볼 것
- 데스크탑에서는 이 기능을 어디에 두는 게 가장 자연스러울까요?
- 모바일에서는 이 정보는 첫 화면에 보여야 할까요? 접어두는 게 나을까요?
- 두 플랫폼 모두에서 동일한 행동 흐름이 유지될 수 있도록 어떤 공통 구조를 만들 수 있을까요?
2-4. UI 평가 요소 7가지
💬 [실습] UI 리뷰하기
실습 가이드라인
1. 지금까지 만든 디자인 화면 중 하나를 열어보세요.
2. 7가지 기준을 하나씩 보면서 좋은 점 / 개선할 점을 메모해보세요.
3. 필요하다면 화면을 다시 정렬하거나 위계를 수정해보세요.
4. 수정한 화면과 이전 화면을 놓고 실제로 어떻게 개선했는지 설명하는 연습을 해보세요.
생각해 볼 것
- 이 화면에서 가장 먼저 보여야 할 정보는 무엇인가요?
- 강조된 것과 사용자가 실제로 먼저 보게 되는 것은 일치하나요?
- 정보가 덩어리로 잘 묶여 있나요?
- 이 디자인은 사용자의 행동 흐름을 제대로 반영하고 있나요?
- 이 구성이 정말 사용자 목적에 맞는 구성인가요?
전부 싹다 엄청나게 개선 해야...(쿨럭)
2-5. MVP 플로우 설계
💬 [실습] 최소한의 여정 도출하기
실습 가이드라인
1. 다음 중 핵심 행동 하나를 선택해 주세요.
상품 구매, 숙박 예약, 프로필 팔로우, 채널 구독
2. 그 행동을 인게이지먼트 게임 중 어떤 것으로 볼 수 있을지 생각해 보세요.
3. 사용자가 그 행동을 하기까지 어떤 화면과 판단을 거치는 지 순서대로 정리해보세요.
서비스 형태와 단계는 자유롭게 구성해 주세요.
4. 그 흐름을 플로우 차트로 그려보세요.
플로우 차트의 구성 역시 자유롭게 구성해 주세요.
5. 각 화면에 어떤 정보를 넣을 것인지 메모해 보세요.
생각해 볼 것
- 이 흐름은 정말 핵심 지표를 검증하는 데 필요한가요?
- 이 플로우에서 ‘굳이 없어도 되는 화면’은 없을까요?
- 사용자가 이 흐름을 한 번에 이해할 수 있을까요?
- 이 플로우는 모바일에서도 무리 없이 작동할까요?
- 정보 흐름과 시각적 흐름이 어긋나진 않았나요?
2-6. 와이어프레임과 사용자 흐름
💬 [실습] 와이어프레임 설계하기
실습 가이드라인
💡 실습 예제 페이지에서 해도 되고, 개인 작업 공간에서 해도 무방해요
1. 2-5에서 만든 사용자 흐름의 각 화면에 필요한 정보와 행동을 적어보세요
2. 큰 덩어리로 먼저 와이어프레임을 구성하고, 그 안에 컴포넌트를 배치해요.
3. 위계, 시선 흐름, CTA 배치를 고려해 레이아웃을 정리해요.
생각해볼 것
- 이 화면은 어떤 흐름의 일부인가요?
- 사용자 목적은 명확히 드러나고 있나요?
- 위계, 정렬, 흐름이 잘 이어지고 있나요?
- 불필요하거나 중복된 정보는 없나요?
- 디바이스 환경에 따라 구조는 잘 대응하고 있나요?
2-7. 전략적 UI 사고 훈련
💬 [실습] 목적에 맞는 UI 구조 설계
실습 가이드라인
1. 주어진 템플릿 중 하나를 선택하세요
- 각각의 템플릿은 어떤 목적을 가지고 있는지 적어보세요.
- 여행 상품 비교, 온라인 강의 수강
2. 템플릿을 아래 기준에 따라 UI 구조를 재설계 해보세요
- 사용자의 목적에 따라 필요한 디자인 추가
- 이미지/텍스트/가격 등 기본 정보 배치 순서
- CTA의 위치나 배치
- 텍스트의 위계 강조 방식 정리
- 섹션 갯수, 정렬 등 덩어리 구조 설계
3. 설계한 구조를 이전 설계와 비교해보고, 왜 그렇게 구성했는지 설명하는 연습을 해보세요.
생각해 볼 것
- 지금 이 UI는 어떤 목적을 위한 구조인가요?
- 같은 콘텐츠를 다른 목적을 위해 구성한다면, 어떤 부분이 바뀌어야 할까요?
- 지금의 CTA 위치와 강조 방식은 정말 적절한가요?
- 화면 내 정보 흐름은 전략적 흐름을 뒷받침하고 있나요?
- 사용자의 의도와 비즈니스의 의도가 구조 설계에 반영되어 있나요?
흠...이렇게 하긴 했는데 챕터 2는 내가 제대로 한건지 감이 안 잡힘...
그래도 해봤으니 만족..🥲
근데 개인과제 특강 들어도..ㅎㅎ 모르겠음..
(개인과제로 죽을래..) (아니..안돼 그래도 해야지..)