developer-experience

‘텍스트로서의 AI’ 시대는 끝났다. 실행이 새로운 인터페이스다. (새 탭에서 열림)

제시해주신 내용에는 요약할 블로그의 **본문이 포함되어 있지 않고, 저자(Gwen Davis)의 프로필 정보만 명시되어 있습니다.** Gwen Davis는 GitHub의 시니어 콘텐츠 전략가로서 **개발자 경험(DX), AI 기반 워크플로우, 커리어 성장**에 관한 글을 주로 작성합니다. 만약 그녀가 작성한 특정 블로그 글(예: "개발자 경험이란 무엇인가" 또는 "AI가 개발자 경험에 미치는 영향" 등)을 요약하기 원하신다면, **해당 글의 본문을 복사하여 붙여넣어 주세요.** 본문을 주시면 요청하신 다음 형식에 맞춰 즉시 요약해 드리겠습니다. --- ### (예시: 본문을 주셨을 때 제가 작성해 드릴 요약의 모습입니다) **[글의 핵심 요약]** 효율적인 개발자 경험(DX)은 단순히 도구의 문제가 아니라 개발자가 느끼는 마찰을 줄이고 '몰입 상태(Flow)'를 유지하는 데 있습니다. 특히 AI는 반복적인 작업을 자동화함으로써 인지 부하를 줄여 핵심 문제 해결에 집중하게 돕습니다. **개발자 경험을 결정짓는 3가지 요소** * **피드백 루프(Feedback Loops):** 코드를 작성하고 결과를 확인하기까지의 속도가 개발 효율성을 결정합니다. * **인지 부하(Cognitive Load):** 도구의 복잡성이나 불필요한 의사결정 과정을 줄여야 창의적인 작업이 가능해집니다. * **몰입 상태(Flow State):** 방해 요소를 제거하여 개발자가 문제 해결에 깊게 빠져들 수 있는 환경을 조성해야 합니다. **AI 기반 워크플로우의 역할** * **보일러플레이트 제거:** AI가 반복적인 코드 작성을 대신하여 개발의 진입 장벽을 낮춥니다.

쓰기 쉬운 Toss Front SDK (새 탭에서 열림)

좋은 SDK는 단순히 기능을 제공하는 것을 넘어, 사용자가 올바른 방법으로만 사용하도록 유도하고 휴먼 에러를 구조적으로 방지해야 합니다. 이를 위해 복잡한 내부 로직을 사용자의 ‘의도’를 중심으로 추상화하는 퍼사드(Facade) 패턴을 적용하여, 사용자가 최소한의 코드로도 안정적인 결과물을 만들 수 있는 환경을 구축해야 합니다. 고수준 인터페이스를 통해 대다수의 유즈케이스를 해결하면서도, 특수한 상황을 위한 저수준 인터페이스라는 ‘탈출구’를 마련하는 것이 설계의 핵심입니다. ### 의도 기반의 퍼사드(Facade) 패턴 재정의 - 퍼사드 패턴의 본질은 단순히 복잡한 기능을 숨기는 것이 아니라, 내부 구현을 ‘사용자의 의도(Intent)’를 기준으로 재구성하는 데 있습니다. - "서버를 열고, 핸들러를 등록하고, 에러를 처리한다"는 개별적인 절차를 "서버를 시작한다"는 하나의 자연스러운 목적으로 통합합니다. - 인증, 재시도 로직, 상태 관리, 클린업(Cleanup) 등 인지 부하를 일으키는 요소들을 SDK 내부로 은닉하여 사용자 측의 실수를 원천 차단합니다. ### AWS CDK 사례를 통한 추상화 계층의 이해 - AWS CDK의 L1 구문은 리소스의 모든 속성을 제어하는 저수준(low-level) 인터페이스인 반면, L2 구문은 직관적인 의도 기반의 고수준(high-level) 추상화를 제공합니다. - S3 버킷 생성 시 L1은 모든 세부 설정을 직접 챙겨야 하지만, L2는 자주 쓰이는 옵션을 간단한 프로퍼티로 제공하고 내부적인 변환은 SDK가 담당합니다. - SDK 설계 시에도 이와 같이 복잡한 주변 구성을 자연스러운 API 흐름으로 이어 붙일 수 있도록 설계해야 합니다. ### 파레토 법칙을 적용한 인터페이스 설계 - 전체 사용 사례의 80%에 해당하는 공통 유즈케이스는 고수준 인터페이스(Facade)를 통해 워크플로우를 자동화하여 제공합니다. - 나머지 20%의 특수한 요구사항이나 세밀한 제어가 필요한 상황을 위해 저수준 API인 ‘탈출구(Escape Hatch)’를 함께 유지합니다. - 이러한 이중 구조는 단기적인 개발자 경험(DX) 향상뿐만 아니라, SDK의 장기적인 호환성과 확장성을 보장하는 핵심 전략이 됩니다. ### 편의성과 유연성 사이의 트레이드오프 관리 - 추상화 수준이 높아지면 사용자는 편리해지지만, SDK 내부에서는 더 정교한 오케스트레이션 로직을 관리해야 하는 유지보수 비용이 발생합니다. - 세밀한 제어가 차단될 경우 특정 상황에서 제약이 될 수 있으므로, 고수준 인터페이스에만 의존하지 않고 저수준 조작이 가능한 균형점을 찾는 것이 중요합니다. - 결과적으로 잘 설계된 인터페이스는 사용자가 별도의 가이드 없이도 올바른 패턴을 유지하며 메모리 누수와 같은 장애 상황을 방지하게 합니다. 단순히 "동작하는" SDK를 만드는 단계를 넘어, 사용자가 직관적으로 이해하고 안전하게 사용할 수 있는 "쓰기 쉬운" SDK를 지향해야 합니다. 이를 위해 사용자의 의도를 최우선으로 고려한 추상화 계층을 설계하고, 대다수의 편의성과 소수의 유연성을 동시에 잡을 수 있는 다층적 구조를 도입할 것을 권장합니다.

멀티 에이전트 워크 (새 탭에서 열림)

