[번역] Design Engineering at Vercel

[번역] Design Engineering at Vercel

2025-11-05

Vercel팀의 Design Engineering at Vercel를 번역한 글입니다.

Vercel의 디자인 엔지니어링

2024년 3월 29일

디자인 엔지니어가 무엇인지, Vercel에서 어떤 일을 하는지 알아보세요.

디자인 엔지니어는 인기를 얻고 있는 새로운 역할로, 혼란스러우면서도 흥미로운 역할입니다. 좋은 소프트웨어의 모양과 느낌에 대한 기대치가 그 어느 때보다 높아졌습니다. 디자인 엔지니어는 그 기대를 뛰어넘는 핵심 역할을 합니다.

이 게시물에서는 Vercel의 디자인 엔지니어링, 우리의 업무, 기술, 그리고 높은 수준의 세련미와 성능으로의 기여에 임하는 방법에 대해 설명합니다.

디자인 엔지니어란 무엇입니까?

Vercel의 디자인 엔지니어는 미적 감각과 기술적 역량을 겸비한 역할입니다. 문제를 깊이 이해하고, 직접 디자인하고, 개발하고, 제품으로 완성해 실행까지 주도적으로 이끌어냅니다.

팀은 다양한 기술과 호기심을 지닌 사람들로 구성되어 있습니다. 우리는 끊임없이 새로운 도구와 매체를 실험합니다. 이러한 다학제적 접근 방식을 통해 팀은 웹에서 가능한 것을 추진할 수 있습니다.

디자인 엔지니어는 무엇에 관심을 두나요?

디자인 엔지니어는 보는 사람의 공감을 불러일으키는 탁월한 유저 경험을 제공하는 데 관심을 두고 있습니다. 웹의 경우 이는 다음을 의미합니다.

  • 사용자에게 즐거움을 주는 인터랙션과 자연스러운 사용성
  • 재사용 가능한 컴포넌트/기본 요소 구축
  • 페이지 속도
  • 브라우저 간 지원
  • 포괄적인 입력 모드 지원(터치, 포인터 등)
  • 사용자 선호도 존중
  • 보조 기술 사용자가 접근 가능

예쁜 픽셀 뒤에는 많은 작업이 있습니다. 디자인 엔지니어는 시각적 매력을 뛰어넘어 뛰어난 사용자 경험을 제공하는 다른 부분도 잘 관리해야 합니다.

디자인 엔지니어는 어떤 일을 하나요?

Vercel의 디자인 엔지니어는 회사 전체에서 일하면서 브랜딩, 마케팅, 제품 개발 및 내부 디자인 시스템에 기여합니다. 이 협업은 다음 워크플로에 속합니다.

디자인 협업

디자인 엔지니어는 디자이너와 긴밀하게 협업하며, 전통적인 ‘디자인 → 개발’ handoff 과정을 건너뜁니다. 완성된 디자인을 넘기는 대신, 디자이너가 초안을 스케치하면 디자인 엔지니어와 함께 Figma 또는 코드 상에서 바로 수정·실험하며 최종 디자인을 만들어냅니다. 더 나은 결과를 위해 다양한 기술적 탐색과 시도가 함께 이루어집니다.

디자이너와 Design Engineer의 이런 긴밀한 협업은 아이디어 단계부터 실제 프로덕션까지 이어집니다. Design Engineer는 다음과 같은 부분에 대해 디자이너와 함께 논의하고 자문합니다:

• 구현 비용 대비 사용자 경험 임팩트 고려 예를 들어, 어떤 애니메이션은 핵심 경험이 아니라면 굳이 넣지 않아도 될 때가 있습니다.

• 컴포넌트를 일회성으로 만들지, 재사용 가능한 형태로 설계할지 판단

• 웹 표준과 경험에 기반한 방향성 제시 (웹 환경에서 더 적합한 방식이나 한계에 대한 조언 제공)

• Figma 밖에서 실험하는 것이 더 효율적인 디자인 프로토타이핑 예를 들어, 애니메이션, 키보드 인터랙션, 터치 제스처 등은 Figma보다 코드에서 바로 구현해보는 것이 이후 웹 반영 시 재작업을 줄여줍니다.

협업은 Slack 메시지, 스크린샷, 영상, 프리뷰 링크, 그리고 Zoom으로 진행됩니다.

제품 팀과의 협업

디자인 엔지니어는 보통 한 달 이상 걸리는 기능 출시를 지원하기 위해 제품 팀에 함께 합류합니다. 이때 디자이너가 참여할 수도 있고 참여하지 않을 수도 있습니다. 디자이너가 함께할 경우, 디자인 엔지니어는 UI 구현을 담당하고, 제품 팀은 API와 인프라 개발을 맡습니다.

