frontend

8 개의 포스트

github4분 읽기큐레이션 요약

범용 접근성 에이전트 구축과 그 과정에서 얻은 교훈

GitHub는 개발자가 접근성 질문에 즉시 답을 얻고, 배포 전 단순하고 객관적인 접근성 문제를 자동 수정하도록 실험적인 범용 접근성 에이전트를 운영하고 있습니다. 이 에이전트는 3,535개의 풀 리퀘스트를 검토해 68%의 해결률을 기록했지만, 접근성을 자동으로 “해결”하는 만능 도구가 아니라 기존 엔지니어링 노력을 보완하는 역할로 설계되었습니다. 특히 조직이 축적한 구조화된 접근성 이슈와 수정 사례가 에이전트의 정확도와 실용성을 높이는 핵심 자산이 되었습니다. ## 접근성 에이전트의 목표와 성과 - GitHub Copilot CLI와 VS Code 통합 환경에서 접근성 관련 질문에 신뢰할 수 있는 답변을 제공합니다. - 프런트엔드 코드가 변경된 풀 리퀘스트를 자동으로 검사합니다. - 단순하고 판단 기준이 명확한 접근성 문제는 코드 제안 형태로 자동 수정할 수 있습니다. - 현재까지 3,535개의 풀 리퀘스트를 검토했으며, 68%의 해결률을 기록했습니다. - 가장 많이 발견된 문제는 다음과 같습니다. - 구조와 관계를 보조공학 기술이 명확히 이해하도록 표현하지 못한 문제 - 대화형 컨트롤의 이름이 불명확한 문제 - 중요한 상태 변화나 공지를 사용자에게 전달하지 못한 문제 - 이미지 등 비텍스트 콘텐츠에 텍스트 대안이 없는 문제 - 키보드 포커스 이동 순서가 논리적이지 않은 문제 예를 들어 시각적 배치와 DOM·스크린 리더 읽기 순서가 서로 다른 경우, 에이전트는 `row-reverse` 대신 DOM 요소 순서를 바꾸고 일반적인 `flex-direction: row`를 사용하라고 제안할 수 있습니다. ## 접근성을 바라보는 관점 - 사회적 장애 모델에 따르면 장애와 사용 장벽은 개인뿐 아니라 환경의 설계 방식에서도 발생합니다. - 디지털 서비스에서도 잘못 구성된 UI가 보조공학 사용자에게 장벽을 만들 수 있습니다. - 따라서 에이전트의 목표는 접근성을 독립적으로 완성하는 것이 아니라, 동료 개발자가 장벽을 더 빠르게 발견하고 제거하도록 돕는 것입니다. - 모든 상황을 자동으로 처리할 수 있는 “실버 불릿”으로 에이전트를 홍보하지 않았습니다. - 에이전트의 책임 범위를 현실적으로 정의한 덕분에 실험을 빠르게 시작하고 조직 내 동의를 얻을 수 있었습니다. ## 규제와 사전 투자 - 유럽 접근성법(EAA)이 시행되었고, 미국 장애인법(ADA) Title II도 2027년 4월부터 WCAG 2.1 AA 준수를 법적 완료 기준으로 삼을 예정입니다. - LLM 기반 에이전트는 접근성 트리를 읽고 이를 바탕으로 UI를 분석하거나 조작할 수 있습니다. - 조직이 아직 수동으로 접근성 문제를 식별하고 수정하는 체계를 마련하지 않았다면, 향후 에이전트를 구축할 때도 불리해집니다. - 자동화는 기존의 접근성 품질 관리 체계를 대체하는 것이 아니라, 이미 검증된 문제와 해결 방식을 활용해 확장하는 방식으로 효과를 냅니다. ## 구조화된 이슈 데이터의 가치 GitHub는 에이전트 도입 이전부터 접근성 문제를 일관되게 기록하고 검증하는 시스템을 운영했습니다. - 문제 신고용 구조화된 템플릿 - 재현 절차 - 심각도, 담당 서비스 영역, 적용 가능한 WCAG 성공 기준 등의 메타데이터 - 문제를 해결한 풀 리퀘스트와의 연결 - 수정 완료를 판단하는 명확한 수용 기준 - 모든 접근성 이슈를 하나의 저장소에 중앙화 이처럼 일관된 형식으로 축적된 이슈와 코드 변경 내역은 에이전트가 참고할 수 있는 고품질 학습·검색 자료가 되었습니다. LLM의 비결정적이고 유연한 매칭 능력도 비슷한 코드와 문구를 찾아내는 데에는 장점으로 작용했습니다. ## 일반적인 지침만으로는 부족한 이유 - 전문 영역에서 “접근성 모범 사례를 따르라”는 식의 짧고 추상적인 지침만으로는 충분하지 않습니다. - 주요 LLM은 접근성이 부족한 코드가 포함된 수십 년간의 자료로 학습되었기 때문에, 접근성 안티패턴을 생성하는 편향을 보일 수 있습니다. - 따라서 에이전트가 실제 조직의 코드 스타일과 문제 해결 관례를 반영한 구체적인 사례를 참고해야 합니다. - 수동으로 접근성 문제를 분류하고 수정한 기록은 다음 요소를 함께 포함합니다. - 실제 제품 맥락 - 조직의 코딩·문서화 규칙 - 적용된 WCAG 기준 - 문제를 해결한 코드 - 수정 여부를 검증하는 조건 - 이런 사례 기반 자료는 단순한 체크리스트보다 에이전트의 판단과 코드 제안에 훨씬 강력한 기반이 됩니다. ## 실용적인 결론 접근성 에이전트를 도입하려면 먼저 사람이 접근성 문제를 일관되게 기록하고, 재현 절차와 WCAG 기준, 실제 수정 사례를 축적하는 것이 좋습니다. 에이전트는 전문가의 판단을 대체하기보다 반복적이고 객관적인 문제를 빠르게 발견·수정하는 보조 수단으로 운영해야 하며, 그 한계를 명확히 정의할수록 조직 내 신뢰와 도입 효과가 커집니다.