제공해주신 '글 내용'은 저자(Gwen Davis)의 프로필 정보(Bio) 한 문장뿐입니다. 이 내용만으로는 요청하신 '소프트 삭제'나 '기술적 디테일'이 포함된 상세 요약을 작성하기에 정보가 부족합니다. 요약하시려는 **블로그 글의 본문 전체**를 다시 붙여넣어 주시면, 요청하신 지침과 형식에 맞춰 완벽하게 요약해 드리겠습니다. 만약 제공된 문장(Gwen Davis의 전문 분야)을 바탕으로 그녀가 주로 다루는 주제들을 요약해 드려야 한다면, 다음과 같이 정리할 수 있습니다. --- Gwen Davis는 GitHub의 시니어 콘텐츠 전략가로서 **

AI 및 엔지니어링 생산성에 (새 탭에서 열림)

Dropbox는 AI 도구를 단순한 실험을 넘어 비즈니스 가치 창출을 위한 핵심 전략으로 채택하고 있으며, 이를 통해 엔지니어링 생산성의 비약적인 향상을 꾀하고 있습니다. 최근 개최된 경영진 라운드테이블을 통해 AI 도입이 코드 리뷰와 디버깅 등 개발 전반의 효율을 높이는 동시에, 품질 유지와 비즈니스 성과 연결이라는 새로운 도전 과제를 제시하고 있음을 확인했습니다. 결과적으로 성공적인 AI 전환을 위해서는 기술적 도입뿐만 아니라 리더십의 조율과 조직적 프레임워크의 변화가 반드시 병행되어야 한다는 결론을 도출했습니다. ### AI를 통한 Dropbox의 생산성 가속화 전략 * **전사적 우선순위 설정:** AI 도입을 단순한 풀뿌리 수준의 실험이 아닌 회사 차원의 핵심 과제로 격상하여 리더십의 지지를 확보하고, 새로운 도구 도입을 위한 계약 및 승인 절차를 대폭 간소화했습니다. * **자체 AI 플랫폼 구축:** 대규모 다국어 모노레포(Monorepo)라는 특수한 환경에 맞추기 위해 기성 AI 도구에만 의존하지 않고, 풀 리퀘스트(PR) 빌드 실패 시 AI가 자동으로 수정안을 제안하는 자체 도구를 개발하여 운영 중입니다. * **데이터 기반의 성과 추적:** 엔지니어당 월간 PR 처리량(Throughput)을 핵심 지표로 설정하여 AI 도구 활용도가 높은 그룹의 생산성이 월등히 높음을 확인했으며, 내부 설문을 통해 개발자들의 긍정적인 감성 지표 변화를 모니터링하고 있습니다. * **개발자 자율성 부여:** 팀별로 최적의 도구를 선택할 수 있는 유연성을 제공하여 도입 과정에서의 마찰을 줄이고, 소프트웨어 개발 생애 주기(SDLC) 전반에서 AI가 자연스럽게 스며들 수 있도록 지원합니다. ### AI 시대의 엔지니어링 리더십과 조직 운영 * **균형 잡힌 생산성 관리:** AI로 인한 속도 향상이 코드 품질 저하나 장기적인 유지보수 비용 상승으로 이어지지 않도록 생산성과 품질 사이의 엄격한 균형 감각이 요구됩니다. * **리더십 정렬과 규범화:** 기술 리더십은 효과적인 AI 사용 규범을 설정하고 집행하는 중추적인 역할을 수행해야 하며, AI 배포 속도에 대해 경영진과 명확한 공감대를 형성해야 합니다. * **인적 역량의 공식적 평가:** AI 활용 능력을 엔지니어의 경력 개발 프레임워크(Career Framework)에 공식적으로 포함시켜 조직의 전략적 방향성을 명확히 하고, 비개발 직군의 생산성 향상으로도 그 범위를 확장하고 있습니다. ### 향후 과제 및 실무적 제언 * **유휴 용량의 전략적 재투자:** AI가 확보해 준 엔지니어링 여력을 기술 부채 해결, 시스템 마이그레이션, 서비스 신뢰성 강화 등 고부가가치 영역에 우선적으로 투입해야 합니다. * **비즈니스 성과와의 직접 연결:** 단순히 "코딩 속도가 빨라졌다"는 지표를 넘어, 향후에는 생산성 향상이 실제 비즈니스 결과물과 제품 출시 속도(Velocity)에 어떻게 기여하는지 직접적으로 매핑하는 운영 모델을 구축하는 것이 핵심입니다.

나의 에어비앤비 입 (새 탭에서 열림)

안나 술키나(Anna Sulkina)는 20년 이상의 경력을 가진 엔지니어링 리더로, 하드웨어 진단에서 시작해 프론트엔드와 백엔드를 거쳐 현재 에어비앤비의 인프라 및 클라우드 부문을 이끌고 있습니다. 그녀는 트위터 재직 당시 대규모 분산 시스템의 기술적 한계를 극복하고 조직적 합의를 통해 GraphQL 도입을 성공시킨 경험을 바탕으로, 기술적 역량과 리더십의 조화를 강조합니다. 현재 그녀는 에어비앤비에서 개발자 플랫폼의 전략적 방향성을 설정하고 고성과 팀을 구축하여 비즈니스 가치를 극대화하는 데 전념하고 있습니다. ### 기술적 호기심의 시작과 초기 경력의 도전 * 소련 붕괴 시기 우크라이나에서 성장하며, 컴퓨터 하드웨어를 조립하던 오빠의 영향으로 기술에 대한 호기심을 키웠습니다. * 미국 이주 초기에는 프로그래밍 언어보다 영어 소통에 더 큰 어려움을 겪었으나, 버클리 익스텐션 등을 통해 C++과 Java 지식을 확장하며 전문성을 쌓았습니다. * 첫 직장인 하드웨어 진단 분야를 시작으로 기술 스택의 아래 단계로 점진적으로 내려가며 하드웨어, 프론트엔드, 백엔드를 아우르는 폭넓은 시각을 갖게 되었습니다. ### 리더십으로의 전환과 팀 구축의 즐거움 * 개인 기여자(IC)로서의 역량뿐만 아니라 리더십 잠재력을 인정받아 텔레콤 스타트업과 컴캐스트(Comcast)를 거치며 엔지니어링 매니저로 성장했습니다. * 좋은 리더가 있는 팀과 그렇지 않은 팀의 차이를 직접 목격하며 사람을 코칭하고 고성과 팀을 만드는 과정에서 큰 흥미를 느꼈습니다. * 기술 스택의 깊이가 깊어질수록 리더십의 책임 또한 커지는 궤적을 그리며 인프라 부문의 리더로 자리매김했습니다. ### 트위터에서의 분산 시스템 설계와 기술 혁신 * 약 9년 동안 트위터에 재직하며 'Fail Whale' 시기와 엘런 디제너러스의 셀카 사건 등 대규모 트래픽 장애를 해결하는 핵심적인 역할을 수행했습니다. * **실패를 위한 설계:** 모놀리스 구조에서 마이크로서비스 아키텍처로 전환하며, 복잡한 분산 시스템에서는 실패를 피하는 것이 아니라 '실패를 대비한 설계'가 필수적임을 배웠습니다. * **합의를 통한 혁신:** 해커톤에서 시작된 GraphQL 도입을 위해 전사적인 기술적 합의를 이끌어냈으며, 이는 기존 REST 서비스를 대체하고 제품 개발 속도를 획기적으로 높이는 결과로 이어졌습니다. ### 에어비앤비에서의 전략적 정렬과 플랫폼 고도화 * 평소 여행을 좋아하고 에어비앤비 서비스의 팬이었던 점이 이직의 결정적 계기가 되었으며, 개인적 관심사와 기술적 전문성을 일치시켰습니다. * **개발자 플랫폼 개선:** 파편화되어 있던 개발자 플랫폼 조직의 전략을 명확히 하고, 내부 이해관계자들과의 신뢰를 구축하는 데 집중했습니다. * **조직적 정렬:** "우리는 왜 여기에 모였는가?"와 같은 근본적인 질문에 답하며 리더십 코칭과 팀 간 정렬을 통해 비즈니스 가치를 창출하는 고성과 조직을 재정비했습니다. 안나 술키나의 여정은 복잡한 시스템일수록 기술적 완벽주의보다는 실패를 수용하는 유연한 설계가 중요하다는 점을 시사합니다. 또한, 기술적 혁신은 단순히 뛰어난 코드로 완성되는 것이 아니라, 조직 내의 합의를 이끌어내고 구성원들의 목표를 하나로 정렬하는 리더십을 통해 비로소 실현될 수 있음을 보여줍니다.

