컴포넌트3 반응형 및 디바이스 접점 설계 피그마 기초 스터디로그 · 09 반응형 및디바이스 접점 설계8일차까지는 화면 하나를 잘 만드는 이야기였는데,오늘은 같은 서비스가 폰, 태블릿, 데스크톱에서 어떻게 달라져야 하는지를 배웠어요.화면을 줄이고 늘리는 게 아니라, 기기마다 만나는 순간을 다시 설계하는 거더라고요.TODAY'S BASICS오늘 배운 네 가지1디바이스별 상황기기마다 쓰는 상황이 달라요2브레이크포인트화면 폭에 따라 그리드가 바뀌어요3늘고 줄어드는 규칙오토 레이아웃으로 반응하게 만들기4우선순위와 일관성기기에 맞게 덜어내되 같은 브랜드로01 · DEVICE CONTEXT디바이스별 상황기기마다 쓰는 상황이 달라요반응형은 화면 크기만의 문제가 아니에요.기기마다 사용자가 놓인 상황과 입력 방식이 달라서, 접점도 달라져야 해요.기기별 접점 상황.. 2026. 10. 14. 디자인 시스템 기초 및 확장 피그마 기초 스터디로그 · 06 디자인 시스템 기초 및 확장1일차 프레임부터 5일차 컬러 변수까지,따로따로 배운 것들이 오늘 "디자인 시스템"이라는 하나의 이름으로 묶이더라고요.오늘은 이걸 어떻게 공유하고 키워나가는지까지 배웠어요.TODAY'S BASICS오늘 배운 네 가지1디자인 시스템이란조각들이 하나로 묶인 일관된 체계2구성 요소기초(Foundation)와 컴포넌트3라이브러리로 공유한 파일을 넘어 여러 곳에서 쓰기4확장하기기존 체계를 깨지 않고 더하기01 · WHAT IS A DESIGN SYSTEM디자인 시스템이란조각들이 하나로 묶인 일관된 체계지금까지 배운 프레임, 오토 레이아웃, 타이포, 컴포넌트, 컬러가 사실 전부 디자인 시스템의 재료였어요.이 재료들이 서로 연결되어 하나의 체계로 묶인 게 디.. 2026. 10. 8. 한 번 만들고 계속 쓰는 UI 컴포넌트 피그마 기초 스터디로그 · 04 한 번 만들고 계속 쓰는UI 컴포넌트2일차에서 오토 레이아웃으로 버튼을 만들었는데,오늘은 그 버튼을 여러 화면에서 계속 재사용하는 법을 배웠어요.피그마의 진짜 힘은 여기서부터 시작되는 것 같아요.TODAY'S BASICS오늘 배운 네 가지1컴포넌트 만들기디자인을 재사용 가능한 원본으로2인스턴스원본과 연결된 복사본 가져다 쓰기3컴포넌트 속성상태별 변형을 한 세트로 관리4전체 반영원본 수정이 모든 사본에 퍼짐01 · CREATE A COMPONENT컴포넌트 만들기디자인을 재사용 가능한 원본으로만들어둔 버튼을 컴포넌트로 지정하면, 그게 복제해서 계속 쓸 수 있는 "원본"이 돼요.보라색 다이아몬드 아이콘이 붙으면 컴포넌트가 됐다는 표시예요.일반 요소 → 컴포넌트버튼→버튼왜 중요한.. 2026. 10. 2. 이전 1 다음