원문 읽기(새 탭에서 열림)
kakao4분 읽기큐레이션 요약

카카오톡 예약하기에서 그려 본 캘린더

카카오톡 예약하기는 카드 목록만으로는 재고와 예약을 한눈에 파악하기 어렵다는 문제를 해결하기 위해 타임 블록형 캘린더를 구현했다. 예약을 시작 시간과 종료 시간에 따라 정렬하고, 겹치는 예약을 그래프로 모델링한 뒤 DFS로 배치 깊이와 확장 가능 범위를 계산했다. 이후 루트 노드 간의 길이 차이로 남는 공간이 생기는 예외까지 보정해 예약 블록을 최대한 빈틈없이 배치했다. ## 캘린더 제작 배경과 요구사항 - 파트너센터의 예약 관리 화면은 예약을 카드 목록으로 보여주고 있었다. - 카드 목록은 많은 예약과 재고를 한눈에 비교하기 어렵다는 불편이 있었다. - 이를 해결하기 위해 예약과 재고를 시간축 위에서 확인할 수 있는 타임 블록형 캘린더를 제작했다. - 주요 요구사항은 다음과 같다. - 하나의 시간대에 최대 10개의 예약이 존재할 수 있다. - 하나의 예약은 최대 6시간을 차지한다. - 예약 블록 사이에 빈 공간을 최소화하면서 최대한 잘 보이게 배치해야 한다. ## 예약 배치 순서 ### 이용 시간이 이른 예약부터 정렬 - 예약이 입력된 순서가 아니라 시작 시간이 빠른 순서대로 배치했다. - 판매자가 하루를 시작할 때 가장 먼저 확인할 가능성이 높은 예약을 왼쪽 위에 배치하기 위한 결정이다. - 사용자의 시선이 일반적으로 왼쪽 위에서 오른쪽 아래로 이동한다는 시각적 우선순위도 고려했다. - 첫 번째 배치 규칙은 **“이용 시간이 이른 순서로 정렬한다”**이다. ### 같은 시간에는 소요 시간이 긴 예약부터 정렬 - 같은 시간대에 여러 예약이 겹치면 소요 시간이 긴 예약을 앞에 배치했다. - 긴 예약이 뒤로 밀리면 앞쪽 예약이 차지한 공간 때문에 긴 블록의 확장이 제한될 수 있다. - 긴 예약을 먼저 배치하면 이후 예약들이 남은 공간을 기준으로 배치되고, 각 예약이 확보할 수 있는 영역을 예측하기 쉬워진다. - 두 번째 배치 규칙은 **“같은 시간 내에서는 소요 시간이 긴 순서로 정렬한다”**이다. ## 예약을 그래프로 모델링 - 단순히 DOM 요소의 위치를 조정하는 대신, 예약 간의 겹침 관계를 그래프로 표현했다. - 각 예약을 그래프의 노드로 만들고, 서로 영향을 주는 예약을 연결했다. - 노드에는 예약 정보와 함께 이전 예약(`prevBooking`), 다음 예약(`nextBooking`) 같은 연결 관계를 저장했다. - 이 구조를 이용하면 예약이 어떤 경로로 연결되어 있고, 어느 정도까지 확장될 수 있는지 계산할 수 있다. ## DFS를 이용한 위치와 확장 범위 계산 - 각 노드에서 DFS를 수행해 다음 정보를 계산했다. - 그래프에서의 깊이 또는 레벨 - 연결된 예약 중 가장 끝에 있는 예약까지의 최대 거리(`maxLength`) - 깊이는 예약 블록의 가로 방향 위치를 결정하는 데 사용된다. - 최대 거리는 해당 예약이 오른쪽으로 얼마나 확장될 수 있는지 판단하는 기준이 된다. - 계산된 값을 바탕으로 각 노드의 다음 UI 속성을 구한다. - `left`: 블록의 시작 위치 - `width`: 블록이 차지할 가로 너비 - 그래프의 가장 왼쪽에 있는 노드부터 기준을 잡아 예약 블록을 배치하고 확장했다. ## 루트 노드 간 길이 차이로 발생한 예외 - 초기 알고리즘은 모든 예약이 연결된 그래프에서도 공간이 남는 경우를 완전히 처리하지 못했다. - 위쪽 루트 노드의 `maxLength`가 더 길고, 아래쪽 루트 노드의 `maxLength`가 짧으면 하위 그래프가 끝까지 확장되지 않았다. - 그 결과 예약 간 연결은 유지되지만 일부 빈 공간이 남는 문제가 발생했다. - 이 문제를 해결하기 위해 다음과 같은 보정 과정을 추가했다. - 현재 노드의 `left + width`보다 다음 노드의 `left`가 크면 두 노드 사이에 확장 가능한 공간이 있다고 판단한다. - 해당 노드와 연결된 예약들을 확인한다. - 여러 개의 빈 공간이 있으면 가장 작은 공간을 기준으로 연결된 노드들의 너비를 확장한다. - 이 과정을 반복해 예약 블록이 가능한 한 빈틈없이 영역을 채우도록 했다. ## 구현 과정에서 얻은 교훈 - 겉보기에는 단순한 UI라도 다양한 입력 데이터와 최악의 배치 상황을 고려해야 한다. - 타임 블록 캘린더는 예약의 정렬, 겹침 처리, 가로 확장, 예외 보정이 결합된 알고리즘 문제에 가깝다. - 그래프와 DFS 같은 자료구조·알고리즘이 실제 프런트엔드 UI 배치 문제를 해결하는 데 직접 활용될 수 있다. - 프런트엔드 개발자는 데이터를 화면에 어떻게 보여줄지 결정하는 책임과 권한을 함께 가진다. - 실제 서비스에서는 초기 알고리즘을 완성형으로 보기보다, 운영 중 발견되는 버그와 새로운 입력 패턴에 맞춰 지속적으로 개선해야 한다. 타임 블록 캘린더를 구현할 때는 먼저 예약을 시작 시간과 지속 시간 기준으로 안정적으로 정렬하고, 겹침 관계를 그래프로 모델링하는 방식이 유용하다. 이후 DFS로 배치 깊이와 확장 범위를 계산하되, 루트별 길이 차이로 생기는 잔여 공간과 같은 예외 케이스를 별도로 검증하는 것이 중요하다.

