minju6544 님의 블로그

[피그마 강의]5강- 프로토타입

minju6544 — Thu, 7 May 2026 19:52:27 +0900

https://teamsparta.notion.site/5-7-2232dc3ef51481b884e0ce8a1c19cc0a

https://teamsparta.notion.site/5-8-2232dc3ef5148159b3f6de08dc916005

챕터5-8 : 화면 디자인 연결하기 | Notion

화면을 실제로 연결해보고, 프로토타입의 구성과 기능에 대해 좀 더 자세하게 이해해봐요!

teamsparta.notion.site

https://teamsparta.notion.site/5-9-2232dc3ef51481c7bb4aed2458cf6b81

[프로토타입 종류]

퀄에 따라 나눔

->포로토파이, 프레이머 등의 다양한 도구로 프로토타입을 진행함.

[프로토타입 구성요소]

1번: 핫스팟 (시작점이라고 생각하면 됨), 2번: 커넥션, 3번: 데스티네이션(종착점)

[오버플로우]: 프레임 밖으로 컨텐츠가 넘어가는 것

-즉, 스크롤이 되게 하려면 프레임보다 콘텐츠가 더 길어서 넘쳐야 함

-오버플로우가 되지 않으면 -> 스크롤 안생김

[스크롤 컨테이너]: 오버플로우가 생긴 프레임을 스크롤로 만들어주는 기본적인 프로토타입 기능

1. No scrolling: 스크롤 하지 않음. 기본값

2. Horizontal: 내부의 콘텐츠들이 가로로 넘칠 때, 가로 방향으로 스크롤

3. Vertical: 내부의 콘텐츠들이 세로로 넘칠 때, 세로 방향으로 스크롤

4. Both directions: 가로 및 세로 방향으로 모두 스크롤

[플로우]-트리거, 애니메이션, 액션으로 구성

트리거: 액션을 시작하는 조건이나 이유, 계기

액션: 트리거로 인해 만들어지는 결과

애니메이션: 어떻게? 언제? 실행할지-> 즉 인터핵션 형태를 정하게 됨

트리거의 종류:

On click(on tap) : 클릭 또는 탭/터치했을 때 액션을 실행해요.
On drag : 드래그했을 때 액션을 실행해요.
While hovering : 커서/마우스가 영역 위에 올라가 있는 동안 계속 액션을 실행해요.->Mouse enter와 Mouse leave를 계속 반복하는 것과 같은 효과예요.
While pressing : 커서/마우스로 영역을 누르고 있는 동안 계속 액션을 실행해요.->Mouse down와 Mouse up를 계속 반복하는 것과 같은 효과예요.
Key/Gamepad : 특정 키를 눌렀을 때 액션을 실행해요.
Mouse enter : 커서/마우스가 영역 위에 올라가면 액션을 실행해요.
Mouse leave : 커서/마우스가 영역을 벗어나면 액션을 실행해요.
Mouse down : 커서/마우스가 영역을 누르면 액션을 실행해요.
Mouse up : 커서/마우스가 영역을 눌렀다 떼면 액션을 실행해요.
After delay : 일정 시간이 지난 후에 액션을 실행해요.

액션의 종류:

Navigate to : 페이지(프레임)를 이동하는 액션이에요.
Change to : 컴포넌트의 다른 배리언츠로 변경하는 액션이에요.->트리거가 컴포넌트에 적용되어 있을 때만 사용할 수 있어요.
Back : 직전 화면으로 이동하는 액션이에요.->뒤로가기 버튼에 적용하면 언제든지 이전 화면으로 이동할 수 있어요.
Set variable : 변수를 특정 값으로 설정하는 액션이에요. 변수 기능은 피그마 유료 계정부터 사용할 수 있어요.->트리거를 실행하면 변수를 원하는 값으로 설정할 수 있어요.
Set variable mode : 변수를 특정 모드로 설정하는 액션이에요. 변수 기능은 피그마 유료 계정부터 사용할 수 있어요.->트리거를 실행하면 변수를 원하는 모드로 설정할 수 있어요.
Conditional : 분기점을 만들어서 조건에 따라 A 또는 B를 실행하는 액션이에요-> 조건분기 기능은 피그마 유료 계정부터 사용할 수 있어요.
Scroll to : 현재 프레임의 특정 지점까지 스크롤해서 이동하는 액션이에요.
Open link : 특정 URL을 여는 액션이에요.-> 피그마 안의 특정 영역이나 프레임으로도 이동할 수 있어요.
Open overlay : 현재 프로토타입 화면에 다른 프레임을 위에 겹쳐서 보여주는 액션이에요. 라이트박스는 스크림(Scrim; 천 또는 장막), 딤드(Dimmed; 흐려진), 딤레이어(Dim Layer), 오버레이(Overlay) 등으로도 불려요.
- 팝업 같은 요소가 등장할 때, 일반적으로 ‘뒤에 가려진 화면은 사용할 수 없다’는 걸 보여주기 위해 반투명한 화면을 추가해요. 이 화면을 **라이트박스(Lightbox)**라고 불러요.
다이얼로그나 바텀시트를 프로토타입에서 보여줄 때 자주 사용해요.
Swap overlay : 라이트박스를 유지한 채 다른 프레임으로 교체하는 액션이에요.
Close overlay : 라이트박스을 닫는 액션이에요.

오버레이

[애니메이션 종류]

- 스마트 애니메이트 보충 설명

[핸드오프]-'손을 떠나다'라는 뜻으로, 개발자에게 전달하기 위해 디자인 사양을 정리한 문서

https://www.figma.com/community/plugin/1177722582033208360

-> 핸드오프 만드는 플러그인

https://teamsparta.notion.site/2232dc3ef51480e096e7ebf078062a93

[0504] 팀별 PRD작성

minju6544 — Mon, 4 May 2026 17:19:37 +0900

주제: 푸드테크 (카페)

[리서치]

1. https://www.youtube.com/watch?v=gmSgOCriAoQ&t=17s

2. https://www.youtube.com/watch?v=8KeiqpyhEoI

불편 내용	대표 인용
주문 후 취소 할 수 가 없음	"잘못 주문해서 취소하고 싶은데 안돼서 난감하다"
예상 대기 시간 및 인원에 대한 정보 부재	"왜 대기 순서를 주문하고 나서야 알려주는지 모르겠다"
메뉴 선택의 불편함	"원하는 메뉴를 찾기가 다소 어려웠다" "스크롤 길이가 길어지다보면, 밑에 위치하는 제품군은 노출되지 않을 가능성이 높다"
광고 및 이벤트로 인한 본기능 상실	"타 어플과 비교했을 때 2배 이상의 스크롤 차이가 있다"

문제 정의

-현재 사람들은 메뉴를 주문하기 위해 어플을 사용하나 광고 및 이벤트로 인해 주문기능이 본기능이 상실되고 있다. 실제로 '타 어플과 비교했을 때 2배 이상의 스크롤 차이가 있어 불편하다'라는 의견을 통해 광고와 프로모션이 본기능을 방해하고 있음을 알 수 있었다.

-사람들은 메뉴를 주문하기 전 다양한 사전 정보를 필요로 하지만, 예상 대기 시간 및 대기 인원에 대한 정보 부재로 불편함을 호소하고 있다. '왜 대기 순서를 주문하고 나서야 알려주는지 모르겠다'의 반응을 통해 정부 부재로 인한 불편함을 알 수 있다.

-사람들은 어플을 통해 메뉴를 선택 과정을 거치지만, '원하는 메뉴를 찾기가 다소 어려웠다'라는 반응을 통해 메뉴 선택에 있어 피로감을 느끼고 있음을 확인할 수 있다