실무에서의 지속적인 AI: 에 (새 탭에서 열림)

GitHub은 개발자 경험(DX)을 최우선으로 하는 세계 최고의 개발 플랫폼으로, 인공지능(AI) 기술과 강력한 보안 기능을 워크플로우 전반에 통합하여 제공합니다. 개발자는 이를 통해 복잡한 보안 위협이나 인프라 환경에 대한 고민 없이, 오직 코드 혁신과 가치 창출에만 집중할 수 있는 환경을 누리게 됩니다. **세계 최상의 개발자 경험(DX) 구축** * 개발자의 생산성을 극대화하기 위해 직관적이고 효율적인 작업 환경을 제공하며, 개발 생태계 내에서의 원활한 협업을 지원합니다. * 코드 작성부터 배포까지의 과정을 단순화하여 개발자가 본연의 업무인 '혁신'에만 전념할 수 있도록 돕습니다. **AI 기반의 지능형 개발 플랫폼** * 플랫폼의 모든 단계에 AI 기술을 내재화하여 코드 작성 보조, 자동화, 문제 해결 등 개발 주기의 전 과정을 스마트하게 개선합니다. * AI를 단순한 보조 도구를 넘어, 개발 프로세스의 속도와 품질을 동시에 높이는 핵심 엔진으로 활용합니다. **개발 전 단계에 통합된 보안 체계** * 보안을 별도의 단계로 분리하지 않고, 코드 설계부터 최종 배포까지 모든 과정에 보안 기능을 기본적으로 포함(Security incorporated into every step)합니다. * 개발자는 플랫폼 내에서 제공되는 보안 가이드를 통해 취약점을 조기에 발견하고 대응함으로써, 더욱 신뢰할 수 있는 소프트웨어를 개발할 수 있습니다. GitHub은 AI와 보안이 결합된 통합 생태계를 지향합니다. 개발 효율성을 높이고 보안 사고를 미연에 방지하고자 하는 팀에게 GitHub은 단순한 저장소 이상의 강력한 혁신 도구가 될 것입니다.

토스페이먼츠의 Open API 생태계 (새 탭에서 열림)

토스페이먼츠는 Open API를 단순한 통신 수단을 넘어 수십 년간 안정적으로 운영되어야 할 핵심 인프라로 정의합니다. 20만 개 이상의 가맹점이 사용하는 환경에서 개발자의 인지 부하를 줄이고 연동 신뢰성을 높이기 위해, 리소스 중심의 인터페이스 설계와 자동화된 생태계 구축을 최우선 과제로 삼고 있습니다. 이러한 철학은 기술적 완성도를 넘어 가맹점 개발자가 겪는 전반적인 경험(DX)의 질을 결정짓는 근간이 됩니다. ### 리소스 중심의 일관된 인터페이스 설계 * **직관적인 경로 규칙**: 가맹점이 URL 구조만 보고도 기능을 예측할 수 있도록 `버전/도메인/리소스 고유 ID` 순서의 일관된 경로 체계를 사용합니다. 특정 리소스 지정 외의 조건은 쿼리 파라미터나 JSON 필드로 분리하여 명확성을 높였습니다. * **중첩 객체를 활용한 모듈화**: 카드 정보나 현금영수증 내역처럼 여러 API에서 반복되는 데이터는 JSON의 계층 구조를 활용해 객체 형태로 모듈화합니다. 이는 데이터 중복을 줄이고 응답의 의미를 명확하게 전달하며, null 체크 등 가맹점의 코드 로직을 간소화합니다. * **도메인별 객체 재사용**: 승인, 조회, 취소 등 연관된 도메인의 API들이 동일한 응답 객체를 공유하도록 설계하여, 개발자가 새로운 API를 연동할 때 추가적인 학습 없이 결과를 예측할 수 있게 합니다. * **자연어 기반 데이터 표현**: 시스템 효율을 위한 코드 값(예: SC0010) 대신 "현대", "국민"과 같은 직관적인 한글 데이터를 제공합니다. 또한 `Accept-Language` 헤더에 따라 영문 등으로 응답을 자동 전환하는 로컬라이제이션(Localization)을 지원합니다. * **표준화된 오류 처리**: HTTP 상태 코드로 큰 틀의 성공/실패를 구분하고, 상세한 에러 코드와 메시지를 담은 표준 객체를 응답 바디에 포함하여 가맹점이 상황에 맞춰 유연하게 대응할 수 있도록 돕습니다. ### 비동기 처리를 위한 안정적인 웹훅 체계 * **이벤트 기반 처리**: 즉각적인 응답이 어려운 비동기 결제 상황에서 서버가 클라이언트에 처리 완료를 알리는 웹훅 인터페이스를 API와 함께 제공합니다. * **데이터 구조의 일관성**: 웹훅을 통해 전달되는 데이터 페이로드를 일반 API 응답과 동일한 리소스 객체 구조로 설계하여 가맹점의 파싱 로직 중복을 방지합니다. * **지수 백오프(Exponential Backoff) 재전송**: 네트워크 이슈나 가맹점 서버 장애로 인한 웹훅 전송 실패 시, 수신 서비스의 회복 시간을 고려하여 점진적으로 재시도 간격을 늘리는 전략을 사용합니다. * **자가 조치 도구 제공**: 개발자가 직접 웹훅 전송 내역을 조회하고 필요 시 수동으로 재전송할 수 있는 기능을 개발자 센터를 통해 지원하여 운영 편의성을 높였습니다. ### 개발자 경험(DX) 강화를 위한 문서 자동화 * **OAS 기반 실시간 동기화**: 수동 문서 작성의 한계를 극복하기 위해 OpenAPI Specification(OAS)과 Springdoc 라이브러리를 활용하여 서버 코드와 문서가 실시간으로 동기화되는 시스템을 구축했습니다. * **문서의 신뢰성 확보**: API 스펙이 변경될 때마다 연동 문서가 즉시 업데이트되므로, 가맹점 개발자는 항상 실제 동작하는 서버와 일치하는 최신 명세를 바탕으로 안심하고 개발할 수 있습니다. 토스페이먼츠의 사례처럼 좋은 Open API는 단순히 기능의 유무를 넘어, 개발자가 '설명 없이도 이해할 수 있는' 직관적인 구조와 자동화된 지원 환경을 갖추어야 합니다. 특히 리소스 중심 설계와 API-웹훅 간 데이터 일관성은 가맹점의 연동 비용을 획기적으로 낮추는 실용적인 전략이 될 수 있습니다.

