목록 보기
스케치로 디자인 하기
기타

스케치로 디자인 하기

엔라이즈
엔라이즈
2016년 9월 8일

두줄요약

모씨 디자인팀은 포토샵 중심 UI 작업을 스케치 기반 프로세스로 5일간 전환했습니다.\nSVG와 제플린을 활용해 가이드 효율과 개발 이해도를 높였지만 소수점 처리 등 과제도 확인했습니다.

문제 상황

  • PSD·AI·SVG 리소스와 포토샵 조립, 프레젠테이션 가이드 중심의 기존 UI 디자인 협업 과정
  • UI 디자인 주류 도구 변화와 기존 화면·가이드의 재정비 필요

해결 방법

  • 기존 파일 변환 대신 90여 개 화면을 스케치에서 재구성하는 5일 이전 계획
  • SVG 리소스 재활용, 2~3시간 단위 노하우·이슈 공유, 전 디바이스 대응과 제플린 연동 학습
  • 소수점 위치·크기 문제에 스케치 기본 기능 Round to Pixel 적용

성능/운영 포인트

  • 3명 디자이너가 5일 동안 105개 화면 스케치, 원본 용량 700MB에서 70MB로 축소
  • 디자인부터 가이드까지 소요 시간 단축과 개발 관점의 간격·여백·폰트·컬러 기준 재점검
  • 플린토 프로토타입과 제플린 스타일 가이드 전달 중심의 후속 프로세스 운영

주의할 점

  • 아트보드 스케일 변경 시 위치·크기 값 소수점 재발생
  • 벡터 드로잉·패스파인더·심볼 기능의 학습 및 사용성 적응 필요
  • 제플린의 협업·슬라이스 기능을 팀 과정에 녹이기 위한 추가 검증 필요

다음 읽기

#UI/UX 주제를 이어서 읽기

Figma 로 디자인하기

콰트 프로젝트에서 스케치·제플린·드롭박스 프로세스를 Figma로 통합한 경험을 공유했습니다.\n실시간 협업과 개발 리소스 전달은 개선됐지만 이관·폰트·네트워크 문제를 고려해야 합니다.

엔라이즈
엔라이즈
기타

댓글 0개

댓글을 작성하려면 로그인이 필요합니다.

댓글을 불러오는 중...