-주문 후 주문과정에서 실수가 발견됐을 시에 사람들을 주문 취소를 요구하나 해당 시스템은 진행되고 있지 않다. '잘못 주문해서 취소하고 싶은데 안돼서 난감하다'를 통해 주문 취소 기능의 필요성을 알 수 있다.

->주문 후 취소 불가/ 필요한 정보 부재/ 메뉴 선택의 불편함/ 광고 및 이벤트로 인한 본기능 상실로 인해 사람들은 불편함을 호소하고 있고 이는 이탈율 증가로 이어진다.

[팀명] | PRD

\[기본 정보]

팀명

서비스명	ROADMAP
기획 기능명	선택 비용 감소를 위한 AI 추천 메뉴
팀원	김민주, 김나연, 임승현, 권나현, 서정진, 송하람
작성 기간	5/4~5/11(마지막 날 발표)
버전	v1.0

[서비스 + 기능 개요]

서비스 한 줄 소개

:" 나만의 취향을 빠르게 반영해 풍성한 카페 경험을 선사합니다"

" AI 기반 취향 테스트를 통해 오늘 하루를 더 달달하게 만들어줄 음료를 추천받아요"

기획하려는 기능

P0 퀵오더 기능 단골 매장과 메뉴를 설정, 바로 주문 주문 시간 단축

P1	AI 기반 메뉴 취향 테스트	5개의 질문을 통해 개인 맞춤형 메뉴 추천	선택 피로도 단축
P2	혜택/ 적립 알림 서비스	혜택과 적립 부분을 직관적으로 안내	정보 만족도 향상

타겟 사용자

선택 피로 누적으로 구매를 포기하는 사용자
주문 과정이 복잡해 주문을 포기하거나 이탈하는 사용자

[근거 데이터]

불편 내용 언급 빈도 대표 인용 출처

주문 전 대기 정보를 알 수 없다.	상	왜 대기 순서를 주문하고 나서야 알 수 있는지 모르겠다.	https://hongyaho.tistory.com/entry/스타벅스-이거-개선하면-좋겠는데-코드스트이츠-PMB-17기-W8D1
주문 후 취소/정정이 어렵다	상	잘못 주문했는데 취소가 안돼서 난감하다.	https://www.youtube.com/watch?v=gmSgOCriAoQ&t=17s
앱의 본질은 “빠른 주문”인데 광고·이벤트로 복잡함	상	다른 앱보다 스크롤을 두 배 이상 해야 해서 불편하다.	https://brunch.co.kr/@f544231498e74fb/2

[공통 불편 TOP 3]

주문 전 대기 정보 확인 불가
주문 후 취소/정정 어려움(본사 문의)
광고/이벤트로 혼잡해 빠른 주문이 어려움

[문제 정의]

Callout icon

[BEFORE]

'매장 찾기 - 메뉴 선택 - 주문'의 과정이 너무 복잡하다.
메뉴가 너무 다양해서 메뉴를 선택하면서 피로감을 느끼게 된다. 특히, 4-50대 분들은 모르는 메뉴가 많아 선택에 있어 부담을 느끼는 경우가 많다.

[AFTER]

현재 기존 스타벅스 어플 사용자는 빠르고 편리하게 주문을 원하고 있으나, UX/UI적 문제와 광고, 사전 정보의 부재, 주문 후 정정 시스템 때문에 사용자 이탈이 발생한다. 실제로 애플스토어/플레이스토어 리뷰(취소 기능 부재, 대기 시간 정보 부재, 메뉴 많음)를 통해 이 문제가 확인된다.

[DAY 2]

Step 2. 개인 가설 초안 작성

주문 전 대기 정보 확인 불가

A: 주문 전 필요한 사전 정보- ‘대기 인원 및 시간’을 확인할 수 있는 직관적인 UI제공

B: 사전 정보의 부재로 감소했던 주문 완성율이 올라가고 이는 사용자 경험 개선과 사용 만족도 향상으로 이어짐

C: 이탈율 감소 & 충성 고객층 형성 (자주 반복적으로 사용하는 고객층 형성)

주문 후 취소/정정 어려움

A: 주문 후 취소 및 정정이 가능한 기능 개선과 이를 알 수 있는 UI버튼 제공

B: 주문 후 취소 및 정정이 불가능해 불편함을 겪고 있던 사용자들의 경험 개선

C: 이탈율 감소 & 충성 고객층 형성 (자주 반복적으로 사용하는 고객층 형성), 불만접수건 감소

광고 및 이벤트로 혼란

A: 광고 및 프로모션의 위치를 내리고 퀵오더 혹은 주문/딜리버리 창을 가장 위로 올려 본 기능 강화

B: 다양한 광고 및 프로모션들로 혼란을 겪던 사용자의 피로도 감소

C: 이탈율 감소 & 충성 고객층 형성 (자주 반복적으로 사용하는 고객층 형성), 주문율 상승

Step 5. 가설 보강 + 문서화

[리서치 결과를 가설에 연결]

1. 권나현 김나연

주문 전 대기 정보 확인 불가

가설 1
- A : 매장별 예상 대기시간 및 혼잡도를 실시간 제공(자주가는 매장 순 리스트업 순으로 “대기현황 바로가기” 버튼)
- B : 사용자는 해당 대기현황을 보고 매장을 선택하거나 혹은 주문 시점을 조절할 수 있음
- C : 피크시간 주문 분산율 증가 + 주문 취소(시도/율) 감소
가설 2B : 정확한 시간에 픽업 가능 or 시간이 맞지 않을 경우 취소/정정(픽업 매장 변경)함으로써 사용자 불편감 개선 및 만족도 향상
C : 출근/식사 시간 등 특정 시간대의 사용자 서비스 이용 빈도 증가 (몰릴 수록 매장 주문보다는 서비스를 더 많이 사용할 테니까) → 헤비 유저 상승
A : 주문 완료 전 사용자가 주문 전 대기 정보 확인이 가능하도록 직관적인 ‘대기정보 보기’ 버튼 or 안내문구 제공

근거유사 사례우리 가설에 연결

결론 : 근거를 기반으로 가설과 유사한 방식으로 사용자 편의 개선 사례가 확인됨
- 추가적으로 예약 기능(해외 사례)을 국내에 도입한다면 사용자 대기 시간 축소와 매장 효율(회전율) 증가할 것

근거	유사 사례	우리 가설에 연결
https://about.starbucks.com/press/2026/making-it-easier-to-plan-your-starbucks-visit/	2026년부터 앱에서 픽업 시간을 5분 단위로 선택하는 예약 주문 기능 도입.	• 사용자는 개인 일정에 따라 주문 전 예상 시간을 알고 방문 시간을 조절할 수 있음 • 주문 몰리는 시간대에 미리 주문하여 시간 선점 가능 • 주문 몰리는 시간대 주문 집중도 감소 → 대기시간 분산 → 매장 효율 증가
https://www.khan.co.kr/article/202412171059001?utm_source=chatgpt.com#ENT	사이렌오더 결제 전 예상 대기시간 안내 시행. 대기 정보 제공이 실제 스타벅스에서도 개선 방향으로 채택됨	• 대기 정보 제공이 실제 스타벅스에서도 개선 방향으로 채택됨 • 자주 가는 지점 리스트에 예상 대기시간과 혼잡도( )를 시각화해서 보여주면 훨씬 직관적으로 개선 가능
https://www.sciencedirect.com/science/article/abs/pii/S0965856425001430	예상 대기시간과 실제 대기 흐름이 주문 취소 위험에 영향을 준다고 분석함.	대기 시간 정보 제공은 이탈률/취소율 감소 근거가 될 수 있음