Gemini 3를 (새 탭에서 열림)

피그마는 디자이너와 개발자 간의 협업 간극을 줄이기 위해 디자인 의도를 개발 환경으로 직접 전달하는 '디자인 컨텍스트(Design Context)' 환경 구축에 집중하고 있습니다. 단순한 가이드라인 전달을 넘어 개발자가 사용하는 도구 내에서 디자인 데이터에 접근하고 이를 코드로 변환하는 과정을 최적화하여 워크플로우를 혁신하고 있습니다. 이러한 변화는 개발자가 컨텍스트 전환 없이 구현에만 집중할 수 있는 환경을 제공하며, 최종 제품의 품질과 개발 속도를 동시에 높이는 결과를 가져옵니다. ### 개발 환경으로 확장된 Dev Mode와 VS Code 통합 * **Figma for VS Code:** 개발자가 편집기를 떠나지 않고도 디자인 파일을 확인하고, 속성을 추출하며, 디자이너와 실시간으로 소통할 수 있는 익스텐션을 제공합니다. * **코드 스니펫 커스터마이징:** 단순한 CSS 제공을 넘어 프로젝트의 라이브러리나 프레임워크에 맞는 맞춤형 코드 스니펫을 생성하여 코드 작성 시간을 단축합니다. * **에셋 관리 자동화:** 아이콘이나 이미지 등의 에셋을 수동으로 다운로드할 필요 없이 개발 환경에서 즉시 최적화된 형태로 내려받을 수 있는 기능을 지원합니다. ### 디자인 시스템과 코드의 정렬 * **UI 키트의 진화:** 디자이너가 사용하는 UI 구성 요소가 코드상의 컴포넌트 구조와 일치하도록 설계된 UI 키트를 통해 일관성을 유지합니다. * **Design Tokens 연동:** 색상, 타이포그래피, 간격 등의 디자인 변수를 코드로 직접 동기화하여 디자인 변경 사항이 개발 환경에 실시간으로 반영되도록 합니다. * **컴포넌트 문서화:** Dev Mode 내에서 해당 컴포넌트의 사용법, 변수(variants), 관련 문서 링크를 바로 확인할 수 있어 불필요한 커뮤니케이션 비용을 줄입니다. ### 효율적인 핸드오프를 위한 소통 도구 * **디자인 상태 표시(Status update):** 디자인이 '개발 준비 완료(Ready for development)' 상태인지 직관적으로 확인할 수 있도록 하여 불완전한 디자인의 구현을 방지합니다. * **어노테이션(Annotation):** 디자이너가 특정 영역에 개발적인 요구사항이나 인터랙션 디테일을 직접 기입할 수 있는 주석 기능을 강화하여 명확한 가이드를 제공합니다. * **비주얼 디프(Visual Diff):** 이전 버전의 디자인과 현재 디자인의 차이점을 시각적으로 비교하여 변경된 부분만 골라내어 업데이트할 수 있도록 돕습니다. 디자인 컨텍스트를 개발 과정 곳곳에 배치하는 피그마의 전략은 단순히 도구를 제공하는 것을 넘어 조직 전체의 협업 문화를 바꾸는 데 목적이 있습니다. 개발자는 더 이상 디자인 해석에 시간을 쏟지 않고, 코드 스니펫과 실시간 동기화 도구를 활용해 더 높은 수준의 제품 구현에 집중하는 것이 권장됩니다.

듀오링고 메소드: (새 탭에서 열림)

