UI/UX4 모바일 앱 UX (레퍼런스 분석, 타이포그래피, 터치 영역) 처음 모바일 앱 UI를 설계하던 날, 저는 꽤 자신 있었습니다. 화면을 빈틈없이 채우고 컬러도 다양하게 쓰면 '완성도 높은 디자인'이라고 믿었으니까요. 그 착각이 얼마나 비싸게 먹혔는지, 사용자 테스트 결과지를 받아 들고 나서야 알았습니다. 이 글은 그 시행착오를 통해 몸으로 배운 모바일 UX 핵심 원칙 세 가지를 정리한 것입니다.잘 만든 앱을 뜯어봐야 배움이 생긴다디자인을 처음 배울 때 핀터레스트부터 켜는 분들이 많습니다. 색감이 예쁜 목업 이미지를 모아두고 '이런 느낌으로 만들자'고 생각하는 거죠. 저도 그랬습니다. 그런데 막상 실제 앱으로 구현하려고 하면 핀터레스트에서 본 것들이 거의 도움이 안 됩니다. 그 이미지 대부분이 실제로 작동하는 UI가 아니라, 포트폴리오용 목업(mockup)이기 때문입니.. 2026. 4. 11. 피그마 Dev Mode (핸드오프, 인스펙트 패널, 협업 효율) 디자이너가 개발자에게 '이 간격 몇 픽셀이에요?' 같은 질문을 받는 게 당연한 일이라고 생각하셨나요? 저도 한때 그랬습니다. 그런데 Figma Dev Mode를 쓰고 나서 그 질문이 거의 사라졌습니다. 핸드오프 방식을 바꾸는 것만으로 피드백 루프가 2주에서 3일로 줄었고, 하루에 서너 번씩 오던 슬랙 메시지도 뚝 끊겼습니다.핸드오프, 문서로 하던 시절이 있었습니다핸드오프(Handoff)란 완성된 디자인 시안을 개발자에게 넘기는 과정을 의미합니다. 스포츠에서 공을 동료에게 전달하는 행위에서 유래한 용어로, 소프트웨어 개발에서는 디자이너가 개발자에게 구현 가능한 형태의 정보를 전달하는 일 전체를 뜻합니다.저는 프리랜서 초기에 Zeplin을 사용하면서 이 과정을 손으로 직접 했습니다. 화면마다 색상 값, 폰트.. 2026. 4. 11. 디자인 토큰 (토큰 구조, 네이밍 컨벤션, 자동화 파이프라인) 버튼 하나의 컬러를 바꾸는 데 이틀이 걸렸습니다. 수동으로 화면 수십 개를 뒤지고, 개발자에게 헥스코드를 일일이 붙여 넣어서 전달하던 시절 얘기입니다. 디자인 토큰을 도입하고 나서야 그게 얼마나 비효율적인 구조였는지 실감했습니다. 이 글은 그 경험을 바탕으로, 토큰 구조 설계부터 네이밍 컨벤션, 자동화 파이프라인까지 실무에서 어떻게 작동하는지 풀어봤습니다.손으로 하나씩 고치던 시절, 토큰 구조가 바꾼 것디자인 시스템을 도입하기 전 저는 프리랜서 UI/UX 디자이너로 B2B SaaS 프로젝트를 진행하고 있었습니다. 당시의 작업 방식은 단순했지만 끔찍했습니다. 디자인 수정이 생기면 Figma에서 화면별로 일일이 컬러를 찾아 바꿔야 했고, 개발자에게 넘길 때는 "#1A1A2E입니다"처럼 헥스코드를 직접 전달했.. 2026. 4. 10. 피그마 대시보드 디자인 (레이아웃 그리드, 컴포넌트, 컬러 시스템) 대시보드 디자인에서 개발팀 피드백 1위는 단연 "간격이 화면마다 다르다"입니다. 저도 프리랜서 5년 차가 되기 전까지 이 말을 귀에 못이 박히도록 들었습니다. 레이아웃 그리드 하나 제대로 안 잡고 눈대중으로 요소를 쌓아올렸던 시절 얘기입니다. 피그마로 대시보드를 처음부터 완성하는 과정을 정리하면서, 제가 실제로 겪은 시행착오와 그걸 어떻게 넘었는지 함께 풀어보겠습니다.레이아웃 그리드와 컴포넌트 구조: 디자인 일관성의 실체1920x1080 해상도 프레임에 레이아웃 그리드를 설정하는 것이 대시보드 작업의 첫 단추입니다. 레이아웃 그리드란 화면을 일정한 컬럼과 여백으로 나누어 요소를 정렬하는 기준 격자를 말합니다. 쉽게 말해 도화지에 미리 줄을 그어두는 것과 같습니다. 마진 32, 거터 0 설정으로 콘텐츠 영.. 2026. 4. 10. 이전 1 다음