2. 권나현 임승현

주문 후 취소/정정이 어려움

가설 1
- A : 메뉴 선택 전 “픽업 예상 시간”을 미리 보여줌(매장 선택 후 확인 가능, 메뉴 선택 상단에 예상 시간 보일수 있도록)
- B : 사용자는 대기시간에 따라 주문을 할지 말지 결정 혹은 다른 매장 선택
- C : 주문 완료 전환율 증가
가설 2B : 사용자 경험 개선을 통해 주문 과정에서의 불편함이 줄어들고, 이에 따라 사용자 만족도와 서비스 신뢰도가 향상되어 재주문율 증가로 이어질 것이다.
C : 재주문율 증가, 주문 관련 불만 접수 감소, 고객센터 문의 건수 감소, 주문 취소/변경 관련 cs 비율 감소
A : 퀵오더 주문 이후에도 사용자가 직접 주문을 취소하거나 메뉴를 변경할 수 있는 기능을 제공한다. 또한 기존에는 문의가 필요한 경우 고객센터를 통해서만 접수가 가능해 직영점과 직접 소통하기 어려웠던 문제를 개선해, 사용자가 직영점과 바로 연결될 수 있는 기능을 제공한다.

근거유사 사례 우리 가설에 연결

근거	유사 사례	우리 가설에 연결
https://www.khan.co.kr/article/202412171059001?utm_source=chatgpt.com#ENT	2024년 12월부터 매장 승인 및 배달 배차 전까지 사이렌오더 취소가 가능하도록 ‘주문 취소’ 버튼을 추가함.	• 동일 서비스에서 실제로 취소 기능이 도입된 사례 • 실 사례를 바탕으로 가능성 검토 완료
https://www.donga.com/news/It/article/all/20200909/102864565/1?utm_source=chatgpt.com	과거 사이렌오더는 주문 후 변경/취소가 불가해 사용자가 혼란을 겪었고 매장 연락도 고객센터로 통합되어 직접 해결이 어려웠다고 설명함.	• 취소/정정 어려움이 실제 사용자 문제였다는 근거 • 근거 기반으로 가설 타당성 검토 완료
https://baymard.com/learn/checkout-flow-ux-optimization	사용자는 결제 마지막 단계에서 오류를 발견하는 경우가 많으므로 이전 정보를 쉽게 수정할 수 있어야 한다고 제안함.	• 주문 실수 수정 기능이 없으면 다양한 부차 문제를 야기함 • UX 개선 시 사용자가 오류를 쉽게 발견하는데 가독성과 명확성이 크게 관련됨을 증명할 수 있음

결론 : 동일||유사 서비스 사례에서 유사한 방식으로 UI/UX적 개선 확인됨(가설 타당성 검토 完)

3. 송하람, 김나연

광고/이벤트로 인해 빠른 주문이 어려움

가설1
A: 퀵오더 혹은 즐겨찾기 메뉴를 홈 화면 상단에 고정하여 배치하면 B: 사용자는 별도의 탐색 없이 자주 주문하는 메뉴를 즉시 주문하고 C: 앱 진입 후 주문 완료까지의 평균 소요 시간이 단축되고 재방문 사용자의 주문 완료율이 증가할 것이다.
가설2B : 스크롤 감소 및 원하는 제품만 확인 가능하여 빠른 메뉴 확인&선택 가능
C : 선택 비용 및 후회 비용이 감소하여 사용자 피로도 감소 → 주문 성공률 증가
A : 이벤트 탭 구분과 제품별 카테고리를 세분화(커피, 차, 스무디 등)해, 해당 카테고리 제품만 필터링

근거유사 사례우리 가설에 연결

근거	유사 사례	우리 가설에 연결
https://www.nngroup.com/articles/banner-blindness-old-and-new-findings/	사용자는 광고처럼 보이는 요소나 광고 근처 콘텐츠를 무시하는 경향이 있으며 목표 달성에 필요한 요소에만 주의를 집중한다고 설명함.	-광고/이벤트 배너가 주문 목적 사용자의 집중을 방해할 수 있음. -과한 광고 및 프로모션은 사용자의 피로감을 유발.
https://baymard.com/blog/current-state-of-checkout-ux	체크아웃 UX가 좋지 않으면 구매 이탈이 발생하며 디자인 개선만으로 전환율이 최대 35% 증가할 수 있다고 설명함.	주문 버튼 접근성과 화면 구조 개선이 주문 전환율에 영향을 줄 수 있음.
https://brunch.co.kr/@monodream/41	지나치게 긴 스크롤은 사용자가 흥미를 잃거나 좌절하는 경우가 많다는 연구 결과가 있음.	다양한 컨텐츠 나열로 인해 스크롤이 너무 긴 경우, 테스크를 분리할 필요성이 있음.

결론 : 유사 서비스 사례를 바탕으로 과도한 광고 노출이 이용 편의성을 저하시키며 이탈률 증가로 이어짐을 확인할 수 있음
- 주문 전환율 증가를 위해 주문 버튼 UI 개선 필요(현재 타서비스 챗봇과 같은 포지션이라 혼동될 가능성 有)

PRD작성

minju6544 — Fri, 24 Apr 2026 14:53:51 +0900

[서비스 이미지]

[문제 정의]

[AS - is]	[To- be]
'매장 찾기 - 메뉴 선택 - 주문'의 과정이 너무 복잡하다.	나만의 단골 매장과 단골 메뉴를 설정해두고 퀵오더 기능으로 빠르게 주문.
메뉴가 너무 다양해서 메뉴를 선택하면서 피로감을 느끼게 된다. 특히, 4-50대 분들은 모르는 메뉴가 많아 선택에 있어 부담을 느끼는 경우가 많다.	AI 를 기반으로, 5개의 간단한 테스트를 통해 개인 맞춤형 메뉴를 추천한다.

문제로 인한 손실: '매일 고르는 메뉴를 똑같이 시키는데 늘 과정이 복잡하니 어느 순간 손이 덜가더라구요'
- '매장 찾기 - 메뉴 선택- 결제 수단 선택- 주문'의 복잡한 구성은 피로감을 높여 이탈률을 높여줌
- 너무 과한 정보 (메뉴)는 사용자에게 선택에 있어 부담감을 안겨줌
-> 과한 선택지는 오히려 만족도를 낮추는 요소로 작용

-----------------> 문제점들을 방치하면 이는 페인포인트로 작용하며, 결국 이탈률을 증가시킴

[핵심 기능]

P0	퀵오더 기능	단골 매장과 메뉴를 설정, 바로 주문	주문 시간 단축
P1	AI 기반 메뉴 취향 테스트	5개의 질문을 통해 개인 맞춤형 메뉴 추천	선택 피로도 단축
P2	혜택/ 적립 알림 서비스	혜택과 적립부분을 직관적으로 안내	정보 만족도 향상

[서비스 가치]

" 나만의 취향을 빠르게 반영해 풍성한 카페 경험을 선사합니다"
" AI 기반 취향 테스트를 통해 오늘 하루를 더 달달하게 만들어줄 음료를 추천받아요"

[KPI]

a) 가설 설정: 퀵오더 기능을 추가하면 -> 기존의 복잡한 주문 시스템으로 인한 시간이 줄어들고

-> 주문 완료율이 증가할 것이다

AI 기반 메뉴 취향 테스트를 추가하면 -> 선택에 대한 피로도를 줄고

-> 주문 완료율이 증가할 것이다

b) 검증 방법: A/B테스트와 사용자 인터뷰 진행

c) KPI: 3개월 기준,

