입사한 지 얼마 안 된 신입 BX 디자이너입니다. 최근에 처음으로 개발팀에 시안을 넘겼는데요, 간격이랑 컬러값을 따로 안 적었더니 다시 정리해달라는 피드백을 받았어요. 혹시 다들 피그마에서 시안 정리할 때 어느 수준까지 해서 넘기시나요? 컴포넌트 네이밍이나 스타일 가이드 문서까지 따로 만들어 주시는 건지… 아직 감이 안 잡혀서 선배님들 기준이 정말 궁금합니다.
개발자분한테 시안 전달할 때 어디까지 정리해야 하나요?
8.4 16:15조회수 0댓글 10
간격이랑 컬러값 안 적었다는 건 시안을 넘긴 게 아니라 그림을 넘긴 거예요. 개발자 입장에서는 그걸 보고 뭘 만들어야 할지 모르는 거죠. 저도 2년차 때 똑같은 실수 했는데요 그때 프론트 개발자분이 하신 말이 아직도 기억나요. 디자이너가 정의 안 한 건 개발자가 임의로 정한다고. 그러면 결과물 보고 울고 싶어지는 건 디자이너 본인이에요. 최소한 컬러 헥스코드, 간격 수치, 폰트 사이즈랑 웨이트, 이건 무조건 적어야 하고요. 컴포넌트 네이밍은 개발팀이랑 합의해서 쓰는 거지 혼자 만들어봤자 안 쓰여요. 스타일 가이드 문서는 프로젝트 규모에 따라 다른데 지금 단계에서는 그것보다 피그마 오토레이아웃부터 제대로 잡는 게 먼저예요. 넘기기 전에 개발자한테 한 번만 물어보세요. 뭐가 필요하냐고. 그게 제일 빠릅니다.
아 이런 거 보면 취업 전에 미리 알아둬야 할 게 진짜 많구나 싶다ㅋㅋ 나 영상 쪽 전공이라 아직 개발팀이랑 협업해본 적은 없는데요, 학교 과제할 때도 간격이나 수치 같은 거 대충 감으로 잡고 넘어가거든요. 근데 실무에서는 그게 바로 문제가 되는구나… 솔직히 피그마 핸드오프 기능 있으면 알아서 되는 줄 알았는데요 그것만으로는 부족한 건가? 나도 졸업하고 나면 바로 부딪힐 문제 같아서 은수님 글 보면서 오히려 감사하다ㅋㅋ 혹시 선배님들 중에 핸드오프 정리하는 템플릿 같은 거 추천해주실 분 계시면 나도 좀 참고하고 싶어요
혹시 개발팀이랑 핸드오프 미팅 같은 건 따로 하고 계신가요? 저도 초반에는 피그마에 간격이랑 컬러값 하나하나 다 주석 달아서 넘겼는데요, 사실 그것보다 효과적이었던 건 넘기기 전에 개발자분이랑 10분이라도 같이 화면 보면서 의도를 설명하는 시간이었어요. 물론 기본적으로 spacing, color token, font style 정도는 정리해두는 게 맞긴 합니다. 근데 컴포넌트 네이밍이나 스타일 가이드 문서까지는 팀마다 기대치가 다르거든요. 어떤 팀은 디자이너가 다 정리해주길 바라고, 어떤 팀은 디자인 시스템이 이미 있어서 토큰명만 맞추면 되기도 하고요. 은수 님 팀에 아직 그런 기준이 없다면, 이번 기회에 개발팀이랑 같이 체크리스트를 만들어보시는 것도 좋을 것 같아요. 그게 결국 본인만의 핸드오프 루틴이 됩니다.
피그마로 과제할 때는 결과물 자체만 신경 썼지, 간격이랑 컬러값을 따로 정리해서 전달해야 한다는 개념 자체가 없었거든요. 이 글 읽으면서 실무에서 요구하는 수준이 학교에서 배우는 것과 꽤 다르구나 싶어서 솔직히 좀 긴장됩니다. 저도 커뮤니케이션디자인 전공 중인 학생인데요, 수업에서는 시각적 완성도 위주로만 피드백을 받다 보니 핸드오프 과정에 대해서는 아는 게 거의 없어요. 은수 님은 피드백 받으신 뒤에 어떤 식으로 다시 정리하셨는지도 궁금합니다. 컴포넌트 네이밍 같은 건 회사에서 자연스럽게 익히신 건지, 아니면 따로 공부하신 게 있으신지 여쭤봐도 될까요?
저도 신입 때 거의 똑같은 피드백 받았던 기억이 나서 반갑기도 하고 좀 찔리기도 하네요. 웹디자이너로 4년 정도 일하면서 느낀 건데, 사실 팀마다 원하는 정리 수준이 꽤 달라요. 저는 처음엔 간격이랑 컬러값 적는 것만으로도 벅찼는데요, 지금은 오토 레이아웃으로 구조 잡고 컴포넌트 네이밍까지 맞추는 게 습관이 됐습니다. 스타일 가이드 문서를 따로 만드느냐는 프로젝트 규모에 따라 다르고, 작은 건은 피그마 내에서 정리하는 선에서 끝내는 편이에요. 한 가지 팁을 드리자면, 개발자분한테 직접 "어떤 정보가 있으면 작업하기 편하세요?" 한 번만 여쭤보세요. 저도 그 질문 하나로 불필요한 재작업이 확 줄었거든요. 서로 기대치를 맞추는 게 정리 포맷보다 훨씬 중요하더라고요.
피그마 시안 정리는 처음부터 완벽할 수 없으니 너무 자책하지 않으셔도 됩니다. 저는 브랜드 쪽이라 웹이나 앱 시안을 직접 넘기는 빈도가 높진 않지만, 캠페인 랜딩페이지나 굿즈 관련 작업에서 개발팀과 협업한 경험으로 말씀드릴게요. 가장 도움이 됐던 건 핸드오프 체크리스트를 하나 만들어두는 거였어요. 컬러값, 간격, 폰트 사이즈, 여백, 상태별 케이스 같은 항목을 리스트화해서 시안 넘기기 전에 하나씩 확인하는 방식이요. 처음엔 시간이 좀 걸리지만 두세 번만 반복하면 자연스럽게 체화됩니다. 컴포넌트 네이밍이나 스타일 가이드 문서는 팀마다 기준이 다르니, 개발팀에 선호하는 정리 방식을 먼저 여쭤보시는 게 훨씬 효율적이에요. 서로 기대치를 맞추는 과정 자체가 실력이 되더라고요.
혹시 패키지 쪽도 이런 정리 기준이 비슷할까요? 저는 패키지 디자이너 5년차인데요 인쇄소나 제조 쪽에 시안 넘길 때 도무선, 재단선, 별색 코드 같은 거 꼼꼼히 정리하는 게 습관이 되어 있거든요. 근데 개발 쪽 핸드오프는 해본 적이 없어서 피그마로 간격이랑 컬러값을 따로 명시해야 한다는 게 새롭네요. 저도 요즘 웹 쪽으로 업무 범위를 넓혀보고 싶어서 이런 글 보면 괜히 긴장됩니다. 은수 님 글 보니까 궁금한 게 하나 있는데요, 개발팀에서 다시 정리해달라고 했을 때 구체적으로 어떤 포맷을 원한다고 하셨나요? 그 기준을 알면 저도 나중에 참고할 수 있을 것 같아서요. 분야는 다르지만 결국 다음 공정 담당자가 헤매지 않게 넘기는 건 똑같은 거니까, 처음에 피드백 받은 건 오히려 기준 잡기 좋은 기회라고 생각해요.
스타트업에서 일하면 핸드오프 문서 따로 만들 시간이 거의 없어요. 그래서 저는 피그마 자체를 문서처럼 쓰는 습관을 일찍 들였는데요, 오토 레이아웃 잘 잡아두면 간격값은 개발자분이 인스펙트에서 바로 확인 가능하거든요. 컬러는 디자인 토큰으로 스타일 등록해두면 따로 안 적어도 되고요. 처음엔 귀찮은데요 한번 세팅해두면 매번 정리하는 시간이 확 줄어들어요. 근데 솔직히 제일 중요한 건 개발자분이랑 얼마나 자주 얘기하느냐인 것 같아요. 저는 컴포넌트 네이밍도 프론트 개발자분이랑 같이 맞춰서 쓰거든요. 서로 쓰는 용어가 다르면 아무리 문서 잘 만들어도 커뮤니케이션 비용이 줄지 않더라고요. 은수님도 다시 정리해달라는 피드백 받은 김에 그 개발자분한테 어떤 형식이 작업하기 편한지 직접 물어보시는 게 제일 빠를 거예요.
나 1년차 때 간격 안 적은 정도가 아니라 아예 레이어 정리도 안 하고 넘긴 적 있어ㅋㅋ 개발자분이 "이 레이어가 뭔지 모르겠다"고 슬랙 보내셨을 때 얼굴이 진짜 빨개졌었거든요. 근데 그때 이후로 매번 시안 넘기기 전에 셀프 체크리스트를 만들어서 확인하는 습관이 생겼는데요, 이게 진짜 효과 있었어요. 간격, 컬러값, 폰트 스타일은 기본이고, 인터랙션 있는 부분은 상태별로 프레이에요 나눠서 흐름을 보여주는 게 중요하더라. 컴포넌트 네이밍이나 스타일 가이드 문서까지는 팀바팀인데요, 처음부터 그것까지 하려고 하면 오히려 시안 자체가 늦어져서 우선순위를 정하는 게 낫다고 봐. 일단 개발자분한테 "어떤 형태로 받으면 편하세요?"라고 먼저 물어보는 것도 방법이야. 그 한마디가 불필요한 리워크를 엄청 줄여줌
프리랜서 10년 하면서 느낀 건데, 시안 정리 수준이 곧 돈이에요. 인하우스에서는 개발자한테 다시 물어보면 되지만, 외주는 커뮤니케이션 한 번 더 오가면 그게 다 시간이고 비용이거든요. 그래서 저는 일찍부터 정리 습관을 잡았는데요, 솔직히 처음부터 스타일 가이드 문서까지 만들 필요는 없어요. 피그마 인스펙트 기능 켜두고, 오토 레이아웃으로 간격 잡고, 컬러는 스타일로 등록해두면 개발자가 클릭만으로 값 확인이 가능하니까 그것만으로도 충분합니다. 컴포넌트 네이밍은 개발팀이랑 규칙을 먼저 맞추는 게 중요하지 혼자 열심히 정한다고 되는 게 아니에요. 은수 님은 피드백을 받았다는 것 자체가 좋은 신호예요. 관심 없으면 그냥 알아서 대충 만들어버리거든요. 지금 이 타이밍에 정리 기준 잡아두면 나중에 엄청 편해질 거예요.