Daily journal34 한 번 만들고 계속 쓰는 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. 레이아웃 규칙, 오토 레이아웃과 허그 · 필 · 픽스 피그마 기초 스터디로그 · 02 레이아웃 규칙오토 레이아웃과 허그 · 필 · 픽스1일차에서 프레임과 레이어를 배웠는데,오늘은 그 안의 요소들을 자동으로 정리해주는 기능을 배웠어요.이름부터 낯선 "허그·필·픽스"까지 정리해볼게요.TODAY'S BASICS오늘 배운 네 가지1오토 레이아웃요소를 자동으로 정리해주는 기능2크기와 정렬요소들의 기준선과 간격 맞추기3UI 요소버튼처럼 재사용하는 조합 만들기4허그 · 필 · 픽스크기가 반응하는 세 가지 방식01 · AUTO LAYOUT오토 레이아웃요소를 자동으로 정리해주는 기능오토 레이아웃을 켜면 요소들 사이 간격과 정렬을 자동으로 맞춰줘요.하나씩 손으로 옮기지 않아도 알아서 줄이 맞아요.적용 전 vs 후BEFOREABC→AFTER (오토 레이아웃)ABC왜 중요한가요.. 2026. 10. 1. 프레임, 레이어, 그리고 그리드 피그마 기초 스터디로그 · 01 프레임, 레이어, 그리고 그리드오늘부터 피그마를 완전 기초부터 배우기 시작했어요.BX디자인이 "왜, 무엇을"을 다뤘다면, 이제부턴 그걸 손으로 어떻게 만드는지도 같이 기록해보려고요.TODAY'S BASICS오늘 배운 네 가지1프레임작업을 담는 캔버스2레이어 · 눈 아이콘쌓인 요소를 정리하고 숨기기3레이아웃 그리드정렬 기준을 잡아주는 격자4이름 바꾸기 · 단축키작업 속도를 빠르게 만드는 습관01 · FRAME프레임작업을 담는 캔버스프레임은 디자인이 들어갈 화면 하나의 틀이에요.웹페이지 화면 하나, 모바일 화면 하나가 각각 프레임이라고 보면 돼요.프레임 예시FRAME왜 중요한가프레임 안에 넣어야 그 화면 크기(모바일, 데스크탑 등) 기준으로 작업할 수 있어요.프레임 밖에 그냥.. 2026. 9. 30. 21일의 기록무엇을 배웠고, 어떻게 달라졌나 BX디자인 스터디로그 · 회고 21일의 기록무엇을 배웠고, 어떻게 달라졌나하루하루 정리할 땐 몰랐는데, 한 번에 이어서 보니 배운 게 하나의 흐름이더라고요.오늘은 1일차부터 21일차까지를 되짚으면서, 제 생각이 어떻게 바뀌었는지도 같이 적어봤어요.21일간의 기록3단계의 흐름1개의 큰 질문THE BIG SHIFT가장 크게 바뀐 건 '질문'이었어요배운 지식보다, 머릿속에 떠오르는 질문이 먼저 달라졌어요.초반"이 디자이너들, 뭐가 다른 거야?"중반"근데 왜 리서치부터 해야 하지?"지금"이 결정의 근거가 뭐지?"WHAT I LEARNED세 단계로 나눠서 보면재료를 익히고, 근거를 배우고, 그걸 하나로 잇는 순서로 흘러왔어요.PHASE 11 – 8일차재료를 익히던 시기"디자이너가 다루는 건 뭐고, 브랜드는 뭘로 .. 2026. 9. 29. 리서치를 디자인 근거로 바꾸는 법 BX디자인 스터디로그 · 21 리서치를 디자인 근거로 바꾸는 법20일차에서 전략을 한 문장으로 만들었다면,오늘은 그 문장을 실제 디자인 결정으로 옮기는 이야기였어요."왜 이 색이에요?"라는 질문에 "느낌이 좋아서요"가 아니라"리서치에서 이게 나와서요"라고 답하는 법이에요.FOUR STEPS리서치가 디자인 근거가 되기까지1디자인 질문으로 바꾸기발견을 "어떻게 하면?"으로 뒤집기2디자인 요소에 대응시키기컬러·타이포·이미지·공간에 나눠 담기3근거 문장으로 적기리서치 → 결정 → 이유를 한 줄로4근거로 시안 검증하기연결 안 되는 요소는 걸러내기01 · TURN INSIGHT INTO A QUESTION디자인 질문으로 바꾸기발견을 "어떻게 하면?"으로 뒤집기인사이트는 발견이라서 그 자체로는 디자인이 되지 않아요... 2026. 9. 28. 이전 1 2 3 4 5 6 다음