주문 완료율 11% 증가

이탈률 18% 감소

유저 플로우

minju6544 — Thu, 23 Apr 2026 14:59:27 +0900

[기능 선정] : 푸드테크(카페) 주문- 결제 시스템

[사용자 시나리오]:

-누가: 카페어플을 자주 사용하는 2-30대 직장인

-상황: 아침 미팅 전 팀원들 포함 커피를 단체 주문하려는 상황

-목적: 카페 주문

-시나리오: 1. 시작

2. 매장 선택

3. 픽업 방식 선택

4. 원하는 메뉴 선택

5. 옵션 선택

6. 장바구니 담기

7. 주문하기

8. 결제 수단 선택

9. 결제

[이탈 포인트 분석] : 매장 선택의 모호함/ 주문 -결제 과정의 복잡성

타겟 사용자 설정 & 만다라트

minju6544 — Wed, 22 Apr 2026 14:41:20 +0900

[타겟 사용자 설정]

- 도메인: 푸드테크 - 카페

- 타겟 사용자: 바쁜 일상 속 배달을 통해 자주 음료나 음식을 시켜 먹는 직장인들

- 이들을 선택한 이유:

a) 바쁜 일상 속 빠르게 주문을 하고 음식을 배달받기 위해 앱을 사용하나 매일 매장 선택- 메뉴 선택- 결제의 동일한 구조를 반복해야함

b) 프로모션과 이벤트 창이 많아 정작 핵심 기능인 '주문' 도달하는 데에 방해를 받음

c) 쿠폰 및 혜택이 제대로 전달되지 않아 사용에 있어서 어려움

d) 실제 블로그에서 해당 앱으로 메뉴 주문 방법에 대한 안내가 있을 만큼 많은 사람들이 해당 과정을 어렵게 생각함.

-근거:

https://blog.naver.com/totosecret1375/224170060989

스타벅스 모바일 앱 사용 방법 이 기능을 몰라서 쿠폰 계속 날렸어요

사이렌 오더만 쓰고 앱 다 쓴 줄 알았던 시절이 있어요 처음에 스타벅스 모바일 앱을 깔았을 때는 진짜 단...

blog.naver.com

" 쿠폰 혜택 여부를 놓치기 쉬움"

" 대기 시간 등 필요한 정보들에 대해 알기 어려움"

" 프로모션과 이벤트가 너무 과함"

[페르소나 설정]

이름: 김유현
나이: 27세
직업군: 마케팅
상황: 아침 혹은 회의에 들어갈 때 음료 주문 -> 개별 주문도 있지만 종종 팀원들의 음료를 일괄적으로 주문
페인 포인트:
- 매일 아침 동일한 음료를 시키는 김O현에게 늘 반복되는 주문과정은 피로감을 안겨줌
- 달 무료 쿠폰이 있었으나 직접 찾아 들어가서 확인해봐야하는 구조로 인해 쿠폰을 발견하지 못해 사용하지 못함
니즈:
- 매일 아침 '매장 선택 - 매장 방식 선택 - 음료 선택- 결제' 의 구조가 반복되므로 위 과정을 간소하 하고자함
- 무료 쿠폰, 생일 쿠폰에 대해 개별 알림 처럼 직관적으로 알 수 있는 구조를 희망함

이름: 이현숙
나이: 55세
직업군: 전업주부
상황: 원래는 카페주문을 한달에 한번정도 사용해서 앱을 깔지는 않았으나, 최근들어 자주 방문하고 +
쿠폰을 받아 사용하기 위해 앱을 깔게됨 -> 쿠폰을 사용해서 주문을 하려고 함
페인 포인트:
- 회원가입 후 등급 별 혜택과 다음 등급으로 올라가기 위한 조건을 확인하고자 해당 정보의 위치를 찾지 못함
- 매장선택에 있어 GNB를 선택하려고 하나 해당 단어들이 어떤 의미인지 몰라 선택에 있어 어려움을 겪음
- 사이렌 오더라는 방식이 생소해 주문하는 데에 오랜 시간이 걸림
니즈:
- 혜택과 적립 부분을 자세히 알고 싶고, 해당 정보를 직관적으로 찾고 싶음
- GNB에 있는 단어들에 대한 의미를 알고 싶음
- 사이렌 오더의 방식에 대해 설명해주는 정보창이 필요함.

피그마 강의 [4강]

minju6544 — Wed, 22 Apr 2026 10:39:45 +0900

[컴포넌트 프로퍼티]: 컴포넌트가 의사상태를 가질때, 형태나 안의 요소가 바뀌는 요소가 생김

-> 이런 변화와 변경을 만들 수 있는 기능

-배리언츠/ 프로퍼티로 구성

-배리언츠: '변종, 변화' -> 의사 상태를 만들 때 사용

-프로퍼티: '속성' -> 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용

- 배리언츠를 제외하면 피그마 컴포넌트를 만들 때 설정할 수 있는 프로퍼티는 3가지

-> Blooean/ Instance swap/ Text

-Boolean (불리언): 'Y or N' 'true / false', 'yes/ no', 'on/ off' 모두 사용 가능

-> 특정 요소를 보이게 하거나 안보이게 할 수 있는 속성

-Instance swap (인스턴스 스왑): 컴포넌트의 인스터스를 다른 인스턴스로 교체

-> 버튼 안의 아이콘, 팝업 안의 버튼 등을 교체할 때 사용

! 인스턴스가 아닌 것과는 바꿀 수 없음, 인스턴스 끼리만 교체 가능!

-Text : 컴포넌트 안에 있는 텍스트를 수정하기 쉽도록 컴포넌트 속성으로 만들어줌

배리언츠와 프로퍼티를 고르는 기준: 컴포넌트에 적용된 파운데이션이 변경되는지를 기준으로 함

-> 파운데이션 요소( 색상, 간격, 폰트 등)가 바뀌면 -> 배리언츠!

[머티플 컴포넌트]

예시로 아이콘들을 다 컴포넌트들로 만들고 싶을 때, 각각을 다 설정하면 오래걸리니까

머티플 컴포넌트를 눌러 한번에 다 각각의 컴포넌트로 설정

[아이콘 컴포넌트 만들기]

주의*

1) 인스턴스 스왑은 아이콘 더블클릭했을때 가장 위에 창에 프로퍼티 적용 창이 있음

2) 더블클릭한 아이콘이 컴포넌트여야함 (프레임이면 프로퍼티 안 뜸)

-> 아이콘 적용할것들 나열 후 컴포넌트화 하고, 거기서 복사해서 적용할 버튼에 붙여야 함

1. 전체 컴포넌트 선택 후 -> 프로퍼티스에서 불리언(Boolean)적용- 이름, true false

2. 설정할 아이콘 더블클릭 -> appearance에서 만들어둔프로퍼티스 적용

[아이콘 교체-Instance swap]

전체 컴포넌트 선택 후 -> instace swap 적용 -> 이름 바꿔주고 현재 보일 아이콘으로 바꿔주기

-> Preferred values +를 눌러 스왑할 아이콘들 설정해 적용 -> 적용한 아이콘 더블클릭

-> 이름 옆 아이콘 눌러 적용

[합성 컴포넌트]

: 컴포넌트가 여러개 결합된 경우

[네스티드 인스턴스] (감싼 인스턴스)

:상위 컴포넌트에서 하위 컴포넌트의 프로퍼티를 바로 조작할 수 있도록 도와주는 기능

[탭 컴포넌트] -> 네스티드 인스턴스 활용법

: 네비게인셔에 해당하는 컴포넌트로, 현재 화면을 다른 화면으로 전화시켜주는 기능

