여기어때

RSS

게시글: 295
등록: 2026년부터

All Frontend Backend AI DevOps Architecture Etc

Frontend
CMS 모노레포 개선기: 빌드 시간 단축부터 번들 최적화까지
여기어때컴퍼니 백오피스 웹 개발팀은 10여 개의 Next.js 앱을 하나의 모노레포에서 운영하며 발생하는 14분 이상의 긴 빌드 및 배포 시간 문제를 해결하기 위한 개선 과정을 공유합니다. Spring Boot와 Next.js가 결합된 구조에서 Next.js 앱들은 Static Export 모드로 빌드되며, 모든 앱의 빌드 결과물이 하나의 Spring Boot JAR에 포함되는 방식입니다. 이로 인해 프론트엔드 앱 하나만 수정해도 전체 앱을 다시 빌드해야 하는 비효율이 발생했습니다. 글에서는 빌드 파이프라인 분석을 통해 약 40%의 배포 시간 단축을 이룬 구체적인 최적화 방안들을 소개하며, 모노레포 환경에서의 빌드 및 번들 최적화 전략의 중요성을 강조합니다.
모노레포Next.js빌드 최적화
여기어때·2026년 4월 23일
Frontend
멀티 프레임워크 디자인 시스템, 결국 운영 가능한 구조를 선택한 이유
이 글은 React와 Vue를 함께 지원하는 멀티 프레임워크 디자인 시스템을 구축하고 운영하면서 겪은 경험을 공유합니다. 초기에는 모든 프레임워크에서 컴포넌트까지 일관되게 지원하는 것을 목표로 했으나, 기능 추가, QA, 배포, 회귀 검증 등의 운영 비용이 급증하는 문제에 직면했습니다. 결국 "모든 것을 동일하게 지원"하는 전략에서 "운영 가능한 범위를 선택하는 전략"으로 전환했습니다. 현재는 React 컴포넌트를 운영 축으로 삼고, Vue에서는 디자인 파운데이션(토큰, 스타일, 유틸리티) 중심으로 소비하는 구조로 변경했습니다. 이 글은 이러한 전환 과정에서 얻은 것과 포기한 것, 그리고 비슷한 상황에서 의사결정을 내릴 때 고려해야 할 기준을 제시합니다.
디자인 시스템ReactVue
여기어때·2026년 3월 10일
Frontend
불안정한 테스트를 신뢰로 바꾸는 과정: Playwright Flaky Test 개선기
본 글은 여기어때컴퍼니 자동화QA팀에서 겪었던 불안정한 테스트(Flaky Test) 문제를 해결하기 위한 과정을 공유합니다. 기존에 Robot Framework를 사용하면서 겪었던 Headless 모드의 불안정성과 비효율적인 디버깅, 그리고 테스트 신뢰도 저하 문제를 해결하기 위해 Playwright로 마이그레이션하는 과정을 상세히 설명합니다. Playwright의 자동 대기(auto-wait) 메커니즘과 강력한 디버깅 도구를 활용하여 테스트 실행 시간을 단축하고, 간헐적인 오류를 줄여 테스트 신뢰도를 높인 경험을 다룹니다. 궁극적으로는 도구 변경뿐만 아니라 테스트 로직 개선의 중요성을 강조하며, 불안정한 테스트를 신뢰할 수 있는 테스트로 전환하는 실질적인 방법을 제시합니다.
PlaywrightFlaky Test테스트 자동화
여기어때·2026년 2월 13일
Frontend
해외 숙소 리스트 성능 개선기 : 반쪽짜리 SSR에서 완벽한 인피니트 스크롤까지
이 글은 여기어때 서비스웹개발팀에서 해외 숙소 리스트 페이지의 성능을 개선한 경험을 공유합니다. 기존에 SSR을 표방했지만 실제로는 클라이언트에서 JS 실행 후 콘텐츠가 채워지는 반쪽짜리 SSR 구조를 가지고 있었습니다. 이를 해결하기 위해 첫 페이지 데이터는 서버에서 미리 Fetching 하여 HTML을 채우고 클라이언트에서 Hydration을 통해 React가 자연스럽게 이어받도록 수정했습니다. 또한, 인피니트 스크롤 도입 시 발생했던 푸터 도망감, 스크롤 초기화, 구글 봇의 빈 화면 인식 등의 문제를 해결했습니다. 이러한 개선을 통해 LCP(Largest Contentful Paint) 지표를 21% 개선하는 성과를 얻었으며, 사용자 경험 향상과 검색 엔진 최적화(SEO) 측면에서도 긍정적인 영향을 미쳤습니다.
인피니트 스크롤SSRHydration
여기어때·2026년 1월 28일
Frontend
전시 동적필터 리팩토링
여기어때 서비스의 전시 동적 필터 리팩토링 과정을 소개하는 글입니다. 동적 필터는 사용자가 선택한 조건에 따라 이용 가능한 제휴점 수가 실시간으로 반영되어 노출되는 필터로, 다중 카테고리 선택 및 결과 없는 필터 비활성화 기능을 제공하여 사용자 편의성을 높입니다. 기존 구조는 단순했지만 확장이 어렵다는 문제점을 가지고 있었습니다. 본문에서는 이러한 AS-IS 구조의 문제점을 분석하고, 리팩토링을 통해 얻게 된 구조적 개선점과 그 과정에 대해 설명합니다. 이를 통해 코드의 가독성과 유지보수성을 향상시키고, 향후 기능 확장에 용이한 구조를 구축하는 것을 목표로 합니다.
동적 필터리팩토링React
여기어때·2026년 1월 9일
Frontend
복잡한 검색 홈, 구조는 유연하게 화면은 부드럽게 개선하기
여기어때 앱의 복잡한 검색 홈 화면을 유연한 구조와 부드러운 화면 전환으로 개선한 경험을 공유합니다. 기존 검색 홈은 다양한 조건과 복잡한 로직으로 인해 유지보수가 어렵고 성능 이슈가 있었습니다. 이를 해결하기 위해 컴포넌트 분리, 상태 관리 개선, 비동기 처리 최적화 등을 통해 코드 구조를 유연하게 만들었습니다. 또한, 화면 전환 시 로딩 속도를 개선하고 부드러운 애니메이션을 적용하여 사용자 경험(UX)을 향상시켰습니다. 이 글은 복잡한 UI를 개선하고 사용자 경험을 최적화하는 데 필요한 기술적 접근 방식과 고려사항을 다룹니다.
iOS검색 홈UX 개선
여기어때·2025년 12월 22일
Frontend
여기쏙 — Figma plugin 제작기 : 3. 성능
이 글은 Figma 플러그인 '여기쏙 2.0' 개발 과정에서 겪은 성능 최적화 및 아키텍처 재설계 경험을 공유합니다. 1.0 버전의 레거시 코드가 대규모 데이터 처리 및 수십 개의 비동기 API 호출, 수백 개의 레이어 조작을 감당하기에 부적합하다는 문제점을 인식하고, 데이터 처리 효율 극대화를 목표로 서비스를 바닥부터 다시 설계했습니다. Figma 플러그인의 독특한 '이중 스레드 구조'(UI 스레드와 메인 스레드)의 샌드박스 환경을 이해하는 것이 성능 개선의 핵심임을 강조하며, 이를 바탕으로 한 구체적인 성능 향상 및 아키텍처 재설계 과정을 상세히 기록했습니다.
Figma pluginPerformance Optimization아키텍처 재설계
여기어때·2025년 12월 18일
Frontend
여기쏙 — Figma plugin 제작기 : 2. UI
Figma 플러그인 '여기쏙'의 UI 개발 과정을 다루는 글입니다. 이전 글에서 프록시 서버 구축을 통해 실제 데이터를 연동할 수 있게 된 후, 이번 글에서는 플러그인 내에서 실데이터를 어떻게 받아와 적용했는지 상세히 설명합니다. 개발 시작 전 UX 점검을 통해 사용자 흐름과 플로우를 개선하고, 워딩을 명확히 하며 불필요한 정보 노출을 줄이는 등 사용자 경험을 향상시켰습니다. 이후 Figma 플러그인의 기술적 제약을 고려하여 리소스를 최소화하고 빠르게 로딩되며 유지보수 비용이 낮은 기술 구조를 설계하는 과정에 대한 고민을 공유합니다.
Figma pluginUI/UXFrontend
여기어때·2025년 12월 18일
Frontend
여기쏙 — Figma plugin 제작기 : 1. 프록시 서버
본 글은 여기어때 서비스웹개발팀에서 디자이너의 생산성 향상을 위해 직접 개발한 Figma 플러그인 '여기쏙' 제작 과정을 다룹니다. 특히, 실제 서비스 데이터를 Figma 디자인에 빠르고 정확하게 적용하는 데 어려움을 겪었던 기존 방식의 비효율성을 개선하고자 하는 필요성에서 시작되었습니다. 여기쏙 1.0은 더미 데이터를 기반으로 작동하여 여러 문제가 있었으며, 본 글에서는 이러한 문제들을 해결하기 위한 접근 방식과 개선 과정을 공유합니다. 첫 번째 이야기로 프록시 서버 구축에 대한 내용을 다룰 예정이며, Figma 플러그인 개발에 대한 실전 경험과 인사이트를 제공하고자 합니다.
Figma플러그인프록시 서버
여기어때·2025년 12월 18일
Frontend
Compose NestedScrollConnection 을 이용한 딜허브 화면 구현
본 글은 Android Compose에서 NestedScrollConnection을 커스텀하여 독특한 UI 인터랙션을 구현하는 방법을 다룹니다. 특히, 스크롤과 탭이 유기적으로 연동되는 딜허브 화면 구현 사례를 통해 NestedScrollConnection의 활용법을 상세히 설명합니다. 딜허브 화면은 여러 탭과 각 탭 내의 수직 스크롤 가능한 리스트를 포함하며, 스크롤에 따라 상단 탭 영역이 접히는(collapsing) 인터랙션을 가집니다. 이를 구현하기 위해 Tab과 HorizontalPager를 조합하고, NestedScrollConnection을 커스텀하여 원하는 스크롤 동작을 만들어내는 과정을 공유합니다. 이를 통해 기존 스크롤 패턴으로는 구현하기 어려운 개성 있는 UI를 Compose로 구현하는 방법을 배울 수 있습니다.
Android ComposeNestedScrollConnectionCustom Scroll
여기어때·2025년 12월 16일
Frontend
️여기어때 Date·인원 선택 UI 만들기-SwiftUI Calendar Core & DateTravelerSelector 구조 재설계
여기어때컴퍼니 iOS 개발팀은 SwiftUI를 사용하여 '날짜 + 인원 선택(DateTravelerSelector)' UI를 재설계한 경험을 공유합니다. 기존에는 패키지, 국내숙소, 해외숙소 등 다양한 도메인에서 UI는 비슷하지만 정책이 달라 공통화하기 어려웠습니다. 패키지는 출발일만, 국내숙소는 체크인/아웃과 총 인원, 해외숙소는 성인/아동 분리 및 객실 수까지 고려해야 했습니다. 이러한 도메인별 정책 차이가 커서 하나의 통합 달력으로 만들기보다, 전체 화면은 분리하되 달력 셀과 스타일 등 UI적인 부분은 공통화하는 방향으로 구조를 재설계했습니다. 이를 통해 복잡한 로직을 줄이고 유지보수성을 높이는 것을 목표로 했습니다.
SwiftUIUI 개발날짜 선택
여기어때·2025년 12월 16일
Frontend
여기어때 고객 상담 시스템 구축 — SendBird와 metaData 기반 상태 관리
여기어때컴퍼니 서비스웹개발팀에서 SendBird SDK와 메타데이터를 활용하여 고객 상담 시스템을 구축한 경험을 공유합니다. 기존 카카오 채널 상담 방식에서 벗어나 앱/웹 내에서 바로 상담받을 수 있는 환경을 목표로, SendBird SDK를 중심으로 실시간 상담 시스템을 설계하고 Salesforce 연동을 통해 상담 이력 관리 및 상태 기반 처리를 구현했습니다. 특히 커스텀 UI 구현, 상태 기반 분기 처리, 시스템 메시지 노출, Salesforce 상태 동기화 등의 문제 해결을 위해 SendBird의 메타데이터 기능을 적극 활용하여 유연하고 확장 가능한 상담 시스템을 구축하는 과정을 상세히 다룹니다. 웹뷰 구조 설계를 통해 다양한 서비스 환경에서의 재사용성도 확보했습니다.
SendBird고객 상담 시스템실시간 채팅
여기어때·2025년 11월 12일
Frontend
Compose에서 Stable을 가볍게 보면 안 되는 이유: LazyList 안정성 가이드 Part 2
본 글은 Android Jetpack Compose의 LazyList 성능 최적화와 관련된 "Stable"의 중요성을 강조하는 "Stable을 가볍게 보면 안 되는 이유: LazyList 안정성 가이드 Part 2" 기술 블로그 글입니다. LazyList의 안정성 문제를 해결하고 성능을 향상시키기 위해 "@Stable" 어노테이션의 올바른 사용법과 그 원리를 심층적으로 다룹니다. 특히, Compose 컴파일러가 UI 변경을 효율적으로 감지하고 불필요한 recomposition을 방지하는 메커니즘을 설명하며, 개발자가 "@Stable"을 잘못 사용할 경우 발생할 수 있는 성능 저하 문제를 경고합니다. 이를 통해 개발자는 LazyList의 안정성을 확보하고 더욱 빠르고 효율적인 UI를 구축할 수 있습니다.
Jetpack ComposeLazyListStable
여기어때·2025년 11월 5일
Frontend
Playwright로 하는 Component Test와 E2E Test Coverage
이 글은 프론트엔드 개발자가 Playwright를 사용하여 컴포넌트 테스트와 E2E 테스트 커버리지를 확보하는 과정을 공유합니다. 특히 고객센터 채팅 상담 프로젝트에서 Web, Mobile Web, WebView 환경의 안정성을 위해 단위 테스트와 E2E 테스트의 필요성을 강조하며, 핵심 사용자 여정 검증의 어려움을 언급합니다. Cypress와 Playwright를 비교 분석하며, 크로스 브라우징 지원, 멀티 탭 제어, 네트워크 제어 등 Playwright의 장점을 설명하고 선택 이유를 제시합니다. 이를 통해 복잡한 시나리오와 다양한 브라우저 환경에서의 테스트 커버리지를 효과적으로 높이는 방법을 다룹니다.
PlaywrightComponent TestE2E Test
여기어때·2025년 9월 3일
Frontend
Compose에서 Stable을 가볍게 보면 안 되는 이유: 베드 케이스로 본 안정성의 법칙 Part 1
이 글은 Android Compose 개발자를 대상으로 Compose의 안정성(Stability) 개념을 베드 케이스(잘못된 사용 사례)를 통해 심도 있게 분석합니다. Compose의 성능 최적화에 필수적인 안정성은 불필요한 재구성을 건너뛰게 하여 앱의 효율성을 높입니다. 글에서는 일반 클래스, data 클래스, @Stable, @Immutable 어노테이션을 적용한 경우를 비교하며, 각 상황에서 recomposition이 어떻게 동작하는지 실제 코드를 통해 보여줍니다. 특히, 가변 프로퍼티를 가진 일반 클래스 사용 시 발생할 수 있는 성능 저하 문제를 구체적인 실험 결과와 함께 설명하며, Compose의 내부 메커니즘을 이해하고 안정성 규칙을 올바르게 적용하는 것의 중요성을 강조합니다.
Android ComposeStabilityRecomposition
여기어때·2025년 9월 3일
Frontend
팀 개발 속도 높이기: 피그마 컴포넌트 코드 자동 변환 플러그인 제작기
여기어때컴퍼니 파트너웹개발팀에서 UI 개발 속도 향상을 위해 피그마 컴포넌트를 코드로 자동 변환하는 플러그인을 직접 제작한 경험을 공유합니다. 기존 방식으로는 디자인 시스템 규칙을 반영하기 어렵고 반복적인 수작업에 많은 시간이 소요되는 문제가 있었습니다. 기존 플러그인이나 Figma Code Connect 기능도 팀의 요구사항을 충족시키지 못해 직접 플러그인을 개발하기로 결정했습니다. 이 플러그인 도입 후 Typography 컴포넌트 작성 시간이 30초에서 5초 미만으로 줄어드는 등 UI 개발 속도가 약 80% 향상되는 효과를 보았습니다. 본문에서는 플러그인 제작 배경, 구현 과정, 그리고 실제 도입 후 변화에 대해 자세히 설명합니다.
FigmaUI 개발디자인 시스템
여기어때·2025년 9월 1일
Frontend
Next.js 개발 중 마주한 Hydration Error와 원인
본 글은 Next.js 개발 중 발생하는 Hydration Error의 원인과 해결 과정을 다룹니다. Hydration Error는 Next.js 또는 React SSR 환경에서 서버 렌더링된 HTML과 클라이언트 렌더링 결과가 일치하지 않을 때 발생하는 오류입니다. CSR만 사용하는 SPA와 달리, SSR과 CSR을 혼합 사용하는 Next.js에서는 서버와 클라이언트의 실행 환경 차이로 인해 비동기 데이터, 시간, 랜덤 값, 브라우저 API 사용 시 hydration mismatch가 발생하기 쉽습니다. 이는 UI 깨짐, 깜빡임, 기능 오류 등 사용자 경험 저하로 이어질 수 있습니다. 글에서는 이러한 오류의 근본적인 원인을 파악하고 해결하기 위한 여정을 공유합니다.
Next.jsHydration ErrorReact
여기어때·2025년 8월 7일
Frontend
Kotlin Flow를 통한 단방향 데이터 스트림 설계서
이 글은 여기어때 안드로이드 팀이 복잡한 상품정보 화면의 데이터 처리를 위해 Kotlin Flow를 활용하여 단방향 데이터 스트림을 설계한 경험을 공유합니다. 기존 명령형 프로그래밍 방식의 상태 관리 한계를 지적하며, Flow를 통해 상태를 데이터 흐름 안에서 직접 관리하는 함수형 스타일의 장점을 설명합니다. Flow는 비동기 흐름과 상태 관리를 효과적으로 처리하며, 불변성 기반으로 부수 효과를 최소화하고 코루틴 기반으로 동시성에 강점을 가집니다. 이를 통해 상태 변화의 흐름과 원인을 명확히 파악하고 복잡성을 줄여 유지보수성을 향상시킬 수 있음을 강조합니다.
Kotlin Flow단방향 데이터 스트림상태 관리
여기어때·2025년 7월 8일
Frontend
한 줄로 끝내는 iOS 화면 생성: Scaffold + Makefile
이 글은 여기어때 iOS 개발팀에서 SwiftUI 화면 개발 시 발생하는 반복적인 코드 생성(Boilerplate Code) 문제를 해결하기 위해 Tuist Scaffold와 Makefile을 활용한 자동화 방안을 소개합니다. 기존에는 Coordinator, HostingViewController, ReducerView, ObservableReducer, Reducer 등 5가지 파일로 책임을 분리하여 상태 관리를 명확히 했지만, 매번 수작업으로 파일을 생성하고 기본 코드를 채우는 과정이 번거로웠습니다. Tuist Scaffold와 Makefile을 결합하여 이러한 반복 작업을 자동화함으로써 개발 생산성을 높이고, MVI Pattern과 SwiftUI를 기반으로 견고한 기술 스택을 구축하여 기능 개발의 일관성과 재사용성을 향상시키는 방법을 제시합니다.
iOSSwiftUIMVI Pattern
여기어때·2025년 6월 19일
Frontend
네트워크 기반 Compose Preview가 안보인다면?
본 글은 여기어때컴퍼니 Android 개발팀에서 YDSImage 컴포넌트의 Compose Preview가 렌더링되지 않는 문제를 해결한 경험을 공유합니다. YDS(Yeogi Design System)는 여기어때의 UI 일관성을 유지하기 위한 디자인 시스템으로, 텍스트, 색상, 컴포넌트 규격 등을 체계적으로 정의합니다. YDSImage는 이러한 YDS의 여러 컴포넌트에서 공통으로 사용하는 네트워크 기반 이미지 렌더링 컴포넌트입니다. 글에서는 이 컴포넌트의 Preview 렌더링 문제를 발견하고 개선하는 과정을 상세히 다루며, 이를 통해 개발 효율성을 높이고 UI 구현의 수월성을 경험한 내용을 전달합니다.
Compose PreviewAndroidYDS
여기어때·2025년 6월 19일