오토피디아

RSS

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

All Frontend Backend AI DevOps Architecture Etc

Frontend
Google은 Lighthouse를 사용하지 않는다
이 글은 Google Search Console에서 실제 사용자 데이터를 확인하는 방법을 설명합니다. 저자는 코어 웹 바이탈 LCP 개선 프로젝트를 진행했지만, 검색 엔진 최적화(SEO)에 직접적인 영향을 주지 못해 보류하게 된 경험을 공유합니다. 핵심은 Google이 Lighthouse와 같은 실험실 데이터가 아닌, 실제 사용자 경험을 측정하는 CrUX(Core Web Vitals) API를 통해 페이지 경험 데이터를 수집한다는 점입니다. 글에서는 CrUX API를 사용하여 필드 데이터를 가져오는 방법과 공식 데이터셋을 찾는 방법을 안내하며, Google Search Console의 페이지 경험 데이터가 왜 즉각적으로 변화하지 않는지에 대한 이해를 돕습니다. 웹 성능 개선 및 SEO를 위한 실질적인 데이터 접근 방법을 제시합니다.
LighthouseCrUX APICore Web Vitals
오토피디아·2023년 7월 11일
Frontend
사내 디자인 시스템 적용 실패기 Part 1
이 글은 사내 디자인 시스템 적용 과정에서의 실패 경험을 공유하는 Part 1으로, 설계 및 디자인 측면에 초점을 맞춘 회고입니다. 디자인 시스템의 정의, 장단점을 간략히 소개하며 시작합니다. 이후 디자인 저장소 설계 능력 부족, 플랫폼별 상이한 Styling 원칙에 대한 오해, 관리하기 어려운 컴포넌트 선언, Nomenclature의 중요성 간과, 외부 환경에 구애받는 확장성 부족 등 구체적인 실패 사례들을 Typography, SelectControl, Icon, Button 컴포넌트를 예시로 들어 상세히 분석합니다. 이 글은 디자인 시스템 구축 및 적용 시 흔히 겪을 수 있는 문제점들을 되짚어보며, 성공적인 디자인 시스템 도입을 위한 인사이트를 제공하고자 합니다.
디자인 시스템UI 컴포넌트디자인 회고
오토피디아·2023년 7월 7일
Frontend
네이티브 지식없이 ChatGPT로 react-native-cookies 패키지 Android 버그 해결하기
네이티브 개발 지식이 부족한 프론트엔드 개발자가 ChatGPT를 활용하여 React Native 환경에서 WebView 컴포넌트의 자동 로그인 기능을 구현하는 과정을 다룹니다. 특히 `react-native-cookies` 패키지의 Android 버그를 ChatGPT의 도움으로 해결한 경험을 공유하며, AI를 활용한 개발 생산성 향상 가능성을 보여줍니다. 글에서는 문제 해결 과정, ChatGPT를 활용한 새로운 해결책 모색 방법, 그리고 유용한 크롬 익스텐션 소개를 통해 개발 스코프 확장에 대한 인사이트를 제공합니다.
ChatGPTReact NativeWebView
오토피디아·2023년 6월 28일
Frontend
코어 웹 바이탈 LCP 개선을 통한 검색 엔진 최적화(SEO) Part 1: Google Search Console, Next.js
이 글은 오토피디아 프론트엔드 개발자가 첫 프로젝트로 진행한 SEO 개선을 위한 모바일 버전 LCP(Largest Contentful Paint) 향상 과정을 다룹니다. 자연 검색 유입 증대를 목표로, Google Search Console과 Lighthouse를 활용하여 LCP 지표를 모니터링하고 개선하는 방법을 단계별로 설명합니다. 또한, Vercel Analytics를 통해 필드 데이터를 확인하고 구글에서 집계하는 데이터를 추적하는 과정도 포함됩니다. 주요 개선 기법으로는 이미지 최적화, JS 번들 최적화, 폰트 최적화 등이 언급되며, 신입 개발자의 시선으로 프로젝트 경험을 공유하여 비슷한 고민을 가진 개발자들에게 실질적인 도움을 제공하고자 합니다.
LCPCore Web VitalsSEO
오토피디아·2023년 4월 28일
Frontend
코어 웹 바이탈 LCP 개선을 통한 검색 엔진 최적화(SEO) Part 1: Google Search Console, Next.js
이 글은 월간 20만 명 이상의 자연 유입 사용자를 확보하고 유지하기 위한 SEO 개선 프로젝트의 일환으로, 모바일 버전의 LCP(Largest Contentful Paint) 성능 향상 과정을 다룹니다. 필자는 신입 프론트엔드 개발자로서 입사 후 첫 프로젝트로 LCP 개선을 맡아 3주간 집중적으로 진행한 경험을 공유합니다. 구글에서 측정하는 코어 웹 바이탈 지표 중 하나인 LCP를 어떻게 효율적으로 개선할 수 있는지에 대한 고민을 가진 개발자들에게 실질적인 도움을 주는 것을 목표로 합니다. 글은 프로젝트 온보딩, SEO의 필요성, 정량적 개선 지표 설정, 그리고 구글 개발팀이 제시하는 LCP 개선 방법 등을 시간 순서대로 상세하게 설명합니다.
LCPCore Web VitalsSEO
오토피디아·2023년 4월 27일
Frontend
Streamlit으로 정비소 탐색 지도 만들기
본 글은 Streamlit을 활용하여 정비소 탐색 지도 애플리케이션을 개발하는 과정을 상세히 설명합니다. Streamlit이 단순 프로토타이핑 도구를 넘어 실제 서비스 개발에도 활용될 수 있음을 보여줍니다. 글에서는 정비소 데이터베이스 구축, Elasticsearch를 이용한 거리 검색 기능 구현, Streamlit-aggrid를 활용한 데이터프레임 표시, 그리고 최종적으로 정비소를 지도에 시각화하는 과정을 다룹니다. 개발 과정에서의 레이아웃 구성, 완성된 지도 시연, 그리고 사용 후기, 효과, 보완점까지 포함하여 Streamlit의 가능성과 실용성을 탐구합니다.
StreamlitPython데이터 시각화
오토피디아·2023년 1월 31일