탭은 선택된 것과 선택되지 않을 것을 구분해 줘야 함

탭이름을 컴포넌트 한후 boolean적용,복제 후 오토레이아웃, 컴포넌트 셋 적용 -> Nested instances적용

하위 컴포넌트 다 체크해주면

탭 이름 하나하나를 불리언 가능해짐

JD

minju6544 — Tue, 21 Apr 2026 14:53:31 +0900

도메인 - 커머스/ 핀테크/ 애드테크/ 여행.숙박/ 소셜 네트워킹

커머스: 직매입과 오픈마켓이라는 사업 구조가 있고, 상품 관리와 결제, 추천 시스템이 주요한 역할,

'정산'이라는 인터널 프로덕트의 중요성도 큼, 물류도메인 ( 플랫폼이 직접 배송하는 1P물류, 타사의 물류체인을

활용하는 3P물류, 직구, 퀵커머스)

1. 토스 -> '간편한 송금과 금융 관리' : 핀테크

2. 유튜브 ->' 정보 탐색 및 여가 활용' : 콘텐츠 미디어

3. 스타벅스 및 카페 어플 -> '음료 주문 및 쿠폰 활용' :푸드테크

4. 쿠팡이츠 -> '음식 주문 및 배달 이용': 푸드테크

관심도메인- 핀테크/ 푸드테크/ 커머스

[1. 미리디]
직무명: 프로덕트 디자인
출처 링크: ㈜미리디 채용 - [미리디] 프로덕트 디자인 및 기획자(UI/UX) | 잡코리아
주요 업무 요약: 문제를 정의하고 해결을 위한 분석 진행. UX 설계 및 디자인 담당 -> 배포
요구 역량:
-사용 툴 : 피그마
-경력. 포트폴리오: 3년이상

㈜미리디 채용 - [미리디] 프로덕트 디자인 및 기획자(UI/UX) | 잡코리아

경력 : 경력 3년이상, 학력 : 학력무관, 급여 : 회사 내규에 따름(면접 후 결정), 마감일 : 2026.06.19

www.jobkorea.co.kr

[(주)팔로] 열품타 Product Designer(기획, UX/UI) (D-26) - 사람인

[(주)팔로] 열품타 Product Designer(기획, UX/UI)(D-26) - 사람인

(주)팔로, 열품타 Product Designer(기획, UX/UI), 경력:경력무관, 학력:학력무관, 면접 후 결정, 마감일:2026-05-17, 홈페이지:

www.saramin.co.kr

[2. 열품타]
직무명: 프로덕트 디자인
주요 업무 요약: 공감가는 스토리 라인으로 기획, 많은 제품 디자인 시안 만들고, 수정
요구 역량:
-사용 툴 : 피그마, Android Material UI Design 이나 Apple IOS Human Interface Guideline에 대한 이해가 높은 사람

카카오 영입

careers.kakao.com

[3. 카카오]
직무명: AI 서비스 UI 디자이너( Product Designer)
주요 업무 요약: 카카오톡 AI 서비스 디자인, AI 서비스 시나리오에 대응하는 UI 인터랙션 설계
요구 역량:
-사용 툴 : 피그마, 포토샵, 일러스트

[기타]

NAVER WEBTOON Careers

네이버웹툰 조직문화 및 업무 소개, 채용공고, 입사지원 등

recruit.webtoonscorp.com

㈜컬리 채용 - 커머스 시니어 Product Designer | 잡코리아

경력 : 경력 8년이상, 학력 : 학력무관, 급여 : 회사 내규에 따름, 마감일 : 2026.05.05

www.jobkorea.co.kr

[공통점 분석]

1. 모바일 / 웹 서비스 디자인에 대한 기본이해

2. 사용자 관점에서 디자인을 고민해 본 경험

3. 데이터 또는 사용자 피드백을 바탕으로 개선을 시도해본 경험

4. 피그마와 어도비 등의 시각툴을 능숙하게 사용하는 사람

5. 기획자, 개발자와의 협업을 통해 상용 서비스를 출시해 본 경험

6. 논리적인 UX를 설계하고 UI의 시각적 완성도를 높여본 경험

7. HYML/ CSS/ JavaScript 퍼블리싱 가능

8. B2B SaaS 또는 내부 운영 서비스 디자인 경험

9. AI툴 (GPT, Claude 등)을 활용해 문서화나 업무 효율화를 시도해 본 경험

[직무 역량 키워드 분석]

<Hard Skills>

-피그마 활용 능력, 어도비 활용능력, 모바일/웹 서비스 디자인경험, HYML/ CSS/ JavaScript 퍼블리싱, AI활용 능력

<Soft Skills>

-기획자, 개발자와의 커뮤니케이션, 사용자 관점에서의 이해, 문제 분석과 해결 능력

[향후 보완 계획 및 목표 정리]

- 모바일/ 웹 서비스, Android Material UI Design 이나 Apple IOS Human Interface Guideline 이해도 높이기

- 피그마 활용 능력 높이기 (프로토타입 등)

- AI 활용 높이기- Claude 등

- HYML/ CSS/ JavaScript 찾아보기

피그마 강의 [1-3강]

minju6544 — Mon, 20 Apr 2026 14:56:29 +0900

[2강]

보더: 실제 코드 블록의 테두리

UI크기= 개체의 크기 + 패딩

wrap:감싸기 -> 일정 위치부터 다음 줄에 쌓임

* 오토레이 아웃은 만들어지는 순서대로 밑으로 쌓임

[컨스트레인트]

: 제약, 조건

:즉, 오토레이아웃 안에 있는 개체들이 움직이는 방식을 제한함

L '부모 컨테이너의 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변할까?'

파란 점선이 컨스트레인트 (위이미지는, 왼쪽과 상단을 기준으로 부모 컨테이너에 고정시킨다는 의미)

[프레임 리사이징]

컨스트레인트 vs 프레임 리사이징 : 컨스트레인트는 일반적인 프레임에 대한 내용,

리사이징은 오토레이아웃 컨테이너 안에서의 내용

값	설명	유형
Fixed	고정값	공통
Hug	자식 컨테이너의 크기에 맞춰 조정	부모만 사용 가능
Fill	부모 컨테이너의 크기에 맞춰 조정	자식만 사용 가능

자식이 Fixed-> 부모가 Hug

자식이 Fill -> 부모가 Fixed

[포지션] -> 프로토타입에서 설정

: 요소의 위치를 고정하거나 스크롤에 따른 위치를 조정할 때, 개발에서 포지션이라는 속성을 조정해서 만듦

1) Static (스태틱): 일반적인 요소들이 가지고 있는 포지션. 기본값이자 스크롤을 하면 같이 따라 움직임.

2) Fixed (픽스드): 화면 전체를 기주으로 스크롤 하더라고 항상 고정된 위치에 있음.

우리가 아는 웹사이트의 헤더나 앱 하단의 버튼

3) Absolute(앱솔루트): Fixed와 유사하지만, 고정되는 기준이 컨테이너 안. 즉, Fixed는 화면 전체를 기준으로 하고,

Absolute는 본인이 담겨 있는 부모 컨테이너를 기준으로 함.

4) Sticky(스티키): 스크롤에 따라서 기본값과 Fixed를 전환하는 포지션.

스크롤을 따라 움직이다가, 특정 위치부터는 상단에 고정됨

나머지는 프로토타입에서 설정, Absolute만 해당 부분에서 사용

[3강]

버튼이라는 컴포넌트를 만들기 위해서는 파운데이션부터 만들어야함.

UI는 기초 재료인 파운데이션과, 이 파운데이션을 조합해 만드는 컴포넌트로 나눌 수 있음.

