UI디자인7 Sketch 완전 정복 (Mac 환경, Symbol 활용, Git 연동) 5년 차 프리랜서로 부트캠프 강의 외주를 맡으면서 Sketch를 다시 잡았을 때, 솔직히 이건 예상 밖이었습니다. Figma가 대세인 지금 Sketch를 가르친다는 게 맞는 선택인지 반신반의했는데, 수강생 반응이 Figma 강의보다 훨씬 좋았거든요. Mac 환경에서 Sketch가 왜 여전히 유효한지, 어떤 상황에서 선택해야 하는지 제 경험을 토대로 정리해봤습니다.Mac 환경에서 Sketch가 살아남은 이유Sketch는 2010년 처음 등장했을 때부터 Photoshop 기반 UI 디자인 워크플로에 지쳐 있던 디자이너들에게 빠르게 퍼졌습니다. 저도 그 세대입니다. 당시 웹 화면 하나 그리려고 Photoshop 레이어를 수십 개 쌓던 방식과 비교하면, Sketch는 말 그대로 숨통이 트이는 경험이었습니다.지금.. 2026. 5. 24. 피그마 3D 캐러셀 (스마트 애니메이트, 자동재생, 마스킹) 직전 외주에서 메인 비주얼 캐러셀의 자동재생을 끈 것만으로 CTA 클릭률이 14%에서 22%로 뛰었습니다. 솔직히 이건 저도 예상 밖이었습니다. 그 경험 이후로 캐러셀을 설계할 때 완전히 다른 기준으로 접근하게 됐고, 피그마에서 3D 캐러셀을 구현하는 방법도 다시 들여다보게 됐습니다.스마트 애니메이트로 3D 전환 효과 만들기피그마에서 3D 캐러셀의 핵심은 스마트 애니메이트(Smart Animate)입니다. 스마트 애니메이트란 두 프레임 사이에서 동일한 레이어 이름을 가진 요소를 자동으로 감지해 위치·크기·불투명도 변화를 부드럽게 연결해주는 피그마 전용 트랜지션 방식입니다. 일반 디졸브나 슬라이드 전환과는 달리, 요소 하나하나가 마치 실제로 이동하는 것처럼 보이기 때문에 3D 회전 효과를 낼 때 특히 효과.. 2026. 5. 3. UX 법칙 실전 적용 (피츠의 법칙, 힉의 법칙, 밀러의 법칙) UX 법칙을 외우고 있다고 해서 좋은 디자인이 나올까요? 저는 이 질문에 솔직히 "아니오"라고 답합니다. 피츠의 법칙, 힉의 법칙, 밀러의 법칙. 이름은 익숙하지만 실제 프로젝트에서 어떻게 작동하는지 제대로 아는 디자이너는 생각보다 많지 않습니다. 직접 카드 앱 리디자인 프로젝트를 통해 세 법칙을 한꺼번에 적용해보고 나서야, 법칙은 외우는 것이 아니라 근거로 쓰는 것임을 실감했습니다.피츠의 법칙, 버튼 위치 하나가 바꾼 숫자들버튼을 크게 만들자는 말은 누구나 합니다. 그런데 왜 크게 만들어야 하는지 수치로 설명할 수 있는 디자이너는 얼마나 될까요?피츠의 법칙(Fitts' Law)은 1954년 심리학자 폴 피츠가 제시한 법칙으로, 목표물까지의 이동 시간은 거리에 비례하고 목표물의 크기에 반비례한다는 원리입.. 2026. 4. 27. UI 컬러 전략 (색상환, 배색 비율, 접근성) 솔직히 디자이너 초년 시절에는 컬러를 감각으로만 골랐습니다. "왠지 이 색이 예뻐 보인다"는 이유로 브랜드 컬러를 정했다가, 납품 직전에 접근성 기준 미달이라는 피드백을 받고 처음부터 다시 작업한 적도 있습니다. 그때 처음으로 컬러 이론이 실무에서 얼마나 중요한지 체감했습니다. 색상환 기반의 체계적인 배색과 WCAG 접근성 기준, 이 두 가지를 이해하고 나서야 컬러 작업이 훨씬 수월해졌습니다.색상환으로 시작하는 배색 설계일반적으로 컬러를 잘 고르려면 감각이 뛰어나야 한다고 알려져 있지만, 제 경험상 이건 절반만 맞는 말입니다. 감각보다 먼저 필요한 건 색상환(Color Wheel)에 대한 이해입니다. 색상환이란 빨강, 파랑, 노랑의 원색부터 이를 혼합한 2차색(주황, 초록, 보라), 그리고 3차색까지 색.. 2026. 4. 14. IA 설계 (역설계, 네비게이션, 사이트맵) 신규 서비스 IA를 처음 맡았을 때, 솔직히 어디서부터 손을 대야 할지 막막했습니다. 이론은 알고 있었지만 실제 설계 앞에서는 손이 굳어버렸습니다. 그때 경쟁사 앱 3개를 직접 뜯어보면서 상황이 달라졌습니다. IA(Information Architecture)는 책으로 익히는 것과 실제로 써보는 것 사이의 간극이 생각보다 크다는 걸 그제야 실감했습니다.역설계로 시작한 IA 공부일반적으로 IA를 공부할 때 이론서나 강의부터 접근하는 분들이 많은데, 저는 실제로 그 방법보다 역설계(Reverse Engineering)가 훨씬 효과적이었습니다. 역설계란 완성된 서비스를 분해하여 그 구조와 설계 의도를 파악하는 방법입니다. 건축물을 보고 도면을 역으로 그려보는 것과 비슷한 방식입니다.제가 직접 해본 방법은 이렇.. 2026. 4. 14. 와이어프레임 실무 (Figma 활용, 로우피델리티, 프로토타입 제작) 솔직히 저는 처음 프리랜서로 일하면서 클라이언트에게 바로 고화질 목업을 보여줬다가 크게 낭패를 본 적이 있습니다. 디자인 방향이 완전히 틀어져서 처음부터 다시 작업해야 했거든요. 그때 와이어프레임의 중요성을 뼈저리게 깨달았습니다. 일반적으로 와이어프레임은 시간 낭비라고 생각하는 분들도 있는데, 제 경험상 이 단계를 건너뛰면 오히려 전체 프로젝트 기간이 두 배로 늘어났습니다. 지금부터 실무에서 와이어프레임을 어떻게 활용하는지, 특히 Figma를 사용한 구체적인 작업 과정을 공유하겠습니다.와이어프레임의 개념과 실무 적용 가치와이어프레임(Wireframe)이란 웹사이트나 앱의 레이아웃과 구조를 시각화한 기본 설계도를 의미합니다. 쉽게 말해 건축 도면처럼 버튼, 텍스트, 이미지, 내비게이션 메뉴가 화면 어디에 .. 2026. 3. 28. 이전 1 2 다음