VS Code 팀은 개발자가 코드를 작성하고, 빌드하고, 실행하여 결과를 확인하는 이른바 '이너 루프(Inner Loop)'를 최적화하는 것이 소프트웨어 생산성 향상의 핵심이라고 강조합니다. 이들은 단순한 도구의 성능 개선을 넘어 개발 프로세스와 팀 문화 전체를 이 사이클의 속도를 높이는 데 최우선 순위를 둡니다. 결과적으로 피드백 루프를 수 초 내로 단축하고 개발자가 몰입을 유지할 수 있는 환경을 조성하는 것이 고품질 소프트웨어를 지속적으로 배포하는 VS Code 방식의 근간입니다. **이너 루프(Inner Loop) 최적화와 마찰 제거** - 이너 루프는 코드 수정 후 변경 사항이 반영되는 것을 확인하기까지의 반복 과정을 의미하며, 이 과정에서의 아주 작은 지연도 개발자의 집중력을 흐트러뜨리는 큰 비용으로 간주합니다. - VS Code 팀은 증분 빌드(Incremental builds)와 효율적인 모듈 구조를 통해 빌드 시간을 최소화하여, 개발자가 수정한 코드를 거의 즉각적으로 테스트할 수 있는 환경을 유지합니다. - 도구의 속도뿐만 아니라 불필요한 회의나 복잡한 승인 절차 등 개발자의 흐름을 끊는 모든 '행정적 마찰'을 제거하는 것을 기술적 부채 해결만큼 중요하게 다룹니다. **실시간 독푸딩(Dogfooding)을 통한 품질 검증** - 개발팀은 매일 아침 전날 밤에 빌드된 최신 'Insiders' 버전을 직접 설치하여 실제 업무에 사용하며, 자신이 만든 기능을 스스로 가장 먼저 테스트합니다. - 이를 통해 별도의 대규모 QA 단계에 의존하기 전에 개발자가 직접 버그를 발견하고 즉시 수정하는 선순환 구조를 만듭니다. - 실제 사용 환경에서 발생하는 사소한 불편함을 개발자가 실시간으로 체감함으로써 사용자 경험(UX) 중심의 기능 개선이 자연스럽게 이루어집니다. **자율성과 투명성에 기반한 엔지니어링 문화** - 개별 엔지니어에게 기능 설계부터 구현, 문서화, 버그 수정까지 이어지는 광범위한 소유권(Ownership)을 부여하여 의사결정 속도를 극대화합니다. - 한 달 단위의 공개적인 반복 계획(Iteration Plan)을 통해 팀의 목표를 투명하게 공유하며, 이를 통해 불필요한 상태 보고 회의를 줄이고 작업의 우선순위를 명확히 합니다. - 깃허브(GitHub) 이슈를 통해 사용자와 직접 소통하며 피드백을 빠르게 수용하고, 이를 통해 제품의 실제 가치와 직결되는 작업에 집중합니다. **몰입을 위한 시간 확보와 집중력 관리** - 주간 일정 중 회의가 없는 날을 지정하거나 최소한의 동기적 소통만을 허용하여, 엔지니어가 '딥 워크(Deep Work)'를 수행할 수 있는 긴 시간을 확보합니다. - 개발 도구 자체의 성능(Startup time, Typing latency 등)을 핵심 지표로 관리하여, 개발자가 도구의 반응 속도 때문에 리듬을 잃지 않도록 기술적 디테일에 집착합니다. 성공적인 개발 환경을 구축하기 위해서는 단순히 최신 프레임워크를 도입하는 것보다, 개발자가 수정한 코드를 확인하기까지의 시간을 단 1초라도 줄이려는 노력이 선행되어야 합니다. 빌드 도구의 최적화, 철저한 독푸딩, 그리고 개발자의 몰입을 방해하는 조직적 요소를 제거하는 것이 결합될 때 비로소 엔지니어링 팀의 진정한 속도가 발휘될 수 있습니다.

파블로 산체스의 예기 (새 탭에서 열림)

개발자에게 '마법 같은' 경험을 선사하는 도구는 단순한 기능의 나열이 아니라, 개발자의 워크플로우에 대한 깊은 공감과 세심한 설계에서 탄생합니다. 샤메인 리(Charmaine Lee)는 도구의 복잡성을 사용자에게 전가하지 않고, 첫 만남부터 숙련된 사용 단계까지 마찰 없는 경험을 제공하는 것이 핵심이라고 강조합니다. 결국 성공적인 개발자 도구는 기술적 우수성을 넘어 개발자의 생산성을 극대화하고 창의성을 방해하는 모든 요소를 제거하는 데 목적을 두어야 합니다. **초기 진입 장벽의 최소화와 즉각적인 가치 전달** * **Time to "Hello World" 최적화**: 개발자가 도구를 처음 접하고 첫 결과물을 내기까지의 시간을 가장 중요한 지표로 삼아야 하며, 설치와 설정 과정을 극도로 단순화해야 합니다. * **합리적인 기본값(Sensible Defaults) 제공**: 사용자가 고민하지 않고도 바로 시작할 수 있도록 최적의 설정을 기본으로 제공하되, 필요할 때 언제든 수정할 수 있는 '탈출구(Escape hatches)'를 열어두어야 합니다. * **단순함의 역설**: 사용자에게 보여지는 단순함은 사실 개발자의 엄청난 노력이 투입된 결과이며, 도구 제작자는 사용자의 복잡함을 대신 짊어지는 역할을 해야 합니다. **개발자 환경과의 조화와 성능** * **기존 워크플로우와의 통합**: 개발자가 이미 사용하고 있는 IDE, 터미널, CI/CD 환경을 존중하고 그 흐름에 자연스럽게 녹아드는 도구를 설계해야 합니다. * **성능은 핵심 기능**: 속도와 응답성은 단순한 사양이 아니라 사용자 경험(UX) 그 자체이며, 도구가 개발자의 사고 속도를 따라가지 못하면 마법 같은 느낌은 사라집니다. * **두 번째 경험의 최적화**: 첫 사용뿐만 아니라, 반복적으로 도구를 사용할 때 느껴지는 사소한 불편함을 제거하여 장기적인 생산성을 보장해야 합니다. **커뮤니케이션으로서의 도구 설계** * **에러 메시지는 UI의 일부**: 에러는 단순히 실패를 알리는 출력이 아니라, 개발자가 문제를 즉시 해결할 수 있도록 돕는 구체적이고 친절한 가이드가 되어야 합니다. * **문서화는 제품 그 자체**: 문서는 제품 개발 후 덧붙이는 부록이 아니라, 제품의 핵심 구성 요소로서 코드만큼이나 정밀하게 관리되고 설계되어야 합니다. * **인간을 위한 설계**: 기계가 이해하기 좋은 구조보다는 개발자가 직관적으로 이해하고 예측할 수 있는 명칭과 인터페이스를 지향해야 합니다. 개발자 도구를 만들 때 가장 경계해야 할 것은 '기능의 과잉'입니다. 진정으로 사랑받는 도구를 만들고 싶다면, 화려한 기능을 추가하기보다 개발자가 겪는 사소한 마찰 지점들을 하나씩 제거해 나가는 것부터 시작하시기 바랍니다. 도구가 개발자의 사고 과정을 방해하지 않고 보이지 않는 곳에서 묵묵히 지원할 때, 개발자는 비로소 마법과 같은 몰입 경험을 하게 됩니다.