파운데이션(엘리먼트) 구성

- 색상(color)/ 서체(font/ typography)/ 간격(spacing)/ 여백(gap)/ 곡률(radius)/ 그리드/ 고도/ 아이콘

[RGB와 Hex Code]

-컴퓨터는 빨강, 초록, 파랑을 각각 256가지의 값으로 보여주고, 이 각각의 숫자를 컴퓨터는 16진수로 변환해서 읽음.

#FFFFFF -> 헥스코드

-'컬러 프로필(프로파일): 디스플레이가 코드를 해석할 때 사용하는 색 기준표

-컬러 스타일: 디자인에서 사용할 색상을 모아두는 팔레트

기본적으로 2-3가지 색상만듦 (포인트 컬러/ 백그라운드 컬러/ 세컨더리 컬러)

-포인트 컬러 = 프라이머리 컬러 (중요하고 핵심적인 부분에만 사용)

- 색상의 확장성 ( 색상을 정했다면, 가장 밝은 단계부터 가장 어두운 단계까지 총 10단계로 만듦)

- [1:3:6 법칙]

포인트 컬러는 화면의 10%, 세컨더리 30%, 배경 60%

[컬러스타일 만드는 법]

플러그인: Coolors

원하는 컬러 선택

사각형들을 만들고, 색 복붙

Styler 플러그인

각 색을 10개씩 복사한 후 컬러를 눌러 Hex를 HSL로 변경

명도가 어두운 순으로 10씩 나열 (위 사람이 선택한 색의 기본 명도가 42였음. 가장 어둡게 2로 시작해서, 예-2/12/22/32/42/52/62/72/82/92

모두 적용 후 이름 바꿔주기 (어두운게 900, 가장 밝은게 50)

Styler 적용 -generate Styles

색상이 스타일화 됨

[폰트 스타일]

: 패밀리(Family: 폰트 종류)/ 굵기(=무게감, weight)/크기/ 행간/ 자간

크기: 폰트 크기가 20px이상일 때는 4px씩 차이나게 하는게 일반적.

일반적으로 20px 미만인 폰트들은 본문에 사용하고, 20px 이상부터는 제목에 사용

일반적으로는 16px(웹사이트 기본폰트 사이즈이기 때문) 부터 시작하고, 2px씩 줄이거나 늘림.

행간(라인- 하이트) : 글자 줄 사이의 간격

일반적인 행간 값: 제목: 120- 135%, 본문: 135-170% 본문 같은 경우 150%가 제일 좋다고 알려짐.

Ui에서 쓰기 좋은 패밀리: 노토산스/ 프리텐다드/ 스포카 한 산스/ 민 산스/ 수트

사용한 폰트 디테일들 입력하고, 이름 바꿔줌

Styler적용

적용 이미지

[컴포넌트]: 파운데이션 요소들을 조합해 만들어지는 구성품

[마스터 컴포넌트]

: 쉽게 말하자면, 라이브러리에 버튼 원본을 저장해 두고 버튼의 복사본들을 사용 -> 수정시 원본만 수정 -> 복제본들은

수정 내용이 일괄 적용

- 마스터 컴포넌트를 복제하면 마스터 컴포넌트의 복제본, '인스턴스'가 생김

인스턴스: 마스터 컴포넌트의 복제본

-> 컴포넌트의 속성을 그대로 이어받음, 수정 불가능

- 인스턴스를 먼저 수정하면 컴포넌트를 수정해도 반영 되지 않음 -> 덮어쓰기 됐다고 생각하면 편함

- 컴포넌트를 지우더라고 인스턴스는 남아 있음

- 연결을 해제(디태치 Detach)하면 인스턴스는 컴포넌트와 분리되고, 일반 프레임으로 변경됨.

[디자인 시스템]-> For. 효율성/ 일관성

UI는 다른 디자이너도 똑같은 방법으로 만들고 쓸 수 있어야 하고, 개발자도 같은 생각을 해야함

<UI키트 VS 디자인시스템>

ui 키트는 단어만 있는셈. 즉, ui사용 방법은 없고 ui 만 있는 모양

디자인 시스템: UI자체 뿐만 아니라 UI의 규격,스펙, 사용 사례, 주의 사항 등이 총망라된 종합적인 제품 가이드라인(문서)

키트만 있다면, 일관성은 없어질 수 있음

아토믹 디자인 시스템(Atomic Design System): 기초 재료들은 세상을 구성하는 가장 작은 알갱이인 원자에 비유, 원자를 모아서, 분자를 만드는게 디자인 시스템의 핵심 개념

[잘 만들어진 디자인 시스템] - 머티리얼 디자인(구글), 밀리의서재, 일리야 그레벤 시스템, 라인, 세일즈포스

Material Design 3 - Google's latest open source design system

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

m3.material.io

millie Design Library 2.0

한 걸음 더 나아가기 | 안녕하세요. 밀리의 서재 디자인 파트입니다. 작년 millie Design System(이하 밀디라)을 피그마와 브런치를 통해 공개한 이후 큰 관심을 받았습니다. 작년에 진행했던 밀디라

brunch.co.kr

Design Systems Database & Gallery

Best-in-class Design Systems collection with a repository of Components and Foundations references from top-tier tech companies and leading UI teams.

designsystems.surf

LINE Design System for Messenger

LINE Messenger design system continues to create a unified design language with foundation and UI components that become the center of LINE’s design.

designsystem.line.me

Lightning Design System 2

Lightning Design System 2 · Design system documentation, made with zeroheight

www.lightningdesignsystem.com

[UI의 분류]

-액션 (Action): 사용자가 중요한 행동을 수행할 때 사용 예- 버튼

-인폿 (Input): 사용자의 입력을 받을 때 사용 예- 텍스트필드/ 셀렉트박스

-인포메이션(Information): 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용 예- 토스트 메시지/ 스낵바/ 라벨

-컨테이너(Container): 컴포너트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트 예- 카드/ 바텀시트/리스트

- 내비게이션(Navigation): 사용자가 페이지를 이동할 때 사용 예- 네비게이션 바, 앱 바, 화면 하단의 탭 바, 사이드바

- 컨트롤(Control): 사용자가 설정이나 값을 수정할 때 사용 예- 라디오/ 체크박스/ 스위치

[의사 상태 (Pseudo State)] : 사람을 애칭이나 별명으로 부르듯, 컴포넌트도 기본 자체는 유지한 채, 상황에 따라 다른 스타일을 가지는 경우가 있음

의사란 가짜의, 가상의 뜻

예- 버튼에 마우스를 올렸을 때 색깔이 변하는 것

실제 버튼이 다른 걸로 바뀐 것이 아니라 의사 상태가 된것

[버튼 컴포넌트] : 누름으로써 중요한 동작을 수행하는 요소

-어포던스(행동 유도성)를 줘야함 -> 상호작용이 가능한 물체는, 상호작용이 가능하다는 시각적인 단서제공

-심미적인 완성도 보다 버튼의 목적을 우선 생각하여 설계

-컴포넌트는 항상 구조 파악이 첫번째!

[구조]

1. 컨테이너: 안에 있는 요소를 감싸고 있는 프레임

(버튼의 높이는 컨테이너 안의 상하 여백 + 안에 있는 요소의 높이로 결정)

2. 라벨/레이블 : 버튼의 행동을 안내하는 글자

3. 리딩 엘리먼트 : 버튼 라벨보다 더 앞쪽에 있다는 뜻에서 리딩 (이끄는) 엘리먼트라고 부름

4. 트레일링 엘리먼트: 버튼 라벨보다 더 뒤쪽에 있다는 뜻에서 트레일링(뒤따르는) 엘리먼트라고 부름

[종류]

1. 박스 버튼: 일반적인 버튼

2. 아웃라인 버튼, 고스트 버튼, 엠티 버튼: 테두리만 있고 속이 빈듯한 형태

3. 스플릿 버튼 : 주요 액션과 관련된 보조 액션을 제공해야 할 때 사용하는 버튼

4. 텍스트 버튼 : 배경색이나 테두리 없이 글자로만 이루어진 버튼

-> 주요 액션에 비해 비중이 낮고, 별로 중요하지 않은 기능을 수행할 때 사용

[버튼 컴포넌트 참고] - 머티리얼/ 우버/ 라이트닝/ 카본

All buttons – Material Design 3

Buttons let people take action and make choices with one tap. Explore button types: elevated, filled, filled tonal, outlined, text, icon, segmented & more.

m3.material.io

Button · Base design system

Base Design System

The Base design system defines the foundations of user interfaces across Uber's ecosystem of products & services. It brings all Uber experiences together under a single, unified framework.

base.uber.com

Button · Lightning Design System 2

Lightning Design System 2

Lightning Design System 2 · Design system documentation, made with zeroheight

www.lightningdesignsystem.com

버튼 – 탄소 설계 시스템

Carbon Design System

Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contri

carbondesignsystem.com

[텍스트필드 컴포넌트]: 컴포넌트의 종류 중 인풋(사용자가 무언가를 입력할 수 있게 하는 컴포넌트)에 해당하는 컴포넌트

[구조]

인풋 컨테이너: 글자를 입력하는 부분

라벨/레이블: 입력해야 하는 값이 무엇인지 알려주는 텍스트

리딩 엘리먼트: 텍스트보다 더 앞쪽에 있는 엘리먼트

트레일링 엘리먼트: 텍스트보다 더 뒤쪽에 있는 엘리먼트

헬퍼 텍스트: 입력해야 하는 값의 가이드라인을 제공하는 도움말

플레이스홀더: 플레이스 (자리를) + 홀더(지키고 있는 것)

플레이스 홀더 -> 사용자가 글자를 입력하기 시작하면 사라지고, 글자를 모두 지우면 다시 나타남

플레이스 홀더에는 조건 대신 입력 예시를 넣어주는게 더 좋음! 조건은 -> 헬퍼 텍스트로 적기

[컨트롤 요소 라벨] -> 컨트롤 요소 자체는 작더라도, 그 주변으로 최소 크기 범위 만들어주기

최소 1*1(cm)

보통 컨트롤 요소는 라벨과 같이 사용 -> 라벨을 누르더라도 컨트롤 요소가 작동하게 하는 것이 원칙

아이콘과 글씨영역 크기 동일하게 맞춰줌

디폴트/ 마우스가 올라간 것 / 눌린것/ 눌리지 않는 것/ 결정되지 않은 것

[체크박스 컴포넌트 참고]- 머티리얼/ 우버/ 카본/ 라이트닝

https://m3.material.io/components/checkbox/overview

Checkbox – Material Design 3

Checkboxes let users select one or more items from a list, or turn an item on or off.

m3.material.io

https://base.uber.com/6d2425e9f/p/83ffb9-check

Base Design System

The Base design system defines the foundations of user interfaces across Uber's ecosystem of products & services. It brings all Uber experiences together under a single, unified framework.

base.uber.com

https://carbondesignsystem.com/components/checkbox/usage/

Carbon Design System

carbondesignsystem.com

https://www.lightningdesignsystem.com/2e1ef8501/p/980561-checkbox

Lightning Design System 2

Lightning Design System 2 · Design system documentation, made with zeroheight

www.lightningdesignsystem.com

[라디오 컴포넌트]- 여러 선택지 중 단 1개를 선택할 때 사용하는 컨트롤 컴포넌트. (체크박스는 여러개 선택가능)

여러 항목 중 하나를 반드시 선택/ 선택 후 다른 항목 선택 시 기존 항목 선택 사라지고 다른 항목 선택됨

- 원형 도형에서 만드는 것 보다 20*20 에서 절반인 10의 곡률을 주어 원형을 만드는게 좋음(그래야 프레임으로 남음)

-> 12*12 박스를 불러오고 곡률 6으로 해서 안으로 넣기 -> 컨스트레인트 중앙으로 맞춰주기 -> 배경색 넣기

[SQL복습] 5주차

minju6544 — Fri, 17 Apr 2026 17:10:09 +0900

[5주차 - Pivot Table]

[문자가 들어있거나/ 값을 가지고 있는 않은 상황/ join한 테이블이 값을 가지고 있지 않을때]

방법 1: 없는 갑을 제외해주기

'NULL은 없다'는 의미 즉, if(----,----, null)->조건에 충족하지 않으면 없는 걸로 취급해줘!

1) avg (rating) average_of_rating : 'not given'을 0의 값으로 처리 즉, 0,0,5,3,4,3 /6으로 평균구함

