나도 연차가 낮았을 때는 디자이너가 준 시안을 보면서 '이걸 어떻게 코드로 구현하라는 거지?' 하며 속으로 끙끙 앓았던 적이 많았어. 피그마 시안대로 똑같이 만들었다고 생각했는데도 "이 부분 1픽셀이 안 맞아요"라는 피드백을 받으면 솔직히 억울하고 답답하기도 했거든. 혹시 너도 지금 비슷한 고민으로 밤잠을 설치고 있진 않니?
"그냥 시안대로 만들었는데..." 왜 자꾸 어긋났을까
신입 시절의 나는 디자이너가 준 시안을 그저 '코드로 번역해야 할 대상'으로만 생각했어. 픽셀 값 하나, 마진 값 하나에 담긴 맥락은 전혀 모른 채 기계적으로 CSS를 채워 넣었지. 그러다 보니 내 눈에는 완벽해 보이는 화면이 디자이너 눈에는 어딘가 어색하고 엉성해 보였던 거야. 그때는 디자이너가 꼼꼼하게 피드백을 줄 때마다 나를 감시하는 것 같아서 마음이 잔뜩 위축되곤 했어. 하지만 시간이 흐르며 깨달았지. 우리는 같은 화면을 보고 있었지만, 서로 완전히 다른 언어로 대화하고 있었다는 것을 말이야.
피그마(Figma) 뒤에 숨지 말고, 먼저 다가가 물어보기
어느덧 9년차 프론트엔드 개발자가 되고 나니, 협업을 잘하는 진짜 비결은 화려한 툴 사용법이 아니라 결국 '대화'에 있더라고. 예전에 한 디자이너가 모바일 화면에서 굉장히 복잡한 인터랙션을 요구한 적이 있었어. 예전 같았으면 "이거 성능 떨어져서 안 돼요"라고 딱 잘라 거절했을 텐데, 그날은 디자이너 자리로 직접 찾아갔지. 그리고 이렇게 물어봤어.
- "이 인터랙션을 통해 유저에게 어떤 느낌을 전달하고 싶으신가요?"
- "만약 이 효과가 꼭 필요하다면, 성능을 위해 이 부분을 조금 타협해서 이렇게 구현해 보는 건 어떨까요?" 내가 안 되는 이유를 대며 방어벽을 치는 대신, 문제를 같이 해결하려는 태도를 보이자 디자이너도 크게 안심하며 고마워하더라고. 결국 우리는 서로가 만족하는 최선의 타협점을 찾아냈어.
공통의 언어, '디자인 시스템' 구축하기
서로의 스트레스를 줄이고 더 효율적으로 일하기 위해 내가 제안했던 방법은 '공통의 약속'을 만드는 것이었어. 매번 픽셀 단위로 소통하는 대신 아래와 같은 규칙들을 정했지.
- 디자인 토큰 도입: 폰트 크기, 컬러 값 등을
font-size-sm,primary-color처럼 이름으로 정의해서 사용하기 - 컴포넌트 단위 소통: 버튼이나 인풋 박스 같은 공통 UI의 상태(Hover, Active, Disabled)를 미리 정의해 두고 재사용하기 이렇게 공통의 기준을 세우고 나니까 서로 오해할 일도 줄어들고, 개발 속도도 엄청나게 빨라지더라고. 디자이너의 의도를 더 깊이 이해하게 되니 일하는 게 진심으로 즐거워지기 시작했어.
💬 수민의 한마디 디자이너와 개발자는 대립하는 관계가 아니라, '더 좋은 서비스'라는 같은 목적지를 향해 달리는 러닝메이트야. 기술적인 한계를 설명할 때는 안 되는 이유 대신, '이렇게 하면 비슷하게 구현할 수 있다'는 대안을 먼저 제시해 봐. 그 작은 배려가 협업의 온도를 완전히 바꾸어 놓을 거야. 지금 겪고 있는 그 소통의 어려움은 네가 개발자로서 한 단계 더 크게 성장하기 위한 아주 자연스러운 과정이야. 다음 출근 때는 디자이너에게 슬쩍 다가가 시안에 담긴 고민을 먼저 물어보는 건 어떨까? 네 따뜻한 노력이 반드시 멋진 결과물로 돌아올 거라고 믿어. 언제나 너를 응원할게.