우아한형제들 / frontend

우리는 코드처럼 문화도 리팩토링한다 (새 탭에서 열림)

배달의민족 커머스웹프론트개발팀은 조직 규모 확대에 따른 복잡도와 비효율을 해결하기 위해 문화를 코드처럼 리팩토링하며 '경계 없는 파트' 구조를 도입했습니다. 특정 도메인이나 서비스에 갇히지 않고 책임을 확장하는 R&E(Responsibility & Expandability) 원칙을 통해 기술적 통합과 조직의 유연성을 동시에 확보했습니다. 이러한 시도는 서비스 간 장벽을 허물고 구성원들이 커머스 전반을 조망하는 엔지니어로 성장하며, 비즈니스 요구에 기민하게 대응하는 결과로 이어졌습니다. ### 경계 없는 파트와 R&E 중심의 조직 구성 * **전통적 분할 방식의 탈피**: 프로젝트, 페이지, 서비스(B마트/배민스토어) 단위로 조직을 나눌 경우 발생하는 리소스 불균형과 도메인 파편화 문제를 해결하기 위해 고정된 경계를 제거했습니다. * **R&E(Responsibility & Expandability) 도입**: 단순히 주어진 역할만 수행하는 R&R을 넘어, 문제 해결을 위해 업무 영역을 스스로 확장하고 동료를 돕는 'Own It' 정신을 조직 구조에 이식했습니다. * **유연한 리소스 배분**: 약 20명의 프론트엔드 개발자를 3개 파트로 나누되, 특정 도메인에 종속시키지 않고 팀 상황에 따라 업무를 배분하여 병목 현상을 최소화했습니다. ### 기술적 통합을 통한 도메인 확장성 확보 * **통합 아키텍처 구축**: B마트와 배민스토어의 상품 카드 및 상세 화면 등 유사한 UI/UX를 공통 모듈로 추상화하고 API 구조를 맞춤으로써 코드 베이스의 일관성을 확보했습니다. * **엔지니어링 역량 강화**: 개발자들이 고객 서비스의 UX부터 어드민의 데이터 흐름까지 전방위적인 도메인을 학습하게 하여, 특정 기능 담당자가 아닌 커머스 전체를 이해하는 전문가로 성장하도록 유도했습니다. * **리스크 관리(Bus Factor 개선)**: 특정 인원이 부재하더라도 다른 팀원이 맥락을 즉시 이어받을 수 있는 구조를 만들어 프로젝트 중단 위험인 '버스 팩터'를 획기적으로 낮췄습니다. ### 지속적인 개선을 위한 소통과 기록의 리팩토링 * **의사결정 자산화(ADR)**: 단순한 기획 공유인 1Pager 방식에서 나아가, 기술적 결정의 배경과 맥락을 기록하는 ADR(Architecture Decision Record)을 도입해 팀의 지식을 체계적으로 관리합니다. * **루틴의 재설계와 자동화**: 반복적인 업무나 귀찮은 과정을 레거시로 남기지 않고, 자동화와 프로세스 개선을 통해 개발 효율성을 지속적으로 높입니다. * **심리적 안전감 기반의 협업**: '불판'과 같은 자유로운 논의 문화를 통해 실패를 과정으로 수용하고, 질문이 스터디로 이어지는 선순환 구조를 구축했습니다. 성장하는 조직에서 발생하는 비효율을 방치하지 않고, 코드 리팩토링과 같은 관점에서 구조와 문화를 끊임없이 개선하는 태도가 중요합니다. 특히 도메인 간 경계를 허무는 시도는 대규모 서비스 통합이라는 복잡한 비즈니스 과제를 해결하는 데 매우 강력한 전략이 될 수 있습니다.

잃어버린 접근성을 찾아서 | 우아한형제들 기술블로그 (새 탭에서 열림)

웹 접근성은 단순히 점수를 높이는 기술적 과제가 아니라, 모든 사용자가 소외 없이 서비스를 이용할 수 있도록 보장하는 보편성의 가치를 실현하는 작업입니다. 우아한형제들 기술 블로그에서는 스크린 리더 사용자가 겪는 실질적인 불편함을 해결하기 위해 탐색 단위 구조화, 텍스트 통합, 상호작용 요소의 역할 구체화를 진행했습니다. 이를 통해 사용자 탐색 피로도를 획기적으로 낮추고 서비스의 본질적인 사용성을 회복하는 성과를 거두었습니다. ### 랜드마크와 머리말을 활용한 탐색 구조화 * **단위 탐색 기능 활성화**: 스크린 리더의 '로터(iOS)'나 '단위 탐색(Android)' 기능을 활용할 수 있도록 페이지를 의미 있는 섹션으로 나누고 적절한 머리말(Heading)을 배치했습니다. * **섹션 컴포넌트화**: `section` 태그와 `h1-h6` 태그, 그리고 이를 연결하는 `aria-labelledby` 속성을 조합한 재사용 가능 컴포넌트를 만들어 페이지 전체에 일관된 랜드마크 구조를 적용했습니다. * **목록 역할 명시**: CSS에서 `list-style: none`을 적용할 경우 VoiceOver가 목록으로 인식하지 못하는 문제를 해결하기 위해 `role="list"`를 명시적으로 선언했습니다. ### 파편화된 텍스트 통합과 발화 최적화 * **불필요한 스와이프 제거**: 스타일링을 위해 "990"과 "원"처럼 분리되어 있던 텍스트를 템플릿 리터럴을 통해 하나의 문자열로 결합하여 스크린 리더가 한 번에 읽도록 개선했습니다. * **스크린 리더 전용 레이어 활용**: 디자인 제약으로 태그를 분리해야만 하는 경우, 시각적 요소에는 `aria-hidden="true"`를 설정하고 보이지 않는 별도 요소에 통합된 텍스트를 담아 제공했습니다. * **크로스 플랫폼 대응**: `span`이나 `div` 같은 일반 컨테이너에 `aria-label`을 쓰면 iOS VoiceOver가 이를 무시하는 특성을 고려하여, 다양한 OS 환경에서 일관되게 읽히는 방식을 채택했습니다. ### 상호작용 요소의 목적과 맥락 명확화 * **모호한 버튼 레이블 개선**: "전체 보기", "자세히"와 같이 목적이 불분명한 버튼에 `aria-label`을 추가하여 "배달팁 자세히 보기"처럼 구체적인 동작 맥락을 제공했습니다. * **사용자 흐름 단축**: 300번 이상의 스와이프가 필요했던 비효율적인 탐색 구조를 개선하여, 사용자가 원하는 정보를 빠르게 찾고 구매하기 버튼까지 도달하는 시간을 대폭 단축했습니다. 진정한 의미의 접근성 개선은 Lighthouse 점수 100점에 안주하는 것이 아니라, 개발자가 직접 스크린 리더를 켜고 사용자의 시점에서 서비스를 탐색해 보는 것에서 시작됩니다. 자동화 도구가 잡아내지 못하는 '맥락의 단절'을 찾아내고, 의미 있는 구조(Semantic)와 구체적인 설명(Labeling)을 더할 때 비로소 모두를 위한 서비스를 완성할 수 있습니다.