2) Null 사용 -> 5,3,4,3/4로 없는 자료값으로 취급

>left join사용후, 자료가 없어 null로 표기되는 부분들을 없애고 싶다면, 'is not null'을 사용해 제거

방법2: 다른 값 대신 사용

(평균값 혹은 중앙값 등 대표값을 이용하여 대체해주기도 함)

a) 조건문 이용: if( rating>=1, rating, 대체값) -> 다른 값이 있을 때 유용
b) coalesce (age, 대체값) -> null 값일 때

b.age컬럼이 값을 가지고 있지 않다면, 모두 20으로 대체해줘!

[Pivot Table]

: 2개 이상의 기준으로 데이터를 집계할 때, 보기 쉽게 배열하여 보여주는 것

[실습]

음식점별 시간별 주문건수 Pivot Table 뷰 만들기 (15-20시 사이, (시간은 앞 두글자만)20시 주문건수 기준 내림차순)

select restaurant_name, . -> 첫 행
max(if(hh='15', cnt_order, 0)) "15", -> max를 무조건 붙여야함
max(if(hh='16', cnt_order, 0)) "16",
max(if(hh='17', cnt_order, 0)) "17",
max(if(hh='18', cnt_order, 0)) "18",
max(if(hh='19', cnt_order, 0)) "19",
max(if(hh='20', cnt_order, 0)) "20"
from
(
select a.restaurant_name,
substring(b.time, 1, 2) hh,
count(1) cnt_order
from food_orders a inner join payments b on a.order_id=b.order_id
where substring(b.time, 1, 2) between 15 and 20
group by 1, 2
) a
group by 1 ->max/ sum/ avg처럼 계산하는 함수가 들어가면 꼭 그룹해줘야함
order by 7 desc

[window 함수]

: 각 행의 관계를 정의하기 위한 함수로 그룹 내의 연산을 쉽게 만들어줌

=> 행은 그대로 유지한 채, 순위, 누적합, 이전값 비교 등을 계산

[구조]

