오즈코딩스쿨29 디지털 접점 종합 피그마 기초 스터디로그 · 10 디지털 접점 종합행동에서 기기까지, 한 바퀴7일차부터 9일차까지 디지털 접점을 세 번에 나눠 배웠는데,정리해보니 하나의 순환이더라고요.오늘은 이 세 번을 이어서 접점 설계가 어떻게 한 바퀴 도는지 정리해봤어요.ONE LAP접점 설계 한 바퀴1여정 읽기행동에서 접점을 찾아요 (7일차)2진단·재구성막힌 접점을 근거로 고쳐요 (8일차)3기기로 확장폰·태블릿·데스크톱에 맞춰요 (9일차)4일관성 점검어디서 만나도 같은 브랜드인지 봐요01 · READ THE JOURNEY여정 읽기행동에서 접점을 찾아요모든 건 화면이 아니라 사용자의 행동에서 시작해요.행동 단계를 먼저 그리고, 단계마다 어떤 접점이 필요한지 정해요.행동 여정에서 막힌 곳 찾기발견›탐색›결정›결제›재방문결제에서 가장 많.. 2026. 10. 15. 사용자 행동 기반 디지털 접점 설계 피그마 기초 스터디로그 · 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. 한 번 만들고 계속 쓰는 UI 컴포넌트 피그마 기초 스터디로그 · 04 한 번 만들고 계속 쓰는UI 컴포넌트2일차에서 오토 레이아웃으로 버튼을 만들었는데,오늘은 그 버튼을 여러 화면에서 계속 재사용하는 법을 배웠어요.피그마의 진짜 힘은 여기서부터 시작되는 것 같아요.TODAY'S BASICS오늘 배운 네 가지1컴포넌트 만들기디자인을 재사용 가능한 원본으로2인스턴스원본과 연결된 복사본 가져다 쓰기3컴포넌트 속성상태별 변형을 한 세트로 관리4전체 반영원본 수정이 모든 사본에 퍼짐01 · CREATE A COMPONENT컴포넌트 만들기디자인을 재사용 가능한 원본으로만들어둔 버튼을 컴포넌트로 지정하면, 그게 복제해서 계속 쓸 수 있는 "원본"이 돼요.보라색 다이아몬드 아이콘이 붙으면 컴포넌트가 됐다는 표시예요.일반 요소 → 컴포넌트버튼→버튼왜 중요한.. 2026. 10. 2. 피그마에서 타이포 다루기 피그마 기초 스터디로그 · 03 피그마에서 타이포 다루기BX 3일차에서 폰트의 역할을 개념으로 배웠다면,오늘은 그걸 피그마 화면 안에서 실제로 구현하는 법을 배웠어요.TODAY'S BASICS오늘 배운 네 가지1위계크기·굵기로 읽는 순서 만들기2글자 스타일자주 쓰는 설정을 저장해두기3글자 규칙줄간격·자간을 통일하는 기준4섹션여러 프레임을 묶어 정리하기01 · HIERARCHY위계크기·굵기로 읽는 순서 만들기BX 3일차에서 배운 "위계" 개념을, 피그마에서는 실제 숫자 값으로 구현해요.제목·부제목·본문마다 크기와 굵기를 다르게 줘서 읽는 순서를 만들어요.위계 예시제목 · 24px Bold부제목 · 16px Semibold본문 · 14px Regular. 이렇게 세 단계만 나눠도 화면에 순서가 생겨요.왜 중.. 2026. 10. 1. 이전 1 2 3 4 5 다음