기획부터 개발까지 전부 직접 했습니다 – 우테코 7기 크루 서비스 론칭! | 우아한형제들 기술블로그 (새 탭에서 열림)

우아한테크코스 7기 크루들이 기획부터 디자인, 개발 및 운영까지 전 과정을 직접 수행하며 실제 사용자를 위한 서비스를 성공적으로 론칭했습니다. 이번 프로젝트는 단순한 기술 습득을 넘어 개발자가 왜 기획과 디자인에 참여해야 하는지, 그리고 사용자 피드백이 아키텍처와 도메인 설계에 어떤 영향을 미치는지 몸소 체험하는 과정이었습니다. 결과적으로 크루들은 2주 단위의 스프린트와 실시간 모니터링, 배포 환경 구축 등 실무에 근접한 경험을 통해 현장 중심의 문제 해결 역량을 갖춘 개발자로 성장했습니다. **개발자 중심의 기획과 협업 문화의 정착** - 우아한테크코스는 레벨 3, 4 과정을 통해 개발자가 직접 기획과 디자인을 포함한 서비스의 전주기를 책임지는 팀 프로젝트를 진행합니다. - 기술적인 구현뿐만 아니라 말하기, 글쓰기 교육을 병행하여 팀원 간의 의견 조율 및 설득 등 소프트 스킬의 중요성을 강조합니다. - 아키텍처 설계와 같은 기술적 결정이 팀의 목표와 사용자의 가치에 어떻게 부합해야 하는지 고민하며 개발자의 역할을 확장했습니다. **픽잇(Pickeat): 취향과 제약을 반영한 협업형 식사 선택 서비스** - "아무거나"라는 답변 뒤에 숨겨진 기피 음식과 다이어트 등의 제약 사항을 실시간 투표로 해결하여 최적의 식당을 추천합니다. - 위치 정보 기반의 식당 자동 조회 및 템플릿 기능을 도입하여 반복되는 회식이나 미팅 시 의사결정 속도를 높였습니다. - 데모데이와 홍보를 통해 받은 피드백을 바탕으로 UI와 백엔드 도메인 구조를 유연하게 재설계하며 사용자 중심의 반복적인 개선 과정을 거쳤습니다. **보따리(Bottari): 실시간 동기화 기반의 상황별 체크리스트** - 출근, 여행, 이사 등 다양한 상황에 맞춘 템플릿 기반 리스트 생성과 팀 단위의 실시간 협업 체크 기능을 제공합니다. - 단순한 기능 구현을 넘어 사용자가 물건을 잊지 않게 돕는 알림 타이밍과 체크 상태 동기화 등 사용자 경험(UX)의 세부 요소를 정밀하게 다듬었습니다. - '기술은 문제를 해결하는 도구'라는 철학 아래 사용자가 안심하고 기억을 맡길 수 있는 흐름을 구현하는 데 집중했습니다. **커피빵(Coffee Bread): 웹소켓 기반의 실시간 내기 미니게임** - 가위바위보보다 더 큰 재미와 긴장감을 주기 위해 실시간 미니게임과 가중치 적용 룰렛 시스템을 도입한 서비스입니다. - 웹소켓(WebSocket) 기술과 분산 환경이라는 기술적 난제를 극복하며 실시간 상호작용이 끊김 없이 이루어지도록 개발했습니다. - 게임의 공정성과 재미를 위해 룰렛 알고리즘을 수차례 수정하고, 실제 사용자들의 피드백을 반영해 밸런스를 최적화했습니다. 이 서비스들은 단순한 교육용 프로젝트를 넘어 실제 배포와 운영을 거치며 기술적 완성도를 높였습니다. 개발자가 기획 단계부터 깊이 관여할 때 사용자에게 더욱 가치 있는 프로덕트가 탄생한다는 점을 시사하며, 실무적인 문제 해결 역량을 키우고 싶은 주니어 개발자들에게 좋은 협업의 귀감이 됩니다.