스타트업이라 핸드오프 프로세스가 딱히 없어서 매번 고민이에요. 피그마에 컴포넌트 정리하고 간격이랑 컬러값 다 써놓는데도 개발자분이 "이거 몇 px이에요?" 물어보시면 내가 뭘 빠뜨린 건가 싶고요. 근데 너무 꼼꼼하게 정리하자니 그 시간에 다른 화면 하나 더 치는 게 나을 것 같기도 하고. 다들 핸드오프 할 때 어느 선까지 정리하세요?
#협업#핸드오프#개발자소통#피그마#스타트업
8.5 08:51조회수 0댓글 11
이서커뮤니케이션디자인 전공 · 대학생
아직 학교에서 프로젝트할 때 개발 파트 친구들이랑 협업해본 정도라 실무 핸드오프는 경험이 거의 없는데, 그래도 이 고민 읽으면서 되게 공감됐어요. 저도 피그마로 작업물 넘길 때 간격이랑 컬러값 적어두면 충분하다고 생각했는데 매번 질문이 오더라고요. 그때마다 내가 정리를 잘 못한 건가 싶어서 좀 위축되기도 했거든요.
채원님처럼 3년차분도 이런 고민을 하신다는 게 솔직히 좀 안심이 되면서도, 실무에서는 규모가 다를 테니 더 복잡하시겠다 싶어요. 혹시 피그마 자체 inspect 기능만으로는 부족한 부분이 많으신 건지, 아니면 별도로 제플린 같은 툴도 같이 쓰시는지 궁금합니다. 나중에 취업하면 바로 부딪힐 문제라 다른 분들 답변도 같이 기다려보겠습니다.
8.5 08:51
재민모션 디자이너 · 3년차
모션 작업 넘길 때 저도 똑같은 고민 겪어서 하나 팁 드리자면, 정리의 기준을 "개발자가 안 물어보게"가 아니라 "물어볼 때 바로 찾을 수 있게"로 바꾸니까 마음이 편해졌어요. 어차피 다 적어놔도 질문은 옵니다. 진짜로요.
easing 값이랑 duration 표로 정리해서 노션에 박아놔도 "이거 몇 초예요?" 슬랙 옴ㅋㅋ 그래서 요즘은 피그마에 섹션별로 넘버링 해두고 컴포넌트 옆에 간단한 스펙 메모만 붙이는 식으로 타협 봤어요. 꼼꼼하게 문서화하는 시간 아껴서 개발자분이랑 10분 화면 공유하면서 훑어주는 게 질문 수가 확 줄더라고요. 스타트업이면 문서보다 대화가 빠를 때가 많으니까 그 방향도 한번 고려해보세요.
8.5 08:52
진아브랜드 디자이너 · 12년차
솔직히 말하면 그 질문 자체가 문제의 핵심이에요. 어디까지 정리하냐가 아니라 왜 매번 정리해야 하냐를 고민하셔야 해요. 저도 4년차쯤에 똑같이 간격 컬러 다 적어놨는데 개발자가 물어봐서 미치는 줄 알았거든요.
근데 결국 답은 디자인 토큰이었어요. spacing-sm이 8px이고 spacing-md가 16px이라는 걸 시스템으로 잡아놓으니까 그 뒤로 px 묻는 사람이 사라졌어요. 스타트업이라 프로세스 없다고 하셨는데 그건 핑계예요. 시스템 세팅은 하루면 돼요. 화면 하나 더 치는 것보다 토큰 한 세트 만드는 게 앞으로 6개월을 살려요. 정리를 잘하는 디자이너 말고 정리가 필요
없는 구조를 만드는 디자이너가 되셔야 해요.
8.5 08:52
도윤BX 디자이너 · 7년차
아 진짜 공감되는 게, 이 고민 7년차인 지금도 완전히 사라지진 않았어요. 다만 관점이 좀 바뀌었는데, 핵심은 정리의 양이 아니라 정리의 기준을 개발자랑 합의하는 거예요. 저도 예전엔 간격 컬러 전부 일일이 표기했거든요.
그래도 질문은 오더라고요. 어느 순간 깨달은 게, 개발자분들이 물어보는 건 제가 빠뜨려서가 아니라 본인 작업 흐름에서 재확인이 필요한 시점에 물어보는 거였어요. 놓친 게 아니라 소통 방식이 다른 겁니다. 그래서 지금은 시안 넘기기 전에 10분짜리 워크스루를 같이 하는 걸로 바꿨는데, 주석 30분 다는 것보다 훨씬 효율적이에요.
스타트업이면 더더욱 문서 정리보다 짧은 싱크 한 번이 질문 열 개를 줄여줍니다. 정리를 더 잘하겠다는 방향보다 어떤 정보를 어떤 형태로 원하는지 한 번만 물어보세요.
8.5 08:53
소희산업디자인 전공 · 대학생
혹시 피그마 말고 다른 툴로 핸드오프하시는 분들도 계신가요? 저 산업디자인 전공이라 아직 실무 핸드오프 경험은 없는데, 학교 프로젝트에서 개발 전공 팀원이랑 협업할 때 비슷한 상황이 있었거든요. 분명 간격이랑 사이즈 다 적어서 넘겼는데 매번 카톡으로 "이 여백 위에서부터야 아래에서부터야" 이런 질문이 와서 당황했던 기억이요.
채원님 글 읽으면서 궁금한 게, 컬러값이나 간격 같은 수치 정보를 써놓는 것과 별개로 디자인 의도나 인터랙션 흐름 같은 것도 따로 설명하세요? 저는 그냥 화면 캡처해서 화살표 그려가며 설명했었는데 이게 맞는 건지도 모르겠고. 스타트업이면 프로세스를 직접 만들어가야 하는 거잖아요, 그 과정 자체가 되게 부담될 것 같은데 어떻게 버티시는지도 솔직히 궁금합니다
8.5 08:53
소라패키지 디자이너 · 5년차
분야가 달라서 조심스럽긴 한데, 질문 자체를 좀 다른 각도에서 볼 수도 있지 않나 싶어요. 저는 패키지 쪽이라 피그마 핸드오프는 경험이 없고, 대신 인쇄소에 파일 넘기는 게 일상인데요. 도무선 좌표, 별색 코드, 코팅 범위 전부 표기해놔도 인쇄소에서 확인 전화 오는 건 마찬가지예요. 처음엔 내가 뭘 빠뜨렸나 자책했는데, 돌이켜보면 받는 쪽에서 확인차 물어보는 거였던 경우가 훨씬 많았거든요.
혹시 개발자분이 질문하시는 것도 정보가 없어서가 아니라 한 번 더 확인하려는 절차일 수도 있지 않을까요? 분야는 다르지만 넘기는 쪽에서 어디까지 책임져야 하나 그 경계의 스트레스는 너무 공감돼서 댓글 남겨봅니다.
8.5 08:54
현우시니어 프로덕트 디자이너 · 12년차
아 이거 읽으면서 좀 놀랐는데, 채원님이 이미 간격이랑 컬러값까지 다 써놓고 계시다는 거잖아요. 솔직히 그 정도면 꽤 잘하고 계신 겁니다. 12년 하면서 느낀 건, "이거 몇 px이에요?" 그 질문이 정리를 덜 해서 나오는 게 아닐 때가 훨씬 많다는 거예요. 개발자분이 피그마 inspect 기능을 안 쓰시거나 파일 어디를 봐야 할지 모르는 경우가 대부분이었어요.
그래서 저는 정리량을 늘리는 방향을 아예 접고, 넘기기 전에 5분짜리 워크스루를 같이 하는 걸로 바꿨거든요. 파일 구조랑 컴포넌트 네이밍 규칙만 화면 공유로 한 번 훑어주면 그 뒤로 질문이 확 줄어요. 스타트업이면 특히, 완벽한 문서보다 같은 언어를 맞추는 게 핵심이에요. 주석 스무 개보다 대화 한 번이 낫습니다.
8.5 08:55
규민시각디자인 전공 · 대학생
혹시 질문 받는 것 자체를 너무 무겁게 받아들이고 계신 건 아닌가 싶어서 댓글 남겨봅니다. 채원 선배님이 "물어보면 내가 뭘 빠뜨린 건가 싶다"고 쓰신 부분이 저한테는 글에서 제일 마음에 걸렸거든요.
저는 아직 학교 팀플 수준이라 실무 핸드오프를 조언드릴 처지는 전혀 아닌데, 프로젝트에서 개발 파트 친구가 뭔가 물어올 때 저도 똑같은 반응이었어요. 근데 나중에 들어보니 그 친구는 제가 적어둔 거 다 봤는데 그냥 더블체크 차원에서 물어본 거였더라고요. 간격에 컬러값까지 정리해두시는 선배님이 질문 하나에 스스로를 탓하실 필요는 없을 것 같아요.
오히려 궁금한 건 개발자분한테 왜 물어보셨는지 역으로 여쭤보신 적 있으신지요? 의외로 정리 문제가 아닐 수도 있을 것 같아서요.
8.5 08:56
성훈UI 설계 디자이너 · 7년차
디자인 토큰 시스템 한번 도입해보시는 거 추천드려요. 저도 스타트업 거치면서 같은 루프 돌았는데, 결국 해결한 건 피그마 variables 기능으로 컬러랑 spacing을 토큰화해서 개발 쪽 CSS 변수명이랑 1:1 매핑시킨 거였어요. gray-300이 #D1D5DB이고 spacing-4가 16px이라는 걸 시안마다 쓰는 게 아니라 토큰 이름 자체가 곧 스펙이 되는 구조요.
이렇게 하면 개발자분이 "이거 몇 px이에요?" 대신 토큰명만 보고 바로 코드에 반영할 수 있어서, 채원님이 매번 수치 적어놓는 그 반복 작업이 거의 사라져요. 초기 세팅에 반나절 정도 걸리긴 하는데, 그 이후로는 핸드오프 시간이 체감상 절반 이하로 줄어듭니다. 정리의 양을 늘리는 게 아니라 정리의 구조를 바꾸는 게 핵심이에요.
8.5 08:57
은수BX 디자이너 · 신입
얼마 전에 인턴하면서 BX 가이드라인 파일 정리해서 넘긴 적이 있었는데, 그때 개발자분이 아니라 마케팅 쪽에서 비슷한 질문이 쏟아졌거든요. 분명 컬러코드도 다 적어놨는데 "이거 정확히 뭔 색이에요?" 같은 연락이 오니까 솔직히 좀 당황스러웠습니다.
저는 그게 UI 핸드오프가 아니라 브랜드 자산 전달이라 맥락이 다르긴 한데, 채원님 글 읽으면서 결국 본질은 같은 거 아닌가 싶었어요. 받는 사람이 어떤 방식으로 파일을 소비하는지를 모르면 아무리 꼼꼼해도 빈틈이 생기는 거잖아요.
근데 그걸 파악하려면 시간이 또 드는 거고요. 혹시 채원님은 개발자분한테 직접 "어떤 형태로 주면 제일 편하세요?"라고 여쭤보신 적 있으신가요? 저는 아직 그 질문을 먼저 꺼내는 게 좀 무섭습니다.
8.5 08:57
유나편집 디자이너 · 4년차
편집 디자인 쪽이라 피그마로 개발자한테 넘기는 일은 많지 않은데, 채원님 글 읽으면서 인쇄소 핸드오프할 때랑 결이 비슷하다고 느꼈어요. 재단선, 도련, 별색 코드 다 정리해서 보내도 인쇄소에서 "이거 CMYK 변환된 거 맞아요?" 연락이 오거든요. 처음엔 저도 뭘 빠뜨렸나 싶어서 스트레스였는데, 몇 번 겪다 보니까 그게 상대방 나름의 확인 절차에 가깝다는 걸 알게 됐어요.
특히 처음 같이 일하는 사이일수록 더 그렇고요. 결국 같은 질문이 반복되느냐 아니냐가 핵심인 것 같아요. 반복되면 정리 방식이나 구조를 바꿔야 한다는 신호이고, 새로운 질문이면 서로 기준을 맞춰가는 자연스러운 소통 과정이니까요. 분야가 달라서 피그마 쪽 팁은 못 드리지만, 그 질문 받을 때 자책하는 마음은 좀 내려놓으셔도 될 것 같아요.
아직 학교에서 프로젝트할 때 개발 파트 친구들이랑 협업해본 정도라 실무 핸드오프는 경험이 거의 없는데, 그래도 이 고민 읽으면서 되게 공감됐어요. 저도 피그마로 작업물 넘길 때 간격이랑 컬러값 적어두면 충분하다고 생각했는데 매번 질문이 오더라고요. 그때마다 내가 정리를 잘 못한 건가 싶어서 좀 위축되기도 했거든요. 채원님처럼 3년차분도 이런 고민을 하신다는 게 솔직히 좀 안심이 되면서도, 실무에서는 규모가 다를 테니 더 복잡하시겠다 싶어요. 혹시 피그마 자체 inspect 기능만으로는 부족한 부분이 많으신 건지, 아니면 별도로 제플린 같은 툴도 같이 쓰시는지 궁금합니다. 나중에 취업하면 바로 부딪힐 문제라 다른 분들 답변도 같이 기다려보겠습니다.
모션 작업 넘길 때 저도 똑같은 고민 겪어서 하나 팁 드리자면, 정리의 기준을 "개발자가 안 물어보게"가 아니라 "물어볼 때 바로 찾을 수 있게"로 바꾸니까 마음이 편해졌어요. 어차피 다 적어놔도 질문은 옵니다. 진짜로요. easing 값이랑 duration 표로 정리해서 노션에 박아놔도 "이거 몇 초예요?" 슬랙 옴ㅋㅋ 그래서 요즘은 피그마에 섹션별로 넘버링 해두고 컴포넌트 옆에 간단한 스펙 메모만 붙이는 식으로 타협 봤어요. 꼼꼼하게 문서화하는 시간 아껴서 개발자분이랑 10분 화면 공유하면서 훑어주는 게 질문 수가 확 줄더라고요. 스타트업이면 문서보다 대화가 빠를 때가 많으니까 그 방향도 한번 고려해보세요.
솔직히 말하면 그 질문 자체가 문제의 핵심이에요. 어디까지 정리하냐가 아니라 왜 매번 정리해야 하냐를 고민하셔야 해요. 저도 4년차쯤에 똑같이 간격 컬러 다 적어놨는데 개발자가 물어봐서 미치는 줄 알았거든요. 근데 결국 답은 디자인 토큰이었어요. spacing-sm이 8px이고 spacing-md가 16px이라는 걸 시스템으로 잡아놓으니까 그 뒤로 px 묻는 사람이 사라졌어요. 스타트업이라 프로세스 없다고 하셨는데 그건 핑계예요. 시스템 세팅은 하루면 돼요. 화면 하나 더 치는 것보다 토큰 한 세트 만드는 게 앞으로 6개월을 살려요. 정리를 잘하는 디자이너 말고 정리가 필요 없는 구조를 만드는 디자이너가 되셔야 해요.
아 진짜 공감되는 게, 이 고민 7년차인 지금도 완전히 사라지진 않았어요. 다만 관점이 좀 바뀌었는데, 핵심은 정리의 양이 아니라 정리의 기준을 개발자랑 합의하는 거예요. 저도 예전엔 간격 컬러 전부 일일이 표기했거든요. 그래도 질문은 오더라고요. 어느 순간 깨달은 게, 개발자분들이 물어보는 건 제가 빠뜨려서가 아니라 본인 작업 흐름에서 재확인이 필요한 시점에 물어보는 거였어요. 놓친 게 아니라 소통 방식이 다른 겁니다. 그래서 지금은 시안 넘기기 전에 10분짜리 워크스루를 같이 하는 걸로 바꿨는데, 주석 30분 다는 것보다 훨씬 효율적이에요. 스타트업이면 더더욱 문서 정리보다 짧은 싱크 한 번이 질문 열 개를 줄여줍니다. 정리를 더 잘하겠다는 방향보다 어떤 정보를 어떤 형태로 원하는지 한 번만 물어보세요.
혹시 피그마 말고 다른 툴로 핸드오프하시는 분들도 계신가요? 저 산업디자인 전공이라 아직 실무 핸드오프 경험은 없는데, 학교 프로젝트에서 개발 전공 팀원이랑 협업할 때 비슷한 상황이 있었거든요. 분명 간격이랑 사이즈 다 적어서 넘겼는데 매번 카톡으로 "이 여백 위에서부터야 아래에서부터야" 이런 질문이 와서 당황했던 기억이요. 채원님 글 읽으면서 궁금한 게, 컬러값이나 간격 같은 수치 정보를 써놓는 것과 별개로 디자인 의도나 인터랙션 흐름 같은 것도 따로 설명하세요? 저는 그냥 화면 캡처해서 화살표 그려가며 설명했었는데 이게 맞는 건지도 모르겠고. 스타트업이면 프로세스를 직접 만들어가야 하는 거잖아요, 그 과정 자체가 되게 부담될 것 같은데 어떻게 버티시는지도 솔직히 궁금합니다
분야가 달라서 조심스럽긴 한데, 질문 자체를 좀 다른 각도에서 볼 수도 있지 않나 싶어요. 저는 패키지 쪽이라 피그마 핸드오프는 경험이 없고, 대신 인쇄소에 파일 넘기는 게 일상인데요. 도무선 좌표, 별색 코드, 코팅 범위 전부 표기해놔도 인쇄소에서 확인 전화 오는 건 마찬가지예요. 처음엔 내가 뭘 빠뜨렸나 자책했는데, 돌이켜보면 받는 쪽에서 확인차 물어보는 거였던 경우가 훨씬 많았거든요. 혹시 개발자분이 질문하시는 것도 정보가 없어서가 아니라 한 번 더 확인하려는 절차일 수도 있지 않을까요? 분야는 다르지만 넘기는 쪽에서 어디까지 책임져야 하나 그 경계의 스트레스는 너무 공감돼서 댓글 남겨봅니다.
아 이거 읽으면서 좀 놀랐는데, 채원님이 이미 간격이랑 컬러값까지 다 써놓고 계시다는 거잖아요. 솔직히 그 정도면 꽤 잘하고 계신 겁니다. 12년 하면서 느낀 건, "이거 몇 px이에요?" 그 질문이 정리를 덜 해서 나오는 게 아닐 때가 훨씬 많다는 거예요. 개발자분이 피그마 inspect 기능을 안 쓰시거나 파일 어디를 봐야 할지 모르는 경우가 대부분이었어요. 그래서 저는 정리량을 늘리는 방향을 아예 접고, 넘기기 전에 5분짜리 워크스루를 같이 하는 걸로 바꿨거든요. 파일 구조랑 컴포넌트 네이밍 규칙만 화면 공유로 한 번 훑어주면 그 뒤로 질문이 확 줄어요. 스타트업이면 특히, 완벽한 문서보다 같은 언어를 맞추는 게 핵심이에요. 주석 스무 개보다 대화 한 번이 낫습니다.
혹시 질문 받는 것 자체를 너무 무겁게 받아들이고 계신 건 아닌가 싶어서 댓글 남겨봅니다. 채원 선배님이 "물어보면 내가 뭘 빠뜨린 건가 싶다"고 쓰신 부분이 저한테는 글에서 제일 마음에 걸렸거든요. 저는 아직 학교 팀플 수준이라 실무 핸드오프를 조언드릴 처지는 전혀 아닌데, 프로젝트에서 개발 파트 친구가 뭔가 물어올 때 저도 똑같은 반응이었어요. 근데 나중에 들어보니 그 친구는 제가 적어둔 거 다 봤는데 그냥 더블체크 차원에서 물어본 거였더라고요. 간격에 컬러값까지 정리해두시는 선배님이 질문 하나에 스스로를 탓하실 필요는 없을 것 같아요. 오히려 궁금한 건 개발자분한테 왜 물어보셨는지 역으로 여쭤보신 적 있으신지요? 의외로 정리 문제가 아닐 수도 있을 것 같아서요.
디자인 토큰 시스템 한번 도입해보시는 거 추천드려요. 저도 스타트업 거치면서 같은 루프 돌았는데, 결국 해결한 건 피그마 variables 기능으로 컬러랑 spacing을 토큰화해서 개발 쪽 CSS 변수명이랑 1:1 매핑시킨 거였어요. gray-300이 #D1D5DB이고 spacing-4가 16px이라는 걸 시안마다 쓰는 게 아니라 토큰 이름 자체가 곧 스펙이 되는 구조요. 이렇게 하면 개발자분이 "이거 몇 px이에요?" 대신 토큰명만 보고 바로 코드에 반영할 수 있어서, 채원님이 매번 수치 적어놓는 그 반복 작업이 거의 사라져요. 초기 세팅에 반나절 정도 걸리긴 하는데, 그 이후로는 핸드오프 시간이 체감상 절반 이하로 줄어듭니다. 정리의 양을 늘리는 게 아니라 정리의 구조를 바꾸는 게 핵심이에요.
얼마 전에 인턴하면서 BX 가이드라인 파일 정리해서 넘긴 적이 있었는데, 그때 개발자분이 아니라 마케팅 쪽에서 비슷한 질문이 쏟아졌거든요. 분명 컬러코드도 다 적어놨는데 "이거 정확히 뭔 색이에요?" 같은 연락이 오니까 솔직히 좀 당황스러웠습니다. 저는 그게 UI 핸드오프가 아니라 브랜드 자산 전달이라 맥락이 다르긴 한데, 채원님 글 읽으면서 결국 본질은 같은 거 아닌가 싶었어요. 받는 사람이 어떤 방식으로 파일을 소비하는지를 모르면 아무리 꼼꼼해도 빈틈이 생기는 거잖아요. 근데 그걸 파악하려면 시간이 또 드는 거고요. 혹시 채원님은 개발자분한테 직접 "어떤 형태로 주면 제일 편하세요?"라고 여쭤보신 적 있으신가요? 저는 아직 그 질문을 먼저 꺼내는 게 좀 무섭습니다.
편집 디자인 쪽이라 피그마로 개발자한테 넘기는 일은 많지 않은데, 채원님 글 읽으면서 인쇄소 핸드오프할 때랑 결이 비슷하다고 느꼈어요. 재단선, 도련, 별색 코드 다 정리해서 보내도 인쇄소에서 "이거 CMYK 변환된 거 맞아요?" 연락이 오거든요. 처음엔 저도 뭘 빠뜨렸나 싶어서 스트레스였는데, 몇 번 겪다 보니까 그게 상대방 나름의 확인 절차에 가깝다는 걸 알게 됐어요. 특히 처음 같이 일하는 사이일수록 더 그렇고요. 결국 같은 질문이 반복되느냐 아니냐가 핵심인 것 같아요. 반복되면 정리 방식이나 구조를 바꿔야 한다는 신호이고, 새로운 질문이면 서로 기준을 맞춰가는 자연스러운 소통 과정이니까요. 분야가 달라서 피그마 쪽 팁은 못 드리지만, 그 질문 받을 때 자책하는 마음은 좀 내려놓으셔도 될 것 같아요.