원문 읽기(새 탭에서 열림)
toss원문

쓰기 쉬운 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를 지향해야 합니다. 이를 위해 사용자의 의도를 최우선으로 고려한 추상화 계층을 설계하고, 대다수의 편의성과 소수의 유연성을 동시에 잡을 수 있는 다층적 구조를 도입할 것을 권장합니다.

woowahan원문

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

배달의민족 커머스웹프론트개발팀은 조직 규모 확대에 따른 복잡도와 비효율을 해결하기 위해 문화를 코드처럼 리팩토링하며 '경계 없는 파트' 구조를 도입했습니다. 특정 도메인이나 서비스에 갇히지 않고 책임을 확장하는 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)을 도입해 팀의 지식을 체계적으로 관리합니다. * **루틴의 재설계와 자동화**: 반복적인 업무나 귀찮은 과정을 레거시로 남기지 않고, 자동화와 프로세스 개선을 통해 개발 효율성을 지속적으로 높입니다. * **심리적 안전감 기반의 협업**: '불판'과 같은 자유로운 논의 문화를 통해 실패를 과정으로 수용하고, 질문이 스터디로 이어지는 선순환 구조를 구축했습니다. 성장하는 조직에서 발생하는 비효율을 방치하지 않고, 코드 리팩토링과 같은 관점에서 구조와 문화를 끊임없이 개선하는 태도가 중요합니다. 특히 도메인 간 경계를 허무는 시도는 대규모 서비스 통합이라는 복잡한 비즈니스 과제를 해결하는 데 매우 강력한 전략이 될 수 있습니다.

