스케치로 디자인 하기
기타
스케치로 디자인 하기
두줄요약
모씨 디자인팀은 포토샵 중심 UI 작업을 스케치 기반 프로세스로 5일간 전환했습니다.\nSVG와 제플린을 활용해 가이드 효율과 개발 이해도를 높였지만 소수점 처리 등 과제도 확인했습니다.
문제 상황
- PSD·AI·SVG 리소스와 포토샵 조립, 프레젠테이션 가이드 중심의 기존 UI 디자인 협업 과정
- UI 디자인 주류 도구 변화와 기존 화면·가이드의 재정비 필요
해결 방법
- 기존 파일 변환 대신 90여 개 화면을 스케치에서 재구성하는 5일 이전 계획
- SVG 리소스 재활용, 2~3시간 단위 노하우·이슈 공유, 전 디바이스 대응과 제플린 연동 학습
- 소수점 위치·크기 문제에 스케치 기본 기능 Round to Pixel 적용
성능/운영 포인트
- 3명 디자이너가 5일 동안 105개 화면 스케치, 원본 용량 700MB에서 70MB로 축소
- 디자인부터 가이드까지 소요 시간 단축과 개발 관점의 간격·여백·폰트·컬러 기준 재점검
- 플린토 프로토타입과 제플린 스타일 가이드 전달 중심의 후속 프로세스 운영
주의할 점
- 아트보드 스케일 변경 시 위치·크기 값 소수점 재발생
- 벡터 드로잉·패스파인더·심볼 기능의 학습 및 사용성 적응 필요
- 제플린의 협업·슬라이스 기능을 팀 과정에 녹이기 위한 추가 검증 필요


