여기어때 세션: 주목받지 못한 서비스를 되살리기까지 │인프콘2024
INFCON 2024 인프런 · YouTube
AI 핵심 요약
앱 중심으로 운영되던 여기어때 웹은 기능과 업데이트가 부족해 주목받지 못했지만, 해외여행 수요가 늘며 비교·예약을 위한 웹 경험을 개선할 필요가 생겼습니다. 프론트엔드 팀은 React와 TypeScript 기반으로 기능·레이아웃 컴포넌트를 나누고, 시맨틱 HTML과 ARIA를 적용해 웹 접근성을 높였으며 Storybook으로 컴포넌트 상태와 로딩 화면을 확인하도록 했습니다. React Query의 전역 에러 처리, CDN을 통한 정적 리소스 제공, 페이지별 SSR·ISR·SSG 선택과 로직 단위 테스트도 함께 도입했습니다. 그 결과 접근성 점수는 98점 수준이 되었고, 웹은 숙소 검색부터 지도와 상세 정보 확인까지 제공하는 서비스로 바뀌었습니다.
- 스크린 리더 사용을 고려해 시맨틱 HTML 태그와 ARIA 속성을 적용하고, 컴포넌트 단위로 접근성을 점검하세요.
- Storybook에 컴포넌트 상태를 모아두면 개발자와 디자이너가 화면을 확인하고 논의하기 쉽습니다.
- React Query의 전역 에러 이벤트를 활용하면 요청별 에러 처리 코드의 중복과 파편화를 줄일 수 있습니다.
- MSW로 응답을 지연하거나 중단해 로딩 상태를 재현하면 실제 화면을 보며 적절성을 검토할 수 있습니다.
- 페이지 특성에 맞춰 SSR·ISR·SSG를 선택하고, 테스트하기 쉬운 작은 순수 함수로 복잡한 로직을 나누세요.
소개
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://inf.run/ifwWL 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 주목받지 못한 서비스를 되살리기까지! - 안도영 여기어때에서는 사용자에게 다양한 여행 관련 서비스를 제공하고 있습니다. 이 다양한 기능들은 앱으로 활용이 가능하며 수많은 기능이 추가되고 있습니다. 또한 유저 친화적인 서비스를 위해 많은 노력들을 하고 있습니다. 하지만 웹은 옛날 모습을 간직한 채 아무런 업데이트 없이 산소 호흡기만 달고 유지될 뿐 거의 버려진 서비스였습니다. UX 및 UI, 프로젝트조차 레거시가 돼버린 상태에서 작년 한 해 동안 리뉴얼 작업을 거쳐 새로운 서비스로 탈바꿈하였습니다. 웹 서비스를 재 탄생시키면서 어떠한 부분을 중점적으로 고려하였는지, 프로젝트를 진행함에 있어서 필요한 부분은 무엇인지 그 사이에 얻어진 경험들을 공유하려고 합니다. 여행 서비스에 관심이...
비슷한 학습 자료
컨퍼런스 INFCON 2024
오프닝 키노트 | 인프콘2024
컨퍼런스 INFCON 2024
React Native와 함께 인프런 앱 새로 만들기│인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 React Native와 함께 인프런 앱 새로 만들기 - 권건우, 이문기 왜 React Native를 사용했는지, 플레이어는 어떻게 만들었는지 등 인프런 앱을 만들면서 했던 선택들을 공유합니다. 그리고 React Native와 Native를 함께 다루면서 미리 알았다면 좋았을 문제들을 나눕니다. #인프콘 #인프런 #인프콘2024 #인프콘2024다시보기
모바일 앱 개발
컨퍼런스 INFCON 2024
달리는 기차의 바퀴 갈아끼우기: 인프런 프론트엔드 마이그레이션 여정│인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 달리는 기차의 바퀴 갈아끼우기: 인프런 프론트엔드 마이그레이션 여정 - 조성륜 실제 운영되고 있는 서비스의 레거시 코드(Express.js 기반 Vanilla.js)를 모던 리액트 환경으로 마이그레이션을 하기위한 인프런 프론트파트의 여정을 공유합니다. #인프콘 #인프런 #인프콘2024 #인프콘2024다시보기
웹 개발 프론트엔드
컨퍼런스 INFCON 2024
인프런 아키텍처 2024 ~ 2025 | 인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 인프런 아키텍처 2024 ~ 2025 - 이동욱 작년 발표 이후 1년간 인프런 아키텍처가 어떤 변화가 어떤 이유로 진행되었는지 소개 합니다. 새로운 구조나 아키텍처로 개편하는 과정에 대한 이야기들은 많지만 그런 개편 이후 1년, 2년이 지나서 어떤 결과가 만들어지는지에 대한 소개는 많이 없습니다. 인프런에서는 2022년부터 지속적으로 아키텍처를 점진적으로 개선하고 있으며, 2년전의 결정이 지금은 어떻게 되었는지 등 결과도 함께 경험하고 있습니다. 최근 1년간은 비용절감, Next.js 기반의 SSR, CSR, SPA 환경과 기존 Express SSR 과의 공존, 글로벌 플랫폼을 가기 위한 기반 작업 등등 여러 관심사를 해결하기 위한 노력들을 해왔습니다. 인프런 서비스가 ...
프론트엔드 백엔드
컨퍼런스 INFCON 2024
개발자 손 꼭 붙잡고 기획하기 | 인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 개발자 손 꼭 붙잡고 기획하기 - 송은택 개발자들의 의견을 더 많이 듣고 싶지만 어떻게 그들의 의견을 끌어내야할 지 모르겠는 PM, 디자이너 그리고 비즈니스와 제품 기획에 더 많이 관여하고 싶은 개발자들을 위해 준비한 내용입니다. 최근에 인프랩 ucc셀에서는 프로젝트 초기 기획 과정에서부터 엔지니어들도 함께 참여했습니다. 진행하는 프로젝트의 전체적인 맥락을 초기부터 공감하고, 디테일한 정책 설계까지 함께했는데요. 높은 몰입도를 보여주었습니다. 프로젝트를 진행할수록 엔지니어들은 초기 기획보다 더 참신한 방안을 계속해서 제시하고, 실행했습니다. 프로젝트를 진행하며 어느 순간 각자의 생각이 모두 일치하는 경험을 했습니다. 불필요한 커뮤니케이션은 자연스럽게 감소했고요. 어떤 ...
프로덕트 매니지먼트 애자일 · 협업
컨퍼런스 INFCON 2024
그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지│인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://inf.run/ifwWL 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지 - 유진의 "웹 어셈블리"(이하 WASM)는 2017년에 공개된 새로운 웹 표준 기술이며, C/C++ 등의 저수준 언어를 웹 환경에서 빠르고 안전하게 구동할 수 있습니다. 저희 조직에서는 C++ 오픈소스를 WASM으로 전환하는 과정을 통해 복잡한 그래픽스 엔진을 웹으로 포팅하여 성공적으로 운용하고 있으며, C++ 네이티브 API로 구동되는 웹 표준 컴포넌트를 개발하여 사용자들이 손쉽게 이용할 수 있는 가볍고 빠른 Lottie 애니메이션 플레이어를 제공하고 있습니다. WASM은 트렌디하며 굉장히 중요한 기술입니다. 본 세션에서는 WASM이 기존 웹 개발의 영역에서 어떠한 부분을 대체하고 개선할 수...
웹 개발 프로그래밍 언어