모든 블로그
여기어때

여기어때

주요 카테고리 프론트엔드 · DevOps

활동 요약

대표 인기 포스트멀티모듈 프로젝트, 왜 그리고 어떻게 해야 할까?354 조회
최근 30일
2개
평균 조회
77
누적 조회
17,094
전체 글
223개
마지막 발행
2026. 10. 20.
블로그 방문

여기어때 기술 블로그 글 (67)

프론트엔드

복잡한 검색 홈, 구조는 유연하게 화면은 부드럽게 개선하기

검색 홈과 결과 화면을 모듈로 분리하고, SwiftUI 기반의 탭 구조로 재설계한 사례를 소개했습니다. 또한 중간 페이지를 건너뛰는 커스텀 전환 뷰로 화면 전환 경험을 개선했습니다.

#SwiftUI#iOS#검색
6600

프론트엔드

여기쏙 — Figma plugin 제작기 : 3. 성능

Figma 플러그인 2.0의 성능 개선을 위해 통신 계층과 렌더링 구조를 전면 재설계했습니다. 비동기 매칭, 탐색 비용, 이미지 로딩, 스토리지 동기화를 최적화해 체감 속도와 안정성을 높였습니다.

#Figma#React#성능
7400

프론트엔드

여기쏙 — Figma plugin 제작기 : 2. UI

Figma 플러그인 UI를 가볍고 단순한 구조로 설계한 과정을 소개했습니다. 필터 상태, 캐시, 메시지 통신을 중심으로 실데이터 연동과 UX 개선을 정리했습니다.

#Figma#React Query#Preact
5600

프론트엔드

여기쏙 — Figma plugin 제작기 : 1. 프록시 서버

Figma 플러그인에서 내부 API를 직접 호출할 때 발생하는 CORS와 HTTPS 제약을 해결하기 위해 프록시 서버를 구축했습니다. 기존 인프라를 재사용하고 최소 권한 원칙으로 설계해 안전하게 운영했습니다.

#Figma#NestJS#Docker
5700

프론트엔드

App Intent, 어디까지 쓸 수 있을까

App Intents로 앱 액션을 시스템에 노출하는 방법과 예약내역-캘린더 저장 예시를 정리했습니다. 다만 Apple Intelligence의 자연어 자동 매핑은 아직 제한적이어서 Shortcuts 중심 전략이 현실적이라고 보았습니다.

#iOS#App Intent#Siri
7300

프론트엔드

제휴점 목록/지도 통합기: 26배 폭증한 비용부터 아키텍처 최적화까지

목록과 지도를 하나의 화면으로 통합하며 비용 폭증과 구조 비대화 문제를 함께 다뤘습니다. Lazy Load, StateHolder, 거리 기반 클러스터링, 커스텀 바텀시트로 개선했습니다.

#Android#Kotlin#Compose
7500

프론트엔드

Compose NestedScrollConnection 을 이용한 딜허브 화면 구현

Compose의 NestedScrollConnection으로 Tab 접힘과 페이지 스크롤을 연결하는 딜허브 화면 구현 방법을 설명했습니다. LazyColumn stickyHeader와 상태 제어를 함께 써서 화면별 인터랙션을 맞춘 사례를 공유했습니다.

#Android#Jetpack Compose#NestedScrollConnection
4600

프론트엔드

️여기어때 Date·인원 선택 UI 만들기-SwiftUI Calendar Core & DateTravelerSelector 구조 재설계

SwiftUI 기반 Date·인원 선택 UI를 도메인별 정책에 맞게 분리하고 공통 달력 Core로 재구성했습니다. LazyVGrid를 대체해 iOS 16 안정성과 렌더링 성능도 개선했습니다.

#SwiftUI#iOS#Swift
4500

프론트엔드

여기어때 마케팅 파트너 구축기

여기어때 마케팅 파트너 서비스를 수기 운영에서 시스템 기반 운영으로 전환한 구축 사례를 다뤘습니다. 하이브리드 구조와 AI QA로 4주 내 런칭과 운영 효율화를 동시에 달성했습니다.

#자동화#ChatGPT#Jira
14900

프론트엔드

Compose에서 Stable을 가볍게 보면 안 되는 이유: LazyList 안정성 가이드 Part 2

LazyColumn 최적화에서 key와 stable 상태가 recomposition 범위에 큰 영향을 준다고 설명했습니다. 아이템 상태와 리스트 변경 방식에 맞는 모델을 선택하는 것이 중요하다고 정리했습니다.

#Android#Jetpack Compose#LazyColumn
5300

프론트엔드

여기어때 컬처북 제작기(2) — 디자인편

여기어때는 리더십원칙을 심볼과 일러스트로 재해석해 컬처북으로 제작했습니다. 딱딱한 가이드북 대신 스토리북 형식으로 조직문화를 친근하게 전달했습니다.

#UI/UX#design#문화
7600

프론트엔드

레퍼런스 없는 광고센터 UX, 어떻게 풀었을까?

레퍼런스가 거의 없는 광고센터를 만들기 위해 영업 사원의 업무 루틴과 기존 운영 방식을 먼저 파악했습니다. 엑셀 기반 관리 구조를 힌트로 삼아 제휴점 단위의 주문·결제 흐름에 맞는 UX로 재설계했습니다.

#UX/UX Design#B2B#internal product
7400

프론트엔드

Playwright로 하는 Component Test와 E2E Test Coverage

Playwright로 컴포넌트 테스트와 E2E 테스트를 병행해 고객센터 채팅의 핵심 사용자 여정을 검증했습니다. 80% 커버리지를 달성하며 크로스 브라우징과 모바일 환경 안정성을 확보했습니다.

#Playwright#E2E#test
15400

프론트엔드

Compose에서 Stable을 가볍게 보면 안 되는 이유: 베드 케이스로 본 안정성의 법칙 Part 1

Compose Stability가 재구성과 성능에 미치는 영향을 여러 객체 유형으로 비교해 설명했습니다. @Stable과 @Immutable은 단순 최적화가 아니라 계약이므로 신중히 사용해야 합니다.

#Android#Jetpack Compose#kotlin
6500

프론트엔드

데이터 자동 생성으로 생산성 향상 : Playwright로 3분 걸리던 계약 생성을 30초로!

Playwright로 계약 데이터 수동 생성 과정을 자동화해 2~3분 걸리던 작업을 30초로 줄였습니다. 반복 입력을 줄여 QA가 검증에 더 집중할 수 있도록 개선했습니다.

#Playwright#자동화#QA
10500

프론트엔드

팀 개발 속도 높이기: 피그마 컴포넌트 코드 자동 변환 플러그인 제작기

Figma Dev Mode의 Codegen Plugin API로 디자인 요소를 팀 규칙에 맞는 코드로 자동 변환하는 플러그인을 제작했습니다. 이를 통해 UI 작성 시간을 크게 줄이고 실수도 감소시켰습니다.

#Figma#API#React
16000

프론트엔드

Next.js 개발 중 마주한 Hydration Error와 원인

Next.js SSR 환경에서 Hydration Error가 발생한 원인과 점검 방법을 정리했습니다. dayjs locale 불일치로 서버와 클라이언트 렌더 결과가 달라진 사례를 설명했습니다.

#Next.js#React#SSR
14300

프론트엔드

Kotlin Flow를 통한 단방향 데이터 스트림 설계서

Kotlin Flow를 단방향 데이터 스트림 관점에서 활용해 Android 화면 상태 관리를 단순화한 사례를 설명했습니다. shareIn, merge, combine, flatMapLatest의 사용 기준과 주의점을 정리했습니다.

#Kotlin#Flow#Android
10400