본문 바로가기

오즈코딩스쿨29

레이아웃 규칙, 오토 레이아웃과 허그 · 필 · 픽스 피그마 기초 스터디로그 · 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.
리서치를 디자인 근거로 바꾸는 법 BX디자인 스터디로그 · 21 리서치를 디자인 근거로 바꾸는 법20일차에서 전략을 한 문장으로 만들었다면,오늘은 그 문장을 실제 디자인 결정으로 옮기는 이야기였어요."왜 이 색이에요?"라는 질문에 "느낌이 좋아서요"가 아니라"리서치에서 이게 나와서요"라고 답하는 법이에요.FOUR STEPS리서치가 디자인 근거가 되기까지1디자인 질문으로 바꾸기발견을 "어떻게 하면?"으로 뒤집기2디자인 요소에 대응시키기컬러·타이포·이미지·공간에 나눠 담기3근거 문장으로 적기리서치 → 결정 → 이유를 한 줄로4근거로 시안 검증하기연결 안 되는 요소는 걸러내기01 · TURN INSIGHT INTO A QUESTION디자인 질문으로 바꾸기발견을 "어떻게 하면?"으로 뒤집기인사이트는 발견이라서 그 자체로는 디자인이 되지 않아요... 2026. 9. 28.
리서치를 하나의 브랜드 전략으로 연결하기 BX디자인 스터디로그 · 20 리서치를 하나의 브랜드 전략으로 연결하기리서치(9·13·14·15일차), 페르소나(17일차), 포지셔닝(10·18일차),원칙(19일차)까지 배웠는데, 이걸 따로따로 들고 있으면 아무 소용이 없더라고요.오늘은 이 조각들을 하나로 잇는 법을 배웠어요.✨ 스터디로그 20일차 기념FOUR STEPS조각을 전략으로 잇는 네 단계1조각 모으기흩어진 결과물을 한자리에 펼쳐놓기2하나의 축으로 꿰기조각들이 공통으로 가리키는 지점 찾기3전략 문장으로 압축한 문장으로 말할 수 있게 줄이기4실행 기준으로 되돌리기앞으로의 모든 결정에 다시 쓰기01 · GATHER THE PIECES흩어진 조각 모으기결과물을 한자리에 펼쳐놓기리서치, 페르소나, 포지셔닝, 원칙이 각각 따로 존재하면 서로 참고가 안 .. 2026. 9. 23.
약속은 경험으로 증명되고,선택은 원칙을 행동으로 만든다 BX디자인 스터디로그 · 19 약속은 경험으로 증명되고,선택은 원칙을 행동으로 만든다오늘은 문장 세 개가 전부였는데, 곱씹을수록 무거운 하루였어요.브랜드가 하는 말이 왜 자꾸 공허하게 느껴지는지, 그 이유를 알게 됐어요.THREE STATEMENTS오늘의 세 문장1약속은 경험으로 증명됩니다2전부 잘 할 수 없으니, 하나를 고릅니다3원칙은 행동으로 씁니다01약속은 경험으로 증명됩니다말이 아니라 접점에서 느껴져야 진짜가 된다브랜드가 아무리 좋은 말을 내걸어도, 실제 접점에서 그게 느껴지지 않으면 공허한 문구일 뿐이에요.12일차에서 배운 접점 개념이 여기서 다시 등장해요.말 vs 경험"빠른 배송을 약속합니다"(홈페이지 문구)→실제로 하루 만에 도착(고객이 겪는 순간)왜 중요한가약속만 하고 경험이 그에 못 미치.. 2026. 9. 22.
포지셔닝 맵 제대로 그리기 BX디자인 스터디로그 · 18 포지셔닝 맵 제대로 그리기10일차에서 포지셔닝 맵을 잠깐 다뤘는데,오늘은 그걸 제대로 그리는 법을 배웠어요.가상의 셀럽 향수 브랜드를 예시로 같이 그려볼게요.FOUR STEPS포지셔닝 맵을 제대로 그리는 네 단계1축 정하기고객이 실제로 신경 쓰는 기준 고르기2경쟁사 찍기인식을 기준으로 위치시키기3현재 vs 목표지금 위치와 가고 싶은 위치 구분하기4빈틈 검증하기빈 자리가 진짜 기회인지 확인하기01 · CHOOSE THE AXES축 정하기고객이 실제로 신경 쓰는 기준 고르기아무 두 기준이나 골라 축으로 삼으면 안 돼요.17일차 페르소나의 선택 기준에서 실제로 나온 것으로 축을 세워야 해요.좋은 축 vs 나쁜 축❌ 임의로 고른 축"용량이 많다 ↔ 적다"→ 향수 구매 결정에 별 영.. 2026. 9. 21.