Figma와 Jira로 디 (새 탭에서 열림)

피그마(Figma)는 디자인과 개발 사이의 간극을 좁히기 위해 도입된 Dev Mode의 정식 출시와 함께 생산성을 극대화할 수 있는 새로운 기능들을 대거 공개했습니다. 이번 업데이트는 개발자가 디자인 의도를 더 정확히 파악할 수 있도록 돕는 주석(Annotations) 기능, 변경 사항을 한눈에 파악하는 비교 도구, 그리고 개발 환경을 디자인 도구 안으로 가져오는 플러그인 생태계 확장에 초점을 맞추고 있습니다. 이를 통해 디자인에서 코드로의 전환 과정이 더욱 정교하고 효율적으로 개선되었습니다. ### 디자인 의도를 명확히 전달하는 주석(Annotations) - 디자이너가 개발자에게 필요한 측정값, 사양, 세부 지침을 디자인 요소 위에 직접 기록할 수 있는 기능을 제공합니다. - 기존 디자인 파일이 복잡해지는 문제를 해결하기 위해 개발자 모드에서만 활성화되는 오버레이 방식을 채택하여, 협업 시 불필요한 커뮤니케이션 비용을 줄여줍니다. - 개발자는 주석을 통해 폰트, 간격, 레이아웃에 대한 디자이너의 구체적인 의도를 즉각적으로 파악할 수 있습니다. ### 버전 관리 및 변경 사항 비교(Compare Changes) - 특정 프레임의 이전 버전과 현재 버전을 시각적으로 비교할 수 있는 기능을 도입하여 히스토리 추적을 용이하게 했습니다. - 사이드 바이 사이드(Side-by-side) 뷰를 통해 어떤 속성이나 레이어 구조가 변경되었는지 코드로 즉시 확인할 수 있어, 수정 사항을 놓칠 위험을 방지합니다. - 개발자는 마지막으로 확인한 시점 이후 무엇이 바뀌었는지 명확히 인지하고 구현에 반영할 수 있습니다. ### 작업 효율을 높이는 플러그인과 통합 환경 - Jira, Storybook, GitHub와 같은 외부 개발 도구를 Dev Mode 내에서 바로 사용할 수 있는 전용 플러그인을 지원합니다. - 개발자는 Figma를 벗어나지 않고도 티켓 상태를 확인하거나 기존 코드 컴포넌트와의 연결성을 검토할 수 있어 컨텍스트 스위칭(Context Switching) 비용을 최소화합니다. - 코드 스니펫(Code Snippet) 생성 기능이 강화되어 CSS, Tailwind, SwiftUI 등 다양한 프레임워크에 최적화된 코드를 제공합니다. ### 워크플로우 가시성 확보를 위한 상태 관리 - 'Ready for Dev' 상태 표시 기능을 통해 디자이너가 구현을 시작할 준비가 된 화면을 명확히 구분하여 전달할 수 있습니다. - 개발자는 수많은 페이지와 프레임 중에서 어떤 항목이 최종본인지 혼란을 겪지 않고 곧바로 작업에 착수할 수 있는 구조를 갖추게 되었습니다. Dev Mode는 단순한 뷰어 역할을 넘어 개발 프로세스의 핵심 허브로 진화하고 있습니다. 팀의 생산성을 높이기 위해서는 디자이너가 주석 기능을 적극 활용하여 소통 비용을 줄이고, 개발자는 조직의 기술 스택에 맞는 플러그인을 맞춤 설정하여 사용하는 것을 권장합니다. 특히 Dev Mode가 정식 서비스로 전환됨에 따라, 각 조직은 개발 효율성과 비용 사이의 균형을 고려하여 팀에 적합한 요금제와 시트(Seat) 구성을 검토할 필요가 있습니다.

개발 모드 어노테 (새 탭에서 열림)

피그마(Figma)는 디자인과 개발 사이의 간극을 좁히기 위해 도입된 '개발 모드(Dev Mode)'의 정식 출시를 앞두고, 협업 효율을 극대화할 수 있는 새로운 기능들을 대거 공개했습니다. 이번 업데이트는 개발자가 디자인 의도를 정확히 파악하고 변경 사항을 추적하는 과정을 단순화하여, 불필요한 커뮤니케이션 비용을 줄이는 데 초점을 맞추고 있습니다. 이를 통해 개발 모드는 단순한 디자인 뷰어를 넘어, 코드 구현에 필요한 모든 맥락을 제공하는 개발자 중심의 작업 공간으로 진화하고 있습니다. ### 어노테이션(Annotations)을 통한 명확한 기술 사양 전달 디자이너가 개발자에게 필요한 수치나 속성을 직접 지정하여 전달할 수 있는 기능이 강화되었습니다. * **측정값 및 속성 고정**: 디자이너가 특정 요소의 간격, 크기, 속성 정보를 주석 형태로 고정해 둘 수 있어, 개발자가 일일이 요소를 클릭하여 확인할 필요가 없습니다. * **디자인 의도 명시**: 텍스트 설명뿐만 아니라 레이아웃의 유연성이나 애니메이션 디테일 등 코드 구현 시 주의해야 할 사항을 명확하게 기록할 수 있습니다. * **맥락 유지**: 일반적인 협업 댓글과 분리된 기술 사양 전용 주석으로 관리되어, 개발 과정에서 정보의 휘발성을 방지합니다. ### 변경 사항 비교(Compare Changes) 및 버전 추적 디자인이 수정되었을 때 이전 버전과 현재 버전을 시각적으로 대조할 수 있는 도구가 도입되었습니다. * **비주얼 디프(Visual Diff)**: 프레임의 변경 전후 모습을 나란히 배치하거나 겹쳐서 비교함으로써, 어떤 픽셀이 수정되었는지 즉각적으로 파악할 수 있습니다. * **코드 변경 이력**: 시각적인 변화뿐만 아니라 속성 값의 변화를 코드 수준에서 확인하여, 업데이트된 내용만 정확히 코드에 반영할 수 있도록 돕습니다. * **편집 맥락 파악**: 누가, 언제, 무엇을 수정했는지에 대한 상세한 이력을 제공하여 변경 사유에 대한 추측을 배제합니다. ### 플러그인 생태계 확장 및 워크플로우 통합 개발 모드 전용 플러그인과 API를 통해 외부 개발 도구와의 연결성이 한층 강화되었습니다. * **전용 플러그인 UI**: 개발 모드 우측 패널에서 직접 실행되는 플러그인을 통해 Jira, GitHub, Storybook과 같은 도구와 데이터를 실시간으로 동기화할 수 있습니다. * **코드 생성 커스터마이징**: 기업 고유의 디자인 시스템이나 라이브러리에 맞게 코드를 생성하도록 플러그인을 최적화하여, 복사-붙여넣기 효율을 높였습니다. * **자동화 연동**: 새로운 API를 활용해 디자인 자산 추출이나 문서화 과정을 자동화하여 개발 생산성을 높일 수 있습니다. ### 개발 준비 상태(Ready for Dev) 관리 작업이 완료된 디자인을 명확하게 구분하여 개발자에게 신호를 보낼 수 있는 체계가 마련되었습니다. * **상태 표시기**: 특정 섹션이나 프레임을 '개발 준비 완료' 상태로 표시하여, 개발자가 진행 중인 작업(WIP)과 구현해야 할 최종안을 혼동하지 않게 합니다. * **알림 및 탐색**: 개발자가 피그마 파일에 접속했을 때 어떤 부분이 준비되었는지 요약된 목록을 제공하여, 작업의 우선순위를 즉시 파악할 수 있도록 돕습니다. 개발 모드가 베타를 마치고 정식 서비스로 전환됨에 따라, 팀의 워크플로우에 위 기능들을 적극적으로 도입해 보시길 권장합니다. 특히 어노테이션과 변경 사항 비교 기능은 디자이너와 개발자 간의 불필요한 확인 과정을 획기적으로 줄여줄 것이며, 맞춤형 플러그인을 통해 각 팀의 기술 스택에 최적화된 협업 환경을 구축할 수 있습니다.

