frontend6 [Frontend] 작은 조각부터 쌓는 컴포넌트 설계 — Atomic Design과 UI 라이브러리를 안 쓴 이유 이 글은 디자인 토큰 위에 컴포넌트를 어떻게 체계적으로 쌓았는지, 그리고 잘 만들어진 UI 라이브러리들을 두고도 직접 컴포넌트를 만들기로 한 이유를 정리한 것입니다. 1인 개발이나 소규모 팀에서 컴포넌트 구조가 점점 뒤죽박죽이 되는 게 고민이거나, UI 라이브러리를 쓸지 직접 만들지 저울질하고 있다면 참고가 될 만한 내용입니다.함께 보면 좋은 글: 이 글은 디자인 시스템 2부작의 2편입니다. 1편에서는 색·간격·폰트를 토큰으로 묶어 일관성을 만드는 방법을 다뤘습니다. 토큰이 "값의 일관성"이라면, 이번 글은 "구조의 일관성"입니다.토큰만으로는 부족했다1편에서 색과 간격, 폰트를 토큰으로 묶고 나니 화면 사이의 시각적 어긋남은 크게 줄었습니다. 그런데 화면이 늘어나면서 다른 종류의 혼란이 찾아왔습니다. 같.. 2026. 6. 26. [Frontend] 디자인 감각이 없어도 일관된 UI 만들기 — 디자인 토큰으로 시스템에 맡기기 이 글은 디자인 감각이 부족한 개발자가, 색상·간격·폰트를 "토큰"으로 묶어서 화면마다 들쭉날쭉하던 UI를 일관되게 만든 과정을 정리한 것입니다. 별도 라이브러리 없이 객체 파일 몇 개로 시작할 수 있는 방법이라, 1인 개발이나 소규모 프로젝트에서 디자이너 없이 UI 일관성을 유지하고 싶을 때 바로 적용할 수 있습니다.함께 보면 좋은 글: 이 글은 디자인 시스템 2부작의 1편입니다. 2편에서는 이 토큰 위에 컴포넌트를 쌓는 Atomic Design 구조와, UI 라이브러리를 쓰지 않고 직접 만든 이유를 다룹니다.나는 디자인 감각이 없다솔직히 고백하면, 저는 디자인 감각이 없습니다. 색을 고르라면 한참 헤매고, 버튼 여백이 16이 맞는지 20이 맞는지를 매번 새로 고민합니다. 그런데 1인 개발이라 옆에서 .. 2026. 6. 25. [React] 지도 운영기: 마커가 육지에 찍히는 문제와 좌표 50개 보정 (다크→라이트·워터마크 제거) 📌 이 글의 핵심 요약핵심 내용: 화면 뒤의 현실 문제 ─ 스팟 마커가 바다가 아닌 육지에 찍히던 문제를 좌표 50개 보정으로 해결한 과정주요 포인트: 마을 중심·내륙 좌표 오차 진단, 교차 검증으로 해안선 보정, 다크→라이트 전환, 워터마크 제거기대 효과: 마커가 실제 해변 위에 정확히 표시되는, 신뢰할 수 있는 지도적용 시점: 외부 좌표 데이터로 POI를 찍는 모든 지도 서비스📚 시리즈 구성이 글은 Whale-Log 지도 기능 구현 시리즈의 3편(마지막)입니다.1편: Supercluster로 마커 클러스터링하기2편: 지도 UX 디테일 5선3편: 지도 운영기 ─ 좌표 보정·테마·워터마크 (현재 글)들어가며: 예쁜 지도의 함정1·2편으로 묶이고, 누르고 싶고, 한눈에 들어오는 지도를 만들었습니다. 그.. 2026. 6. 15. [React] 지도를 '쓰고 싶게' 만드는 UX 디테일 5가지 (바텀시트·flyTo·펄스 애니메이션) 📌 이 글의 핵심 요약핵심 내용: 기능만 있던 지도에 "쓰고 싶은 감성"을 입히는 5가지 UX 디테일주요 포인트: 바텀 시트, 지역 퀵 이동(flyTo), 색상 범례, 고점수 펄스 애니메이션, fitBounds 자동 줌기대 효과: 정보를 누르고 싶고, 좋은 스팟이 한눈에 들어오고, 첫 화면부터 답답하지 않은 지도적용 시점: 1편(클러스터링)으로 마커 표시가 끝난 뒤, 실사용 단계📚 시리즈 구성이 글은 Whale-Log 지도 기능 구현 시리즈의 2편입니다.1편: Supercluster로 마커 클러스터링하기2편: 지도 UX 디테일 5선 (현재 글)3편: 지도 운영기 (스팟 좌표 50개 보정 · 다크→라이트 전환 · 워터마크 제거)들어가며: 기능은 됐다, 이제 '감성'이다1편에서 마커가 수백 개여도 끊김 .. 2026. 6. 14. [React] 지도에 마커 수백 개를? Supercluster로 클러스터링하기 (react-map-gl 실전) 📌 이 글의 핵심 요약핵심 내용: 지도에 100개 넘는 마커를 그냥 찍으면 생기는 문제를 Supercluster 클러스터링으로 해결하는 실전 가이드주요 포인트: MapLibre + OpenFreeMap 무료 조합, useSpotClusters 커스텀 훅, 클러스터 클릭 시 자동 줌인기대 효과: 마커가 수백 개여도 끊김 없이 부드러운 지도, 줌 레벨에 따라 자동으로 묶이고 풀리는 UX적용 시점: 지도 위에 다수의 POI(스팟·매장·숙소 등)를 표시해야 하는 모든 프로젝트📚 시리즈 구성이 글은 Whale-Log 지도 기능 구현 시리즈의 1편입니다.1편: Supercluster로 마커 클러스터링하기 (현재 글)2편: 지도 UX 디테일 5선 (바텀시트 · flyTo 퀵이동 · 색상 범례 · 펄스 애니메이션 .. 2026. 6. 14. [React] JWT 인증 상태 관리 및 자동 로그인 구현 (Axios Interceptor + React Native 환경) 📌 이 글의 핵심 요약핵심 내용: React 환경에서 JWT를 안전하게 저장하고, Axios 인터셉터로 자동 로그인을 구현하는 실전 가이드주요 포인트: 토큰 저장 위치 선정, 401 응답 시 자동 재발급, React Native 특수 고려사항기대 효과: 사용자 경험을 해치지 않으면서도 XSS·탈취에 강한 인증 클라이언트 구축적용 시점: 백엔드 JWT 시스템 구축 완료 후 프론트 연동 단계📚 시리즈 구성이 글은 NestJS 기반 자체 JWT 인증 시스템 구축 시리즈의 4편입니다.1편: Firebase Auth 제거 및 아키텍처 전환 이유2편: NestJS JWT 인증 구현 방법 (Global Guard + bcrypt 실전 가이드)3편: JWT Access Token vs Refresh Token 설계.. 2026. 5. 25. 이전 1 다음
