Daily journal34 디지털 접점 종합 피그마 기초 스터디로그 · 10 디지털 접점 종합행동에서 기기까지, 한 바퀴7일차부터 9일차까지 디지털 접점을 세 번에 나눠 배웠는데,정리해보니 하나의 순환이더라고요.오늘은 이 세 번을 이어서 접점 설계가 어떻게 한 바퀴 도는지 정리해봤어요.ONE LAP접점 설계 한 바퀴1여정 읽기행동에서 접점을 찾아요 (7일차)2진단·재구성막힌 접점을 근거로 고쳐요 (8일차)3기기로 확장폰·태블릿·데스크톱에 맞춰요 (9일차)4일관성 점검어디서 만나도 같은 브랜드인지 봐요01 · READ THE JOURNEY여정 읽기행동에서 접점을 찾아요모든 건 화면이 아니라 사용자의 행동에서 시작해요.행동 단계를 먼저 그리고, 단계마다 어떤 접점이 필요한지 정해요.행동 여정에서 막힌 곳 찾기발견›탐색›결정›결제›재방문결제에서 가장 많.. 2026. 10. 15. 반응형 및 디바이스 접점 설계 피그마 기초 스터디로그 · 09 반응형 및디바이스 접점 설계8일차까지는 화면 하나를 잘 만드는 이야기였는데,오늘은 같은 서비스가 폰, 태블릿, 데스크톱에서 어떻게 달라져야 하는지를 배웠어요.화면을 줄이고 늘리는 게 아니라, 기기마다 만나는 순간을 다시 설계하는 거더라고요.TODAY'S BASICS오늘 배운 네 가지1디바이스별 상황기기마다 쓰는 상황이 달라요2브레이크포인트화면 폭에 따라 그리드가 바뀌어요3늘고 줄어드는 규칙오토 레이아웃으로 반응하게 만들기4우선순위와 일관성기기에 맞게 덜어내되 같은 브랜드로01 · DEVICE CONTEXT디바이스별 상황기기마다 쓰는 상황이 달라요반응형은 화면 크기만의 문제가 아니에요.기기마다 사용자가 놓인 상황과 입력 방식이 달라서, 접점도 달라져야 해요.기기별 접점 상황.. 2026. 10. 14. 디지털 접점 사례 분석 및 재구성 피그마 기초 스터디로그 · 08 디지털 접점사례 분석 및 재구성7일차에서 접점을 설계하는 법을 배웠다면,오늘은 이미 만들어진 서비스를 뜯어보고 다시 짜보는 연습을 했어요.남의 화면을 보는 눈이 있어야 내 화면도 고칠 수 있더라고요.TODAY'S BASICS사례 분석의 네 단계1사례 고르기분석할 서비스와 목표 정하기2접점 분해하기화면을 접점 단위로 쪼개 보기3문제 진단하기막히는 접점과 이유 찾기4재구성하기근거를 달아 다시 설계하기01 · PICK A CASE사례 고르기분석할 서비스와 목표 정하기분석은 무엇을 분석할지 고르는 데서 시작해요.아무 서비스나 고르면 볼 게 흩어져서, 기준을 먼저 세워요.사례 선정 체크리스트✓사용자의 목표가 한 문장으로 말해지는가✓접점이 세 개 이상 이어지는 흐름인가✓내가 직접 써.. 2026. 10. 13. 사용자 행동 기반 디지털 접점 설계 피그마 기초 스터디로그 · 07 사용자 행동 기반디지털 접점 설계6일차까지는 화면을 만드는 재료와 시스템을 배웠는데,오늘은 그 화면이 언제, 어디에 필요한지를 정하는 법을 배웠어요.화면을 먼저 그리는 게 아니라, 사용자의 행동을 먼저 보는 거예요.TODAY'S BASICS오늘 배운 네 가지1행동 여정 그리기사용자가 실제로 거치는 단계 보기2행동 신호 읽기클릭·스크롤·이탈이 말해주는 것3단계별 접점 설계행동 단계마다 필요한 화면 정하기4검증하고 고치기행동 데이터로 다시 확인하기01 · BEHAVIOR JOURNEY행동 여정 그리기사용자가 실제로 거치는 단계 보기디지털 접점은 사용자의 행동 단계에서 출발해요.어떤 화면이 필요한지는 사용자가 어떤 행동을 하는지 알아야 정할 수 있어요.가상의 쇼핑 앱 행동 여정.. 2026. 10. 12. 디자인 시스템 기초 및 확장 피그마 기초 스터디로그 · 06 디자인 시스템 기초 및 확장1일차 프레임부터 5일차 컬러 변수까지,따로따로 배운 것들이 오늘 "디자인 시스템"이라는 하나의 이름으로 묶이더라고요.오늘은 이걸 어떻게 공유하고 키워나가는지까지 배웠어요.TODAY'S BASICS오늘 배운 네 가지1디자인 시스템이란조각들이 하나로 묶인 일관된 체계2구성 요소기초(Foundation)와 컴포넌트3라이브러리로 공유한 파일을 넘어 여러 곳에서 쓰기4확장하기기존 체계를 깨지 않고 더하기01 · WHAT IS A DESIGN SYSTEM디자인 시스템이란조각들이 하나로 묶인 일관된 체계지금까지 배운 프레임, 오토 레이아웃, 타이포, 컴포넌트, 컬러가 사실 전부 디자인 시스템의 재료였어요.이 재료들이 서로 연결되어 하나의 체계로 묶인 게 디.. 2026. 10. 8. 컬러 및 스타일 시스템 설계 피그마 기초 스터디로그 · 05 컬러 및 스타일 시스템 설계3일차에서 글자를 스타일로 저장했다면, 오늘은 색도 체계적으로 관리하는 법을 배웠어요.스타일과 변수가 뭐가 다른지부터 헷갈렸는데, 다크모드까지 보고 나니 이해가 되더라고요.TODAY'S BASICS오늘 배운 네 가지1컬러 스타일자주 쓰는 색을 저장해두기2컬러 변수하나의 이름에 여러 값을 담기3시맨틱 네이밍색 이름이 아니라 역할로 이름 붙이기4다크모드 대응모드 전환으로 전체 화면 바꾸기01 · COLOR STYLES컬러 스타일자주 쓰는 색을 저장해두기3일차 글자 스타일과 같은 원리예요.자주 쓰는 색을 스타일로 저장해두면, 매번 색상 코드를 다시 입력할 필요가 없어요.저장된 컬러 스타일 예시 Brand/Primary#F24E1E Text/Defaul.. 2026. 10. 7. 이전 1 2 3 4 ··· 6 다음
