디자이너가 반응형페이지 외주개발하다,개발사랑 싸운 이유
'외주개발사는 다 똑같다'는 착각 속에서 배운 실무의 진짜 현실
안녕하세요~ 비니예요 :)
어제는 제가 완전 신입 시절에 했던 디자이너의 최악의 실수 썰을 올렸었죠ㅎㅎ
오늘은 조금 더 실무적인이야기를 해볼까 하는데요!
바로, 제가 실제로 반응형 페이지 만들다가 외주개발사랑 부딪혔던 썰이에요ㅠㅠ
이번엔 웃기다기보단... 진짜 눈물났던 경험담입니다ㅎㅎ
저는 당시 브랜드 웹사이트 리뉴얼을 맡았었고,
기획부터 디자인까지는 순조로웠어요.
근데 문제는 "반응형" 구현 단계에서 시작됐죠ㅠㅠ
반응형 페이지, 말은 쉬운데 현실은 달랐다...
처음엔 정말 간단했어요.
데스크탑-태블릿-모바일 이렇게 세 가지 기준으로만
디자인을 맞추면 될 줄 알았거든요!?
근데 개발팀에서는 "픽셀 단위로 안 맞는다",
"브라우저별로 다르게 보인다" 같은 피드백을 쏟기 시작했어요.
특히 모바일에서 버튼 간격이 달라지는 부분은
"그건 CSS 자동 비율이라 어쩔 수 없어요~"라며 그냥 넘어가려 하시더라고요ㅠㅠ
저는 "디자인 의도가 있는데요..." 하면서 설명했지만,
그쪽에서는 '디자이너가 너무 예민하다'는 반응이었어요.
그때 진짜 속으로 울뻔했어요 ㅜㅜ
진짜 화도 나고 억울하더라고요...하하
문제는 커뮤니케이션의 단위 차이
사실 싸움이라기보다는...
커뮤니케이션의 단위 차이때문이라는 걸 그때 처음 깨달았어요.
저는 "여백이 너무 좁아요"라고 말했는데,
개발자는 "그건 퍼센트 값이 달라져서 그래요"라고 하더라고요.
같은 걸 보는데 서로 다른 방식으로 이해하고 생각하고 있던 것이었죠...
결국은 미세 조정에 시간이 오래 걸리고, 일정도 밀렸어요ㅠ
그때 배운 점: 미리 '반응형 기준표'를 만들어라!
지금 돌아보면, 제가 배운 가장 큰 교훈은
"반응형 기준을 미리 문서로 정리하자"예요.
다음번에는 아래 세 가지를 꼭 정리해서 시작했어요:
브레이크포인트 명확히 정하기 (예: 1280px / 768px / 375px)
여백, 폰트, 버튼 규칙을 통일하기
Figma에 '디자인 토큰' 형태로 단위 공유하기
이렇게만 해도 개발자분들이
"이건 어떤 기준으로 계산돼야 하는지" 명확히 이해해주시더라고요ㅎㅎ
'디자이너의 시선을 이해하는 팀'이 중요하다
그 이후로 저는 기술력보다 '디자이너 친화적인 프로세스'를 우선으로 봐요.
예를 들어 제가 협업했던 외주개발사 똑똑한개발자 팀은
개발 단계마다 디자인 QA 전용 세션을 열어주셨어요.
보통은 디자이너가 결과물을 보고 수정사항을 전달해야 하는데,
이 팀은 오히려 먼저 "여백, 비율, 타이포 깨짐"을 찾아서 피드백을 주시더라고요.
심지어 디자이너 입장에서 헷갈리기 쉬운 부분을
직접 캡처해서 Figma에 코멘트로 달아주는 방식이었어요.
그 덕분에 커뮤니케이션 속도도 빠르고, 감정 소모도 훨씬 줄었어요ㅎㅎ
무엇보다 인상적이었던 건,
"디자인이 구현 과정에서 어떻게 변형될 수 있는지"를
정확히 설명해주는 점이었어요.
"이건 CSS 구조상 여백 비율을 이렇게 조정하면 비슷하게 구현돼요"처럼요!
이런 소통이 진짜 '디자이너를 위한 개발팀'이라는 느낌이었어요ㅎㅎ
물론 이렇게 외주개발사와 싸움을 한 것이 자랑은 아니지만...
애시당초 싸울 일이 없는 개발사를 고르는 안목 또한 아주 중요하지 않을 지...
꿀팁 드립니다...ㅎㅎ
외주개발사 고를 때 체크하면 좋은 포인트
혹시 앞으로 외주로 웹페이지를 제작할 예정이라면,
이 세 가지만 꼭 기억해두세요!
반응형 QA를 디자이너와 함께 진행하는 팀인지
단순 구현이 아니라 시안의 의도까지 해석해주는 팀인지
커뮤니케이션 툴(노션·슬랙 등)이 투명하고 기록이 남는 구조인지
이 세 가지만 잘 맞는 팀이면
디자이너 입장에서 훨씬 편하고 결과물도 예쁘게 나와요 :)
저처럼 반응형 때문에 마음고생하지 않길 바라며,
디자이너와 개발자가 같은 언어로 대화하는 법 꼭 기억해주세요!
읽어주셔서 감사해요~ 다음 글에서 또 만나요 :)
