마이리얼트립

RSS

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

All Frontend Backend AI DevOps Architecture Etc

Frontend
Product Engineer: 전직 백엔드 개발자, AI와 함께한 프론트엔드 도전기
전직 백엔드 개발자가 AI 코딩 도구 'Cursor'를 활용하여 프론트엔드 개발에 도전한 경험을 공유하는 글입니다. 마이리얼트립에서는 '백엔드', '프론트엔드' 구분 없이 'Product Engineer(PE)'로서 역할을 수행하며, 익숙하지 않은 프론트엔드 개발을 AI와 함께 진행했습니다. 프로젝트는 피그마의 상세한 정책과 요구사항을 기반으로 시작되었으며, AI에게 코드를 직접 요청하는 것보다 AI가 효과적으로 작업할 수 있도록 컨텍스트를 제공하는 '허브'의 중요성을 강조합니다. 결과적으로 AI의 도움을 받아 관리자 페이지 개발을 성공적으로 완료했으며, 이 과정에서 AI 활용의 새로운 가능성을 발견했습니다.
Frontend백엔드AI
마이리얼트립·2026년 3월 30일
Frontend
Product Engineer: iOS 개발자, 프론트엔드에 도전하다
본 글은 iOS 개발자가 프론트엔드 개발에 도전하는 경험을 공유합니다. 마이리얼트립의 Product Engineer 직무 확장 프로그램을 통해 프론트엔드 경험이 없는 송은진님이 안드로이드 개발자가 설계한 리셀마켓 프론트엔드 아키텍처를 넘겨받아 운영 및 고도화를 담당하게 된 과정을 다룹니다. 설계자와 운영자가 다를 때 발생하는 개발의 국면 변화와 그 과정에서 필요한 요소, 마주친 문제 및 해결 방안에 초점을 맞춥니다. 특히, 네이티브 iOS 개발자가 프론트엔드 개발에 도전하며 겪는 낯설지만 흥미로운 경험과 그 과정에서 얻은 인사이트를 중심으로 이야기가 전개됩니다.
iOSFrontendProduct Engineer
마이리얼트립·2026년 2월 11일
Frontend
마이리얼트립 SSR 최적화
마이리얼트립 고객경험개발팀은 통합 숙소 도메인의 성능 개선을 위해 SSR(Server-Side Rendering)을 도입했습니다. SSR은 SEO와 초기 로딩 속도 개선에 효과적이지만, React-query 사용 시 중복 호출 문제가 발생할 수 있습니다. 이 글은 마이리얼트립에서 겪었던 React-query 중복 호출 문제를 해결하고 SSR 성능을 최적화한 경험을 공유합니다. 구체적인 해결 과정과 적용된 기술들을 통해 SSR 환경에서의 데이터 페칭 전략과 성능 개선 방안을 배울 수 있습니다.
SSRReactReact-query
마이리얼트립·2025년 4월 28일
Frontend
웹로그 JavaScript SDK 개발 맛보기
마이리얼트립 프론트엔드 개발자가 웹 클라이언트 JavaScript SDK 개발 경험을 공유하는 글입니다. 기존 마케팅 도구의 샘플링 데이터 한계를 극복하고 자체 로그 플랫폼을 구축하기 위해 SDK를 개발했으며, 사용자 행동 분석을 위한 이벤트 수집 및 데이터 병합 기능을 포함합니다. React 기반 프로젝트에 SDK를 적용하는 과정에서 발생한 jQuery 기반 페이지와의 연동 문제 등 실제 개발 과정에서의 고민과 해결 방안을 간략하게 소개합니다.
JavaScript SDK웹 로그Frontend
마이리얼트립·2021년 2월 26일
Frontend
상황에 맞는 로딩 애니메이션 적용하기
이 글은 사용자 경험을 향상시키기 위한 로딩 애니메이션 적용 방법을 다룹니다. 버튼 클릭 후 화면 변화가 없을 때 사용자가 느끼는 불편함을 해소하고, 서비스의 완성도와 브랜딩을 높이는 로딩 애니메이션의 중요성을 강조합니다. 스켈레톤 UI, 루프 애니메이션, 텍스트 및 이미지 활용 등 다양한 로딩 애니메이션 형태를 소개하며, 마이리얼트립의 사례를 통해 일반적인 로딩 상태의 종류와 특징, 그리고 서비스에 적용하기 위한 고민과 구현 과정을 공유합니다. 글은 전체 로딩과 부분 로딩으로 나누어 설명하고, 스켈레톤 UI, 루프 애니메이션, 프로그래스 바 등 구체적인 형태별 특징과 장단점을 분석합니다.
로딩 애니메이션스켈레톤 UIUI 디자인
마이리얼트립·2020년 7월 1일
Frontend
Monorepo로 대규모 React 프로젝트 관리하기
마이리얼트립은 서비스 규모 증가와 복잡성 증대에 따라 대규모 React 프로젝트 관리를 위해 Monorepo 도입을 결정했습니다. 기존에는 단일 엔트리포인트에서 전체 사이트를 빌드하는 방식이었으나, MSA 전환을 목표로 각 패키지(vertical)별 독립적인 빌드가 가능한 환경이 필요했습니다. Monorepo는 하나의 저장소에 여러 프로젝트를 두는 구조로, Multirepo 방식에서 발생할 수 있는 환경 구성 중복 및 코드 복사/붙여넣기 문제를 해결하고 이슈를 한 곳에서 관리할 수 있다는 장점이 있습니다. 이 글은 Monorepo 도입을 통해 MSA에 대응하고 대규모 React 프로젝트를 효율적으로 관리하는 과정을 공유합니다.
MonorepoReactMSA
마이리얼트립·2020년 5월 19일
Frontend
Android WebView를 사용한 효과적인 대용량 이미지 로딩
이 글은 Android 환경에서 대용량 이미지를 효율적으로 로딩하는 방법에 대해 다룹니다. Android 앱에 할당되는 최대 메모리 사이즈와 Bitmap이 메모리를 소비하는 방식을 설명하며, 고해상도 이미지 로딩 시 발생할 수 있는 메모리 초과 문제를 지적합니다. 특히, Bitmap의 메모리 사용량 계산 공식과 ARGB_8888, RGB_565와 같은 비트맵 설정을 통해 실제 메모리 사용량을 계산하는 예시를 보여줍니다. 이를 통해 개발자가 대용량 이미지 로딩 시 메모리 관리에 대한 이해를 높이고, 효율적인 로딩 전략을 수립하는 데 도움을 주는 것을 목표로 합니다.
AndroidWebView이미지 로딩
마이리얼트립·2019년 8월 22일
Frontend
Abstract를 이용한 Sketch 파일 버전 관리
이 글은 마이리얼트립의 프로덕트 디자이너들이 겪었던 디자인 파일 관리의 어려움을 해결하기 위해 Abstract를 활용한 버전 관리 시스템 도입 과정을 소개합니다. 팀 협업 시 최신 디자인 파일을 찾기 어렵고, 파일 구조가 복잡해지는 문제를 겪었으며, 이를 해결하기 위해 개발 분야의 버전 관리 시스템 개념을 디자인에 적용했습니다. Abstract는 디자인 파일의 변경 이력을 시간에 따라 기록하고, 과거 특정 시점의 버전으로 쉽게 되돌릴 수 있게 하여 파일 히스토리를 투명하게 관리하고 최신 상태를 유지하는 데 도움을 줍니다. 이를 통해 디자이너들은 파일 탐색에 드는 시간을 줄이고 사용자에게 더 나은 프로덕트를 빠르게 제공하는 데 집중할 수 있게 되었습니다.
AbstractSketch디자인 파일
마이리얼트립·2019년 6월 10일
Frontend
마이리얼트립 웹사이트 성능 측정 및 최적화 Part 2. 렌더링
마이리얼트립은 웹사이트 성능 최적화를 위해 렌더링 과정에 집중했습니다. 특히 모바일 환경에서의 CPU 성능과 배터리 소모를 고려하여, 60fps를 기준으로 렌더링 성능을 측정하고 개선하는 방법을 다룹니다. JavaScript 실행, 스타일 계산, 레이아웃, 페인팅, 컴포지팅으로 이어지는 픽셀 파이프라인을 이해하고, React Profiler를 활용하여 불필요한 렌더링을 식별합니다. 최적화 기법으로는 작업 시점 제어, React 렌더링 및 Hooks 최적화 등을 통해 사용자 경험을 향상시키는 것을 목표로 합니다.
렌더링웹 성능React
마이리얼트립·2019년 6월 8일
Frontend
마이리얼트립 웹사이트 성능 측정 및 최적화 Part 1. 리소스 로딩
마이리얼트립 프론트엔드 팀은 웹사이트의 느린 로딩 속도가 사용자 경험과 매출에 미치는 부정적인 영향을 인지하고 성능 개선 작업을 진행했습니다. 이 글은 그 첫 번째 파트로, 특히 '리소스 로딩' 최적화 사례에 초점을 맞춥니다. 웹사이트 성능 저하는 여행자의 소중한 시간을 낭비시키고 서비스 신뢰도를 하락시킬 수 있기에, 팀은 지난 한 달간 성능 측정 및 개선 방안 모색에 힘썼습니다. 향후 렌더링 최적화와 메모리 관리 개선 사례도 공유될 예정이며, 이번 글은 리소스 로딩 관련 개선 내용을 중심으로 다룹니다.
웹 성능리소스 로딩최적화
마이리얼트립·2019년 5월 2일
Frontend
공유가 쉬운 컬러 시스템 만들기
이 글은 공유가 쉬운 컬러 시스템을 구축하는 방법에 대해 설명합니다. 컬러는 브랜드의 중요한 요소이며, 디자이너의 강력한 무기입니다. 유연한 컬러 체계를 만들고 효율적으로 협업하는 것이 중요합니다. 글에서는 컬러 시스템 구축의 필요성과 함께, 실제 구현 과정에서 고려해야 할 사항들을 다룰 것으로 예상됩니다. 디자인 시스템의 일부로서 컬러 시스템을 어떻게 효과적으로 관리하고 공유할 수 있는지에 대한 인사이트를 제공할 것으로 보입니다.
컬러 시스템디자인 시스템UI
마이리얼트립·2018년 7월 1일