개발 모드의 향후 계획 (새 탭에서 열림)

Figma는 디자이너와 개발자 사이의 협업 효율을 근본적으로 개선하기 위해 개발자 전용 작업 공간인 'Dev Mode'를 도입했습니다. 기존의 디자인 핸드오프 과정이 단순히 완성된 시안을 전달하는 데 그쳤다면, Dev Mode는 개발자가 디자인 의도를 정확히 파악하고 코드로 구현하는 데 필요한 정보를 직관적으로 제공하는 데 초점을 맞춥니다. 이를 통해 Figma는 디자인 도구를 넘어 제품 개발 프로세스 전반을 아우르는 협업 플랫폼으로 진화하고자 합니다. ### 개발자에게 최적화된 인터페이스와 정보 가독성 * **개발 중심 뷰(View):** 디자이너의 작업 공간과 분리된 개발자 전용 모드를 제공하여, 불필요한 레이어 정보 대신 치수, 패딩, 마진 등 구현에 필수적인 속성들을 우선적으로 노출합니다. * **박스 모델 가시화:** 웹 브라우저의 개발자 도구와 유사하게 요소의 크기와 간격을 시각적으로 보여주어, 디자인 시스템의 수치를 코드로 옮기는 과정을 단순화합니다. * **상태 표시 및 트래킹:** '개발 준비 완료(Ready for dev)' 상태를 명시적으로 표시하여 개발자가 어떤 시안을 기준으로 작업해야 하는지 혼란을 방지하고, 이전 버전과의 차이점을 비교할 수 있는 기능을 제공합니다. ### 코드 생성 및 디자인 시스템 연동 * **맞춤형 코드 스니펫:** CSS뿐만 아니라 SwiftUI, Jetpack Compose 등 플랫폼에 최적화된 코드를 생성하며, 개발자가 사용하는 라이브러리에 맞게 스니펫을 커스텀할 수 있습니다. * **디자인 토큰 지원:** 디자인 시스템에 정의된 토큰 이름과 값을 직접 확인할 수 있어, 하드코딩 대신 시스템 변수를 정확하게 사용하도록 유도합니다. * **에셋 추출 자동화:** 아이콘이나 이미지 등의 에셋을 일일이 내보내기 설정할 필요 없이, 개발자가 필요한 포맷으로 즉시 다운로드하거나 경로를 복사할 수 있습니다. ### 워크플로우 통합과 확장성 * **Figma for VS Code:** 디자인 파일을 보기 위해 브라우저나 앱을 오갈 필요 없이, VS Code 내에서 디자인을 확인하고 코드를 작성하며 속성을 검사할 수 있는 확장 프로그램을 지원합니다. * **외부 도구 연결:** Jira, GitHub, Storybook과 같은 외부 협업 도구와 플러그인을 통해 연결하여, 문서화된 사양이나 컴포넌트 라이브러리를 Figma 내부에서 바로 참조할 수 있습니다. * **플러그인 생태계:** 개발 과정에 특화된 플러그인들을 Dev Mode 내에서 실행하여 반복적인 작업을 자동화하거나 팀별로 최적화된 워크플로우를 구축할 수 있습니다. 성공적인 제품 구현을 위해 개발팀은 Dev Mode를 단순히 스펙을 확인하는 용도가 아닌, 디자인 시스템과 코드의 싱크를 맞추는 통합 지점으로 활용해야 합니다. 특히 VS Code 확장 프로그램을 활용해 컨텍스트 스위칭 비용을 최소화하고, 디자인 토큰 기반의 협업 환경을 구축한다면 커뮤니케이션 오류를 줄이고 배포 속도를 획기적으로 높일 수 있을 것입니다.

개발 모드: 개발자를 위해 더 (새 탭에서 열림)

