profile
Product Design
post-thumbnail

[디자인 나침반 UI 챌린지 - Day 4] 날씨 페이지

음악 재생 페이지✔ 포함돼야 하는 내용▪ 시간별 날씨▪ 일주일 날씨▪ 최저/최고 온도▪ 지역

2025년 3월 17일
·
0개의 댓글
·
post-thumbnail

[디자인 나침반 UI 챌린지 - Day 4] 음악 재생 페이지

회원가입 및 로그인 페이지✔ 포함돼야 하는 내용▪ 음악 제목▪ 음악가▪ 음악 커버▪ 음악 타임라인▪ 재생▪ 랜덤 재생▪ 반복 재생▪ 뒤로가기▪ 앞으로가기

2025년 3월 16일
·
0개의 댓글
·
post-thumbnail

[디자인 나침반 UI 챌린지 - Day 3] 계산기

계산기 페이지✔ 포함돼야 하는 내용▪ 0~9 숫자▪ AC▪ +/-▪ %▪ 더하기 빼기 곱하기 나누기▪ =▪ .

2025년 3월 16일
·
0개의 댓글
·
post-thumbnail

[디자인 나침반 UI 챌린지 - Day 2] 온보딩 페이지

온보딩 페이지✔ 포함돼야 하는 내용▪ 환영하는 메시지 포함▪ ‘언제든 결제’ 내용 포함▪ ‘편하게 송금’ 내용 포함▪ ‘신중한 투자’ 내용 포함▪ 로그인 버튼▪ 회원가입 버튼▪ 넘어가기 버튼▪ 컬러▪ 마진값 : 24▪ 폰트 스타일 : Bold, Semibold, Med

2025년 3월 16일
·
0개의 댓글
·
post-thumbnail

[디자인 나침반 UI 챌린지 - Day 1] 회원가입, 로그인 페이지

✔ 포함돼야 하는 내용▪ 이메일▪ 이름▪ 비밀번호▪ 비밀번호 확인▪ 컬러 ▪ 마진값 : 24▪ 폰트 스타일 : Bold, Semibold, Regular아좌잣 👊

2025년 3월 16일
·
0개의 댓글
·
post-thumbnail

[UX] 정보 구조 (Information Archiecture)

웹사이트, 앱 등 소프트웨어 내의 정보를 조직화하고 구조화하는 방식을 말한다.이는 사용자가 정보를 쉽게 찾을 수 있도록 도와주며, UX의 필수 요소 중 하나이다.서비스에서 제공하는 정보 구성에 관여하여, 어떤 절차에 거쳐 서비스에 접근하는지 시각적으로 표현하는 것IA는

2024년 9월 30일
·
0개의 댓글
·
post-thumbnail

[UI] 모달 (Modal)

모달은 사용자의 이목을 끌기 위해 사용하는 대화형 UI 요소 / 화면 전환 기법이다. 사용자가 모달 내의 정보를 주시하거나, 요구되는 작업을 완료하도록 강제하는 역할을 수행한다. 모달 창은 별도의 페이지가 아니라, 사용자가 기존에 하고 있던 작업창에서 오버레이 형태로

2024년 9월 30일
·
0개의 댓글
·
post-thumbnail

[UX] User Flow, UX Flow, Flow Chart

User flow는 제품을 통한 사용자의 움직임을 설명하고, 진입에서 최종 상호작용에 이르기까지 사용자가 수행하는 모든 단계를 의미한다.사용자가 의미 있는 목표를 달성하기 위해 거쳐야하는 단계들1\. User Goal 작성하기User Goal : 사용자가 이루고자하는

2024년 9월 28일
·
0개의 댓글
·
post-thumbnail

[UX] 어포던스 (Affordance)

어포던스라는 용어는 제임스 깁슨이 처음 사용하였는데, 그 정의는 다음과 같다.행위자와 환경 간의 관계, 혹은 이 둘 사이의 관계 속에서 존재하는 행위의 가능성같은 행위라도 마주하고 있는 행위자에 따라 다른 어포던스를 제공하며, 행위자의 능력에 따라 무한히 제공행동 유발

2024년 9월 27일
·
0개의 댓글
·
post-thumbnail

[UI] 탭바 (Tab Bar)

탭바는 스크린의 맨 아래에 위치하며, 사용자에게 앱이 제공하는 정보나 기능의 이해를 도움사용자가 앱의 다른 부분 사이를 쉽게 이동할 수 있도록 돕는 하단 바주로 앱의 주요 기능, 화면 사이를 이동하는데 도움이 됨iOS에서는 Tab bar이라 하고, Material De

2024년 9월 27일
·
0개의 댓글
·
post-thumbnail

[Google Material Design] 버튼

동일한 화면에서 다양한 버튼 유형을 사용하여 사용자의 주의를 끌 수 있음총 9가지 유형각각의 버튼에 high, medium, low emphasis가 있음각 버튼마다 집중도가 다르다High emphasis페이지의 목적에 맞는 주요 기능들에 부여한다.9\. Extende

2024년 9월 23일
·
0개의 댓글
·
post-thumbnail

[Google Material Design] 모바일 UX UI 디자인 레이아웃 기본 사항

레이아웃을 사용하여 사용자가 수행하려는 작업에 집중할 것GMD 에서는 총 5가지 레이아웃 사이즈\-compact화면 너비가 600dp 언더ex) 핸드폰\-medium화면 너비가 600dp 이상 839dp 이하ex) 태블릿, 폴더블 폰\-expanded화면 너비가 840

2024년 9월 23일
·
0개의 댓글
·
post-thumbnail

[Google Material Design] 모바일 UX UI 디자인 상호작용 요소

구성 요소 또는 UI 요소의 상호 작용 상태를 보여줌selection, hover 두 가지가 있는데 이 둘이 결합될 수 있음사용자가 작동시킬 수 있는 버튼과 작동시킬 수 없는 버튼을 구분할 것Enabled는 다음과 같은 states에 적용시킬 수 있다ButtonFAB

2024년 9월 22일
·
0개의 댓글
·
post-thumbnail

스포티파이 분석

SPOTIFY사용자가 누락된 정보를 찾아보려는 욕구사용자가 어떤 정보를 알고 있고, 어떤 정보를 모르는지에 대한 궁금증을 자극한다.이런 식으로 스포티파이에서 wrapped가 업데이트되면 알림이 온다.You listened to 5,652 songs in 2022What

2024년 9월 14일
·
0개의 댓글
·
post-thumbnail

사실 이것도 디자인입니다 - 토스와 넷플릭스, 틴더

한 페이지에 하나의 액션사용자로 하여금 해당 페이지에서 어떤 액션을 할지 고민하는 시간을 단축해준다.(목적 달성을 위한 시간을 줄여줌) - 좋은 사용자 경험 예시반면, 한 페이지에 지나치게 많은 정보를 지니고 있으면, 페이지 당 체류 시간이 길어져 좋지 않은 사용자 경

2024년 9월 6일
·
0개의 댓글
·