웹 디자이너 없는 웹

Xfive는 전담 디자이너가 없는 웹 개발 회사였지만, Figma를 활용해 낡고 복잡해진 홈페이지를 직접 redesign했다. 브라우저 기반 협업과 실시간 댓글 기능으로 마케팅·영업·개발 등 여러 이해관계자의 피드백을 한곳에서 관리했으며, 개발자는 별도 도구 없이 디자인 사양과 코드를 확인할 수 있었다. 이 경험을 통해 Figma가 디자인 제작부터 검토, 프로토타이핑, 개발자 인계까지 연결하는 효과적인 협업 플랫폼임을 확인했다.

리디자인이 필요했던 배경

• Xfive는 2006년 설립된 웹 개발 회사로, 크라쿠프·멜버른·샌프란시스코에 사무실을 두고 있다.
• 일반적으로 고객이 제공한 디자인을 구현하는 방식이어서 사내에 디자이너를 두지 않았다.
• 리브랜딩과 신규 웹사이트 출시 이후 회사는 성장했지만, 홈페이지와 일부 주요 영역은 그대로 남아 있었다.
• Customers와 Work 섹션이 outdated 상태였고, 다음과 같은 구조적 문제가 있었다.
  • 혼란스러운 전역 내비게이션
  • 서로 경쟁하는 지나치게 많은 CTA
  • 탐색과 유지보수가 어려운 다수의 랜딩 페이지

디자이너가 아닌 직원의 Figma 활용

• 콘텐츠 제작자인 Lubos Kmetko가 Figma를 시험적으로 사용한 뒤 홈페이지 리디자인을 맡았다.
• 전문 디자이너는 아니었지만 Figma를 이용하면 직접 시안을 만들 수 있다고 판단했다.
• 홈페이지, Customers 영역, Work 섹션을 새로 설계하면서 내비게이션과 CTA, 랜딩 페이지 구조를 단순화했다.
• 중요한 조건은 다양한 부서가 디자인을 검토하고 의견을 제출할 수 있어야 한다는 점이었다.

브라우저 기반 프로토타이핑과 협업

• Lubos는 완성한 각 페이지의 목업을 링크로 공유했다.
• 마케팅, 영업, 제작, 편집, 개발팀은 물론 COO까지 브라우저에서 디자인을 열고 댓글을 남길 수 있었다.
• Figma의 Comments 기능을 통해 다음 작업을 한 공간에서 처리했다.
  • 디자인에 대한 의견 교환
  • 사용자 인터랙션 설명
  • 피드백을 반영한 실시간 수정
  • 변경 내역과 최신 버전 동기화
• 별도의 파일 다운로드나 프로그램 설치 없이 참여할 수 있어 비디자이너도 구체적인 피드백을 제공하기 쉬웠다.
• 모든 피드백이 디자인 파일과 함께 보존되어, 이메일이나 분산된 문서보다 검토 과정의 추적성이 높아졌다.

디자이너-개발자 인계 간소화

• 시안이 승인된 뒤에도 이메일이나 Box로 파일을 주고받지 않고 Figma 링크를 사용했다.
• 개발자는 브라우저에서 디자인 파일을 열어 별도 도구 없이 사양을 확인했다.
• Code Mode를 통해 다음 정보를 확인하거나 내보낼 수 있었다.
  • 요소의 크기
  • 색상
  • 패딩 등 간격
  • CSS
  • iOS 및 Android 코드
• 이를 통해 버전 관리 문제와 구현 과정의 추측을 줄이고, 더 빠르고 정확하게 개발할 수 있었다.
• Figma는 Photoshop의 디자인 기능과 Google Docs의 협업 방식을 결합하면서도 상대적으로 가볍고 단순한 도구로 평가됐다.

클라이언트 프로젝트로의 확장

• Xfive는 이번 리디자인을 Figma를 실제 고객 프로젝트에 적용하기 위한 시험대로 삼았다.
• 향후에는 기능성 프로토타입을 팀원과 고객에게 공유하고 실시간으로 협업할 수 있다고 보았다.
• PDF나 JPEG를 이메일에 첨부해 디자인 아이디어를 전달하던 기존 방식에서 벗어나:
  • 프로토타입 공유
  • 구현 세부사항 논의
  • 개발자 인계 를 하나의 플랫폼에서 처리하려 했다.

전담 디자이너가 없는 조직이라도 브라우저 기반 도구와 명확한 협업 프로세스를 갖추면 웹 리디자인을 진행할 수 있다. 특히 Figma는 디자인 검토부터 개발 사양 확인까지 연결하므로, 여러 부서와 외부 고객이 함께 참여하는 프로젝트에 유용한 선택지다.