naver원문

디자인시스템이 AI를 만났을 때: FE 개발 패러다임의 변화 (새 탭에서 열림)

디자인 시스템과 AI의 결합은 단순한 도구의 조합을 넘어 프론트엔드(FE) 개발의 마크업 작업 방식을 근본적으로 혁신하고 있습니다. 네이버파이낸셜은 체계적으로 구축된 디자인 시스템을 기반으로 AI를 활용해 마크업 과정을 자동화함으로써 반복적인 코딩 시간을 단축하고 개발 효율성을 극대화했습니다. 다만, AI가 생성한 결과물을 실무에 즉시 투입하기 위해서는 디자인 토큰의 정교한 관리와 개발자의 세밀한 조정 작업이 반드시 병행되어야 한다는 점을 시사합니다. **네이버파이낸셜 디자인시스템의 근간: 토큰과 컴포넌트** * 디자인 시스템의 핵심인 '디자인 토큰'을 통해 색상, 간격, 폰트 등의 시각적 요소를 정의하고 디자이너와 개발자가 동일한 언어를 사용하도록 환경을 구축했습니다. * 재사용 가능한 UI 컴포넌트 단위를 명확히 정의하여, AI가 일관성 있는 코드를 생성할 수 있는 구조적 토대를 마련했습니다. * 단순한 UI 라이브러리를 넘어, 디자인 시스템 자체가 AI가 학습하고 참조할 수 있는 '신뢰할 수 있는 단일 소스(Single Source of Truth)' 역할을 수행합니다. **AI 마크업 효율을 극대화하는 Code Connect와 인스트럭션** * Figma의 'Code Connect' 기능을 활용해 디자인 도구 내의 컴포넌트와 실제 리액트(React) 코드를 직접 연결하여 AI가 맥락에 맞는 코드를 제안하도록 설계했습니다. * 디자인 시스템의 고유한 규칙과 코딩 컨벤션을 담은 상세한 '인스트럭션(Instruction)'을 AI에게 제공함으로써, 범용적인 코드가 아닌 팀의 표준에 부합하는 결과물을 얻어냈습니다. * 이 과정을 통해 개발자는 빈 화면에서 시작하는 대신, AI가 생성한 초안을 바탕으로 비즈니스 로직 구현에 더 집중할 수 있게 되었습니다. **현실적인 개발 도입 과정에서의 한계와 극복** * AI가 존재하지 않는 컴포넌트를 만들어내거나 잘못된 속성을 사용하는 '할루시네이션(환각)' 현상이 여전히 발생하여 개발자의 검토 과정이 필수적입니다. * 복잡한 레이아웃이나 고도의 인터랙션이 포함된 화면의 경우, AI가 단번에 완벽한 마크업을 생성하기 어렵다는 점을 확인했습니다. * 마크업 자동화가 성공하기 위해서는 단순히 AI 툴을 쓰는 것을 넘어, 디자인 시스템의 코드 품질과 문서화 수준이 먼저 뒷받침되어야 함을 실증했습니다. **마크업 자동화 이후의 FE 개발자 역할 변화** * 과거에 직접 태그를 입력하고 스타일을 잡던 수동적인 마크업 작업의 비중이 줄어들고, 생성된 코드를 조립하고 검증하는 '오케스트레이터'로서의 역할이 강조됩니다. * 단순 반복 작업에서 벗어나 더 복잡한 비즈니스 문제 해결과 사용자 경험(UX) 고도화에 개발 자원을 투입할 수 있는 환경이 조성되었습니다. * 결과적으로 AI는 개발자의 대체제가 아니라, 디자인 시스템이라는 약속된 규칙 위에서 함께 협업하는 강력한 동료로서 기능하게 됩니다. 성공적인 AI 기반 개발 환경을 구축하려면 디자인 시스템을 단순한 가이드가 아니라 **AI가 읽을 수 있는 데이터 구조**로 정교화하는 선행 작업이 가장 중요합니다. AI에게 맡길 영역과 개발자가 직접 제어할 영역을 명확히 구분하고, 코드 리뷰 단계를 강화하여 코드 품질을 유지하는 전략이 권장됩니다.