window_function (argument) over (partiton by 그룹 기준 컬럼 order by 정렬기준

-window_function: 기능 명 사용 (sum, avg, rank등)

-argument: 함수에 따라 작성하거나 생략

-partiton by: 그룹을 나누기 위한 기준 (group by와 유사)

-order by: window function 을 적용할 때 정렬 할 컬럼 기준

[실습]

음식 타입별로 주문 건수가 가장 많은 상점 3개씩 조회하기

select cuisine_type,
       restaurant_name,
       order_count,
       ranking
from
(
select cuisine_type,
       restaurant_name,
       rank() over (partition by cuisine_type order by order_count desc) rankig,
       order_count
from
(
select cuisine_type, restaurant_name, count(1) order_count
from food_orders
group by 1, 2
) a
) b
where ranking<=3
order by 1, 4

1.음식타입별, 음식점별 주문 건수 집계

2. Rank 함수 적용 -> 계산 대상이 없고 순위를 메기는 거기 때문에 ()안은 비워두기

3. 3위까지 조회, 음식타입별, 순위별로 정렬

[실습]

각 음식점의 주문건이 해당 음식 타입에서 차지하는 비율을 구하고, 주문건이 낮은 순으로 정렬했을 때 누적 합 구하기

SELECT
    cuisine_type,
    restaurant_name,
    cnt_order,
    SUM(cnt_order) OVER (PARTITION BY cuisine_type) AS sum_cuisine,
    SUM(cnt_order) OVER ( PARTITION BY cuisine_type ORDER BY cnt_order) AS cum_cuisine
FROM (
    SELECT
        cuisine_type,
        restaurant_name,
        COUNT(1) AS cnt_order
    FROM food_orders
    GROUP BY 1, 2
) a
ORDER BY cuisine_type, cnt_order;

[날짜 데이터]

date (컬럼명): 문자 형식의 데이터를 날짜 형식의 데이터로 변경

date_format(date(컬럼명), (%Y/ %M/ %D/%W))

L데이트를 형식화 해줘!

예)

select date(date) date_type,
       date_format(date(date), '%Y') "년",
       date_format(date(date), '%m') "월",
       date_format(date(date), '%d') "일",
       date_format(date(date), '%w') "요일"
from payments

요일: 0은 일요일, 1은 월요일을 의미

[실습]

년도별 3월의 주문건수 구하기

select date_format(date(date), '%Y') "년",
       date_format(date(date), '%m') "월",
       date_format(date(date), '%Y%m') "년월",
       count(1) "주문건수"
from food_orders a inner join payments b on a.order_id=b.order_id
where date_format(date(date), '%m')='03'
group by 1, 2,3
order by 1

[SQL복습]-4주차_Subquery, Join

minju6544 — Fri, 17 Apr 2026 15:30:32 +0900

[4주차 - Subquery, Join, ]

[Subquery]

= 수학계산에 있어 '괄호'와 같은 역할

= 여러번 연산을 진행할 때 유용

구조:

select 컬럼1, 컬럼 2
from (
select 컬럼 1, 컬럼2
from 테이블
) a

예시-

'음식 주문시간이 25분보다 초과한 시간을 가져오기->over_time이 0보다 크면 over_time 그렇지 않으면 0'

select order_id, restaurant_name, if(over_time>0, over_time, 0) over_time
from
(
select order_id, restaurant_name, food_preparation_time-25 over_time
from food_orders
) a

실습

a) 음식점의 평균 단가별 segmaentation을 진행, 그룹에 따라 수수료 연산

(-5000원 미만:0.5%, -20000원 미만:1%, -30000원 미만:2%, 30000원 초과 3%)

select restaurant_name,
       price_per_plate*ratio_of_add "수수료"
from
(
select restaurant_name,
       case when price_per_plate<5000 then 0.005
            when price_per_plate between 5000 and 19999 then 0.01
            when price_per_plate between 20000 and 29999 then 0.02
            else 0.03 end ratio_of_add,
       price_per_plate
from
(
select restaurant_name, avg(price/quantity) price_per_plate
from food_orders
group by 1
) a
) b

1. 음식점 그룹별로 평균 단가 구하기

2. 평균 단가에 따라 수수료율 구하기

3. 평균 단가와 수수료율 곱하기 -> 평균 단가별 수수료 연산

b) 음식점의 지역과 평균 배달 시간으로 segmaentation 하기

(지역은 앞 2글자만, 평균배달시간에 따라 <=20, 20<x<=30,>30으로 구분)

select restaurant_name,
sido,
avg_delivery_time,
case when avg_delivery_time<=20 then '<=20'
when avg_delivery_time>20 and avg_delivery_time<=30 then '20<x<=30'
else '>30' end delivery_time_segment
from
(
select restaurant_name,
substr(addr, 1, 2) sido,
avg(delivery_time) avg_delivery_time
from food_orders
group by 1, 2
) a

1. 주소 앞 두글자 추출, 평균 배달 시간 구하기

2. 평균 배달 시간에 따른 입력값 넣기

c) 음식 타입별 총 주문수량과 음식점 수를 연산하고, 주문수량과 음식점수 별 수수료율 산정

(음식점 수 5개 이상, 총 주문수 30개 이상 -> 수수료 0.05%

음식점 수 5개 이상, 총 주문수 30개 미만 ->수수료 0.08%

음식점 수 5개 미만, 총 주문수 30개 이상 -> 수수료 1%

음식점 수 5개 미만, 총 주문수 30개 미만 ->수수료 2%)

select cuisine_type,
       total_quantity,
       count_res,
       case when count_res>=5 and total_quantity>=30 then 0.005
            when count_res>=5 and total_quantity<30 then 0.008
            when count_res<5 and total_quantity>=30 then 0.01
            when count_res<5 and total_quantity<30 then 0.02 end rate
from
(
select cuisine_type,
       sum(quantity) total_quantity,
       count(distinct restaurant_name) count_res
from food_orders
group by 1
) a

1. 음식타입별로 주문수량을 합해 (sum)총 주문수량을 구하고, 음식점 수 (count)구하기

2. 조건에 따른 수수료율 산정

[join]

= 여러 테이블에서 데이터를 불러 하나의 테이블로 합쳐주는 기능

[left join Vs inner join]

left join은 하나의 테이블 값이 없더라고 모두 조회됨, inner join은 교집합만 들고옴

구조:

<left join>
select 조회 할 컬럼
from 테이블1 a left join 테이블 2 b on 테이블 a.공통컬럼명 = b.공통컬럼명

<inner join>
select 조회 할 컬럼
from 테이블1 a inner join 테이블 2 b on 테이블 a.공통컬럼명 = b.공통컬럼명

실습

a) 한국 음식의 주문별 결제 수단과 수수료율 조회

(조회 컬럼: 주문 번호, 식당 이름, 주문 가격, 결제 수단, 수수료율/ 결제 정보가 없는 경우도 포함하여 조회)

select f.order_id,
       f.restaurant_name,
       f.price,
       p.pay_type,
       p.vat
from food_orders f left join payments p on f.order_id = p.order_id
where cuisine_type = 'Korean'

1. 공통컬럼인 'order_id'를 기준으로 left join

2. 한국 음식 조건 넣기

3. 원하는 조회컬럼 넣기

b) 50세 이상 고객의 연령에 따라 할인율 구하고, 음식 타입별로 원래 가격합과 할인 적용 가격 합 각각 구하기

(조회 컬럼: 음식 타입, 원래 가격, 할인 적용 가격, 할인 가격), 할인: 나이-50 *0.005, 고객 정보가 없는 경우도 포함,

할인 금액이 큰순으로 정렬)

select cuisine_type,
       sum(price) price,
       sum(price*discount_rate) discounted_price
from
(
select f.cuisine_type,
       f.price,
       c.age,
       (c.age-50)*0.005 discount_rate
from food_orders f left join customers c on f.customer_id = c.customer_id
where c.age >= 50
) a
group by 1
order by sum(price*discount_rate) desc

1. food_orders 와 customers 를 left join을 사용해 합하기

2. 조건에 50세 이상 넣기

3. 원하는 컬럼 넣기

4. 할인율 구하기 ( (age -50 )*0.005 discount)

5. 원래 가격 *할인율= 할인 적용 가격

6. 원래 가격합과 할인적용 가격 합 구하기

7. 정렬