UXUI 디자이너 외주개발사 미팅 준비 필수 체크리스트
현직 UXUI 디자이너가 직접 정리한 웹에이전시 미팅 준비 가이드
안녕하세요~ 비니입니당ㅎㅎ
요즘 진짜 프로젝트 시즌인 것 같은데요!
(저만...그런가요...? 너무 바빠요 ㅠㅠ)
신규 브랜드 런칭, 정부지원사업 선정, 리뉴얼 오픈 등으로
디자이너분들이 정신없이 미팅을 다니는 시기라고 생각이 드네요....ㅎㅎ
저도 최근 몇 달 동안 여러 외주개발사와 미팅을 오가며
"아, 이건 미리 챙겨야겠다!" 싶은 부분을 수없이 느꼈어요ㅎㅎ
디자인 시안만 들고 가면 괜히 설명이 꼬이고,
결국 미팅이 길어지거나 오해가 생기더라구요ㅠㅠ
그래도 이제 3년차가 됐는데... 아직도 부족한 모습을 이렇게 보이다니...
마음이 아팠어요 ㅠㅠㅠ
그래서 오늘은 제가 직접 겪으면서 정리한
'개발사 미팅 전에 디자이너가 꼭 준비해야 할 것들'을 소개해드리려고 해요!
여러분은 미리 준비하셔서 저보다 좋은 결과를 얻으시길...~
미리 준비가 필요한 이유
디자이너가 미팅 전에 준비를 충분히 하면,
"왜 이렇게 만들었는지"를 훨씬 명확하게 전달할 수 있어요.
개발사 입장에서는 디자인보다 기능의 맥락을 먼저 이해해야 하기 때문에,
자료를 미리 정리해두면 기술적인 논의가 훨씬 빨라질 수 있어요!
저는 예전에 시안만 들고 미팅에 갔다가
"이 버튼은 어디로 연결되나요?", "이건 어떤 데이터가 필요한가요?"
라는 질문에 제대로 답하지 못해 진땀을 뺐던 적이 있어요...ㅠㅠㅠㅠ
그 이후로는 서비스 개요, 화면 흐름, 컴포넌트 구조,
모션 레퍼런스까지 미리 챙기기 시작했고,
미팅 시간을 절반 가까이 줄일 수 있었어요!ㅎㅎ
외주개발사 미팅: 디자이너가 꼭 준비해야 할 7가지
이제 본격적으로 디자이너 입장에서
미리 준비해두면 좋은 7가지 핵심 자료를 정리해볼게요!
개인적으로는 아주 중요하다고 생각하는 것들만
쏙쏙 뽑아서 준비했어요!
반드시 준비해야 할 건 아니지만, 이걸 준비한다면
외주개발 프로젝트를 진행할 때
훨씬 더 협업의 퀄리티를 높일 수 있다고 자신합니다!
1. 서비스 콘셉트와 타깃을 한눈에 보여주는 요약서
디자인보다 먼저, 서비스의 목적을 설명할 수 있어야 해요.
누가 이 서비스를 사용하는지, 어떤 문제를 해결하려는지
짧고 명확하게 정리한 '콘셉트 요약서'가 필요해요.
개발사는 디자인보다 '기능적 구조'를 먼저 파악하려고 해요!
서비스의 방향이 잡혀 있어야 기술 구현을 결정할 수 있기 때문이에요.
그래서 저는 아래 세 가지를 항상 한 장에 정리해가요!
서비스 한 줄 요약
주요 타깃 (연령대, 상황, 사용 목적)
핵심 기능 3가지
이 정도만 있어도 미팅의 방향을 초반부터 제대로 잡을 수 있어요!
2. 화면 플로우와 사용자 여정 맵
UI 시안만으로는 전체 구조를 이해하기 어려워요.
그래서 화면 플로우(Flow Chart)나 사용자 여정 맵(Journey Map)을
미리 정리해두면 정말 도움이 돼요.
정리된 정보를 공유하는 방법으로는
피그마 프로토타입 링크 공유
페이지 간 이동 관계를 시각화한 흐름도
로그인→메인→상세→결제 순으로 이어지는 기본 경로
이렇게 세가지가 있는데요!
해당 방식으로 구조를 제대로 보여주면 개발사에서도
"이 부분은 API 필요하겠네요"
"이건 프론트에서 처리 가능해요"
처럼 구체적인 논의가 가능해져요~
이런 흐름도를 준비해가니
모두가 이해한 상태에서 논의가 훨씬 더 깊어지더라고요~
3. 스타일 가이드와 컴포넌트 정의서
UI 디자인은 정보를 전달하는 구조이자 기준이에요!
색상, 폰트, 여백이 조금만 달라져도 전체 인상이 미묘하게 달라지고,
사용자의 신뢰감도 달라져버릴 수 있어요~
그래서 스타일 가이드는 미팅 때 반드시 공유해야 하는 핵심 자료예요!!!!
스타일 가이드에 들어가야 할 내용을 알려드릴게요~
컬러 팔레트 (HEX 코드 기준)
폰트 종류 및 계층 구조
버튼, 카드, 모달 등 공통 컴포넌트 구조
저는 보통 피그마 안에 'Design System' 페이지를 따로 만들어서
이런 요소들을 정리해둬요.
그 결과 QA 단계에서 색상 불일치나 폰트 오류가 훨씬 줄었어요!ㅎㅎ
요즘은 많은 개발팀이 디자인 토큰 방식을 사용해요.
즉, 스타일을 코드 변수로 변환해서 일관되게 관리하죠.
이런 시스템을 지원하는 개발사와 협업하면
디자인의 완성도가 정말 안정적으로 유지돼요 :)
4. 인터랙션과 모션 레퍼런스 영상
디자인만으로는 움직임을 제대로 전달하기에 어려움이 있죠!
버튼 클릭, 팝업 전환, 스크롤 인터랙션처럼
사용자 행동에 반응하는 요소는 영상으로 보여주는 게 가장 빨라요~ㅎㅎ
이런 사이트들을 참고하면 레퍼런스를 찾기 좋은데요!
Dribbble: 트렌디한 인터랙션 참고
LottieFiles: 애니메이션 아이콘 레퍼런스
Pinterest: 감성적인 모션 참고
짧은 영상으로 몇개만 준비해가도
개발자 분들이 이해하기 훨씬 쉬워하시더라고요~
"이런 느낌으로 전환되면 좋겠다~"를 영상으로 바로 보여드리면,
설명 시간도 절약되고 개발 이해도도 높아져요!ㅎㅎ
5. 기능 우선순위 리스트
모든 걸 한번에 구현하기에는 정말 어려움이 많죠...
디자인은 완성됐어도 개발은 단계적으로 진행돼야 해요.
그래서 미팅 전에 우선순위 리스트를 만들어가는 게 중요한 것 같아요!
예를 들자면
로그인 / 회원가입
메인 페이지
상품 목록
상세 페이지
결제 및 완료
이 중에서 'MVP(최소기능제품)'로 꼭 필요한 기능을 표시해두면,
개발사에서도 일정 조정이 훨씬 수월해져요!
이렇게 정리해 두면 일정과 범위에 대한 협의를 빠르게 끝낼 수 있어요~
6. 참고 서비스 및 레퍼런스 링크
레퍼런스가 꼭 필요한 이유를 설명드리자면,
디자이너와 개발자가 좋다고 생각하는 기준이 다를 수 있어요.
그런데 실제 레퍼런스 링크를 함께 보면
동일한 시각 기준이 생기는 것 같은데요!
비슷한 서비스의 URL을 2~3개 정리하고,
"이건 인터랙션 참고", "이건 전환 속도 참고"처럼 메모를 덧붙여요.
디자인과 인터랙션에 대해 내가 생각한 감각을
그대로 구현하기에 가장 좋은 방법이라고 생각해요!
7. 일정표와 커뮤니케이션 방식
미팅 후에도 일정에 대한 혼선이 생길 때가 정말 많죠,..
"일정은 추후 논의합시다~"로 끝내버리면
후속 일정 잡는 데 며칠씩 걸릴 때가 있어요ㅜ
그래서 저는 항상 간단한 일정표를 미리 만들어서 미팅에 가려고 해요
디자인 전달일
개발 착수일
QA 일정
런칭 예정일
이 네 가지를 미리 정리해두면 협업 일정에 큰 어려움이 생기지 않더라고요.
또 커뮤니케이션 채널(노션, 슬랙, 지라 등)을 사전에 정해두면
공유한 내용이 휘발하는 걸 최대한 막을 수 있어요!
공유된 정보도 찾기 쉬워지구요~ㅎㅎ
협업 경험으로 본 '좋은 개발팀'
제가 최근 진행했던 프로젝트 중 하나는
외주개발 에이전시인 똑똑한개발자 팀과 협업한 웹 서비스 구축이었는데요!
디자이너 입장에서 정말 인상 깊었던 점은,
시안을 그대로 옮겨 개발하지 않고 의도를 해석해주는 개발 방식이었어요.
예를 들어 버튼 간격이 의도된 비율인지,
모션 타이밍이 사용자 시선을 어디에 유도하는지까지 같이 고민해주셨어요!
또한 피그마 프로토타입을 바로 기반으로
디자인-개발 핸드오프 루틴을 운영하시더라구요.
"이건 CSS 애니메이션으로 처리해요", "이건 JS로 전환해볼게요" 같은 대화가
정말 자연스럽게 이어졌어요!ㅎㅎ
디자인 시스템 소개 출처: 똑똑한개발자무엇보다 똑똑한개발자의 디자인 토큰 기반 구조 덕분에
색상, 폰트, 여백이 일관성 있게 유지됐어요.
그래서 디자이너로서 내 디자인이 잘 구현되고 있다는 믿음이 생기더라고요!
디자이너가 미팅 시에 꼼꼼히 준비해 가는 것도 정말 중요하지만
디자인적으로 완성도가 높은 개발을 하기 위해서는
협업 프로세스에서 디자이너와 친화적인 개발사를 만나는 것 또한
매우 중요하다고 생각하게 됐어요!
준비된 디자이너가 협업 퀄리티를 바꾼다
외주개발 미팅은 UXUI 디자이너에게 정말 중요한 자리죠!
오늘 정리한 7가지 포인트만 미리 챙겨도
회의 효율과 결과물 퀄리티가 확실히 달라질 거라고 생각해요~
준비된 디자이너는
자신의 디자인을 더 잘 설명할 수 있고,
개발사 입장에서도 함께 일하고 싶은 파트너로 느껴지겠죠? :)
저처럼 첫 미팅 때 긴장했던 분들도
이 글을 보고 조금 더 자신감 있게 준비하시길 바랄게요!!!ㅎㅎ
끝까지 읽어주셔서 감사합니다~
공감과 댓글 부탁드려요!