디자이너가 참여하지 않는다고 해서 디자인 엔지니어가 디자인과 구현을 혼자 진행한다는 의미는 아닙니다. 이 경우 디자인 엔지니어가 초기 스케치를 만들고, 디자이너와 엔지니어 모두에게 피드백을 받아 방향을 다듬어 나갑니다.

독립적인 오너십

이는 보통 사용자 불편을 해소하는 기능으로, 며칠에서 몇 주 안에 출시할 수 있는 규모의 작업에 해당합니다. 디자인 엔지니어는 Figma 또는 코드로 솔루션의 초안을 만들고, 팀과 공유해 의견을 모은 뒤 피드백을 반영하여 최종적으로 출시까지 주도합니다.

팀은 디자인 주도 프로젝트에도 참여합니다. Design 팀에 속해 있다는 점은 Design Engineer에게, 일반적인 엔지니어링 백로그에서는 우선순위가 밀리기 쉬운 작업들도 주도적으로 발굴하고 추진할 수 있는 자율성과 권한을 제공합니다.

팀은 세련된 인터랙션, 프레임 드롭 없는 부드러운 경험, 브라우저 간 일관성, 그리고 접근성을 위해 적극적으로 리소스를 투자합니다. 디자인 주도 프로젝트의 예시는 다음과 같습니다:

  1. Vercel’s Geist font : Sans와 Mono 두 가지 스타일로 구성된 폰트. 모든 글리프를 확인하고 직접 사용해볼 수 있는 인터랙티브 플레이그라운드를 제공.
  2. Vercel’s design system documentation : 회사 전반의 엔지니어들이 Vercel 제품을 개발할 때 참고하는 인터랙티브 문서형 디자인 시스템 플레이그라운드.
  3. Vercel’s Design Team homepage : 새로운 웹 기술을 실험하고 디자인 관련 리소스를 제공하는 실험적 성격의 웹 페이지.
  4. Delighters in the Vercel Dashboard : Vercel Dashboard 곳곳에 적용된, 서비스에 생동감을 주고 사용자에게 즐거움을 선사하는 인터랙션 요소들.

워크플로우가 어떠하든, 우리는 양보다 질을 우선할 수 있는 여유와 환경을 갖고 있습니다. 우리가 출시하는 결과물이 완벽할 수 없다는 사실을 인정하고, 지속적으로 개선해 나가는 것이 핵심입니다. Iterate to Greatness는 Vercel의 핵심 원칙 중 하나로, 완벽주의 함정에 빠지지 않으면서도 비즈니스 목표와 장인 정신 사이의 균형을 유지하며 지속적으로 제품을 발전시키도록 돕는 철학입니다.

Design Engineering 도구 상자

Design Engineer에게 정해진 툴셋은 없습니다. “이 배경이 가장 좋다”라는 정답도 없습니다. 각자 다른 출발점에서 시작해 자신만의 좋은 감각을 쌓아왔습니다. 이러한 다양성은 서로의 역량이 팀 안에서 서로 보완되도록 만드는 핵심 요소입니다.

개인에게 모든 능력을 갖추길 기대하지는 않습니다. 하지만 팀은 다음과 같은 이유로 야심 있는 디자인도 함께 구현해낼 수 있습니다.

  • Design in Figma
  • Design in code
  • Write production code
  • Debug browser performance
  • Write GLSL shaders
  • Write copy
  • Create 3D experiences with Three.js
  • Create 3D models/scenes in Blender
  • Edit videos using CGI and practical camera effects

우리는 각자의 고유한 배경과 역량 덕분에 모든 일에서 협업합니다. 각자가 혼자서도 실행할 수 있지만, 가장 뛰어난 결과는 협업할 때 나온다는 것을 경험으로 알고 있습니다. 또한 우리는 특정한 프로세스나 도구에 얽매이지 않습니다. 중요한 것은 과정이나 툴이 아니라, 결과 그 자체입니다.

Design Engineering의 실제 사례

우리 팀의 작업은 Vercel 전반에서 확인할 수 있습니다:

Vercel에 합류하기

Vercel에서의 Design Engineering은 단순히 디자이너이자 엔지니어라는 의미를 넘어섭니다. 제품 개발 과정의 한 부분만 담당하는 것이 아니라, 결과에 대한 오너십을 갖는 역할입니다.

관심이 있나요? 우리는 Design Engineer를 채용하고 있습니다. 지금까지 Design Engineer라는 직함을 사용해본 적이 없어도 괜찮습니다. 앞서 보았듯, Design Engineer에게 “정해진 배경”이나 “정답인 스킬셋”은 없습니다.

채용 공고를 확인해보세요.