woowahan원문

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

웹 접근성은 단순히 점수를 높이는 기술적 과제가 아니라, 모든 사용자가 소외 없이 서비스를 이용할 수 있도록 보장하는 보편성의 가치를 실현하는 작업입니다. 우아한형제들 기술 블로그에서는 스크린 리더 사용자가 겪는 실질적인 불편함을 해결하기 위해 탐색 단위 구조화, 텍스트 통합, 상호작용 요소의 역할 구체화를 진행했습니다. 이를 통해 사용자 탐색 피로도를 획기적으로 낮추고 서비스의 본질적인 사용성을 회복하는 성과를 거두었습니다. ### 랜드마크와 머리말을 활용한 탐색 구조화 * **단위 탐색 기능 활성화**: 스크린 리더의 '로터(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)을 더할 때 비로소 모두를 위한 서비스를 완성할 수 있습니다.

woowahan원문

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

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

naver원문

네이버 TV (새 탭에서 열림)

네이버 통합검색은 방대한 클릭 로그를 히트맵과 히스토그램으로 시각화하여 사용자의 행동 패턴을 직관적으로 분석하고 있습니다. 단순한 정량적 수치를 넘어 시각적 데이터를 활용함으로써 서비스 개선을 위한 구체적이고 객관적인 근거를 확보하는 것이 핵심입니다. 이를 통해 빠르게 변화하는 검색 서비스 환경에서도 사용자 중심의 최적화된 UX를 도출하는 기술적 노하우를 공유합니다. **히트맵과 히스토그램을 통한 데이터 시각화** * 클릭 로그를 히트맵 형태로 변환하여 사용자가 페이지 내 어느 요소에 가장 많이 반응하고 어디에서 이탈하는지 시각적으로 즉각 파악합니다. * 히스토그램을 활용해 단순 클릭 횟수뿐만 아니라 데이터의 분포와 흐름을 분석하여 사용자 행동의 맥락을 이해합니다. * 숫자로만 이루어진 정량적 데이터의 한계를 극복하고, 서비스 개선을 위한 직관적인 인사이트를 제공합니다. **동적 검색 서비스 대응 및 인프라 구축** * 실시간으로 변화하고 고도화되는 네이버 통합검색 환경에 맞춰 클라이언트 로그를 수집하고 시각화하는 FE 인프라 기술을 적용했습니다. * 다양한 UI 구성 요소와 서비스 변화 속에서도 시각화 데이터의 정확성을 유지하기 위해 겪은 시행착오와 해결 방안을 포함합니다. * 웹 페이지 내 사용자 소비 방식을 정밀하게 확인하고 싶은 개발자와 기획자를 위해 기술적 구현 방법론을 제시합니다. 데이터 분석 결과가 실제 서비스 개선으로 이어지기 위해서는 수치 뒤에 숨겨진 사용자의 의도를 읽어내는 것이 중요합니다. 시각적 분석 도구를 활용하면 데이터 해석의 격차를 줄이고, 팀 구성원 모두가 공감할 수 있는 서비스 개선 방향을 설정하는 데 큰 도움이 될 것입니다.