피그마는 디자이너와 개발자 간의 간극을 좁히고 협업 효율을 극대화하기 위해 개발자 전용 공간인 '데브 모드(Dev Mode)'를 도입했습니다. 이를 통해 개발자는 디자인 파일을 수정할 위험 없이 코드를 작성하는 데 필요한 정보에만 집중할 수 있으며, 디자인 시스템과 실제 코드 간의 연결성을 강화할 수 있습니다. 결과적으로 데브 모드는 제품 개발 수명 주기 전반에서 핸드오프 과정을 더 빠르고 정확하게 만들어 줍니다. ### 개발자 중심의 새로운 인터페이스 * **전용 뷰 모드:** 개발자는 디자이너가 사용하는 복잡한 캔버스 대신, 브라우저의 '검사(Inspect)' 도구와 유사한 개발자 친화적 인터페이스를 사용할 수 있습니다. * **속성 추출 최적화:** 픽셀 단위의 치수, 색상 코드, 에셋을 더 직관적으로 확인하고 한 번의 클릭으로 복사할 수 있는 환경을 제공합니다. * **박스 모델 확인:** 웹 개발자에게 익숙한 박스 모델(Box Model) 형태의 레이아웃 정보를 제공하여 마진, 패딩 등 레이아웃 구조를 명확히 파악할 수 있게 합니다. ### 코드 스니펫 및 디자인 시스템 연결 * **맞춤형 코드 생성:** CSS뿐만 아니라 iOS(SwiftUI), Android(Jetpack Compose) 등 다양한 플랫폼에 맞는 코드 스니펫을 지원합니다. * **플러그인 생태계 확장:** Jira, Storybook, GitHub과 같은 개발 도구를 데브 모드 내에서 직접 연결할 수 있는 전용 플러그인 API를 제공합니다. 이를 통해 디자인 요소와 실제 코드 저장소 또는 이슈 티켓을 연동할 수 있습니다. * **디자인 토큰 활용:** 디자이너가 정의한 변수(Variables)와 디자인 토큰을 코드와 직접 매핑하여 일관성 있는 UI 구현을 돕습니다. ### VS Code용 Figma 확장 프로그램 * **IDE 내 디자인 확인:** 개발자가 툴을 스위칭할 필요 없이 VS Code 내에서 디자인을 확인하고, 댓글을 남기거나 에셋을 추출할 수 있습니다. * **코드 자동 완성:** 디자인 파일의 속성을 기반으로 코드 편집기 내에서 자동 완성 기능을 제공하여 수치 입력 실수를 줄여줍니다. * **변경 사항 추적:** 디자인이 업데이트되면 VS Code 내에서 알림을 받고 변경된 부분을 시각적으로 비교할 수 있습니다. ### 협업 및 핸드오프 프로세스 개선 * **개발 준비 완료(Ready for Dev) 상태:** 디자이너는 특정 섹션을 '개발 준비 완료' 상태로 표시하여, 개발자가 불완전한 초안 대신 최종적으로 확정된 디자인에만 집중할 수 있도록 안내합니다. * **버전 비교 및 이력 관리:** 두 디자인 버전 간의 차이점을 시각적으로 비교해 주는 기능을 통해 어떤 레이어나 속성이 수정되었는지 즉각적으로 파악할 수 있습니다. 데브 모드는 단순히 디자인을 보는 방식을 넘어, 디자인과 코드를 하나의 유기적인 워크플로우로 묶는 강력한 도구입니다. 개발 생산성을 높이기 위해서는 단순히 스크린샷을 보고 코딩하는 관행에서 벗어나, 데브 모드의 플러그인과 VS Code 확장을 적극적으로 활용하여 디자인 시스템과 코드 베이스 사이의 동기화 수준을 높이는 것이 권장됩니다.

Dev Mode 후속 업데이트: (새 탭에서 열림)

피그마는 디자이너와 개발자 사이의 워크플로우 간극을 좁히고 협업 효율을 극대화하기 위해 새로운 '개발자 모드(Dev Mode)'를 도입했습니다. 이 기능은 개발자가 디자인 의도를 정확하게 파악하고 코드로 변환하는 과정을 단순화하며, 개발 환경과 디자인 도구를 밀접하게 연결하는 데 중점을 둡니다. 결론적으로 개발자 모드는 단순한 디자인 뷰어를 넘어 개발 생산성을 직접적으로 높여주는 통합 플랫폼으로 진화했습니다. **개발자 중심의 검사 및 구현 환경** * 디자인 파일 내에서 '개발자 모드' 스위치를 켜는 것만으로 개발에 최적화된 인터페이스로 전환할 수 있으며, 복잡한 디자인 레이어 대신 코드 구현에 필요한 치수, 속성, 에셋 정보를 우선적으로 노출합니다. * CSS, iOS, Android 등 플랫폼별 맞춤형 코드 스니펫을 즉시 생성하며, 박스 모델(Box model)과 픽셀 측정 기능을 통해 정교한 레이아웃 구현을 돕습니다. * '변경 사항 비교(Compare changes)' 기능을 통해 마지막으로 확인한 시점 이후 디자인에 어떤 수정이 있었는지 시각적으로 파악할 수 있어, 반복적인 커뮤니케이션 비용을 줄여줍니다. **VS Code 확장 프로그램을 통한 워크플로우 통합** * Figma for VS Code 익스텐션을 지원하여 개발자가 편집기를 떠나지 않고도 디자인 파일을 확인하고 에셋을 추출하며 코멘트를 남길 수 있는 환경을 구축했습니다. * 디자인의 속성을 코드 스니펫으로 바로 복사해 붙여넣을 수 있을 뿐 아니라, 코드 작성 중에 디자인 의도를 실시간으로 참조할 수 있어 컨텍스트 스위칭을 최소화합니다. * 에디터 내에서 피그마 알림을 받고 직접 대응할 수 있어, 디자이너와의 실시간 협업이 더욱 간편해졌습니다. **외부 도구 및 디자인 시스템 연동** * Jira, Storybook, GitHub 등 개발 현업에서 널리 쓰이는 도구들과의 플러그인 연동을 지원하여, 디자인 요소와 연관된 티켓이나 코드 문서를 연결할 수 있습니다. * 디자인 시스템의 컴포넌트 정보와 실제 구현된 코드를 직접 링크할 수 있어, 팀 전체가 동일한 소스(Single Source of Truth)를 바탕으로 개발할 수 있도록 지원합니다. * 개발자는 플러그인을 활용해 자신의 워크플로우에 맞는 맞춤형 코드 생성 자동화 환경을 구축할 수 있습니다. **섹션 상태 관리와 효율적인 핸드오프** * 디자이너는 특정 프레임을 '개발 준비 완료(Ready for dev)' 상태로 표시하여 개발자가 어떤 부분을 구현해야 하는지 명확하게 전달할 수 있습니다. * 개발자는 전체 페이지를 탐색할 필요 없이 구현이 필요한 섹션만 집중적으로 확인할 수 있어 핸드오프 과정에서의 혼란이 사라집니다. 개발자 모드를 효과적으로 활용하기 위해서는 단순히 코드 스니펫을 복사하는 것을 넘어, VS Code 익스텐션을 설치하고 디자인 시스템과 코드를 연동하는 설정을 선행하는 것이 좋습니다. 이를 통해 디자인 변경 사항에 기민하게 대응하고, 구현 단계에서 발생하는 불필요한 추측을 제거하여 제품 퀄리티를 높일 수 있습니다.