전체 글51 MapLibre GL JS와 Mapillary JS 라이브러리 특성 1. MapLibre GL JSmaplibre gl js ✔️ 핵심 개념지도 자체를 렌더링하는 엔진WebGL 기반 → 빠르고 부드러운 벡터 지도 표현✔️ 주요 특징벡터 타일 기반 지도지도 데이터를 타일 단위로 가져와 렌더링확대/축소 시 깨지지 않음스타일 커스텀마이징JSON 스타일로 지도 디자인 완전 제어ex) 도로 색상, 라벨, 건물 표시 등인터랙션 지원클릭, hover, zoom 이벤트 처리마커, 팝업, 레이어 제어 가능오픈소스 (Mapbox GL JS fork)상업적 제약 없이 사용 가능자체 타일 서버와 조합 가능✔️ 사용 예시import maplibregl from "maplibre-gl";const map = new maplibregl.Map({ container: "map", style: ".. 2026. 3. 24. mapillary-js와 maplibre-gl을 활용한 지도 UI 구축하기 지도 기반 서비스 구현을 위해 mapillary-js와 maplibre-gl을 활용한인터랙티브 지도 UI 설계를 진행하고 있습니다.실제 구현에 앞서, 요구 사항과 UI 구조, 그리고 전반적인 개발 방향을 정리해보려고 합니다.요구 사항 정리이번 기능에서 필요한 핵심 요구 사항은 다음과 같습니다.지도 위에 **링크(Line)**와 **아이콘 마커(POI)**를 표시백엔드에서 제공하는 벡터 타일 서버 사용지도 요소(링크/마커) 클릭 시→ 해당 객체의 상세 데이터 조회 및 표시기술 스택Next.js→ 프론트엔드 구조 구성maplibre-gl→ 벡터 타일 기반 지도 렌더링mapillary-js→ 스트리트 레벨 뷰 및 확장 가능성 고려UI 구조 설계1. LNB or Sidebar (이번에는 shadcn/ui를 사용.. 2026. 3. 17. requestAnimationFrame 사용 정리 프로젝트를 개발하다 보면 가끔 이런 코드가 등장합니다.requestAnimationFrame(() => { requestAnimationFrame(() => { setShowContent(true); });});또는requestAnimationFrame(() => { router.replace(url);});해당 코드는 UI 변경과 관련된 작업에서 많이 사용하고 있습니다.1. requestAnimationFrame이란?requestAnimationFrame은 브라우저가 다음 화면을 그리기 직전에 실행되는 함수입니다. 기본 사용법requestAnimationFrame(() => { // 다음 frame에서 실행될 코드});브라우저 렌더링 흐름을 단순화하면 다음과 같습니다.JavaScript 실.. 2026. 3. 17. UI/UX 사용성 분석과 휴리스틱 10원칙 프론트엔드 개발자에게 휴리스틱 10원칙은 디자인 가이드가 아니라 구현 품질 체크리스트에 가깝다.UI/UX 사용성 분석을 할 때 가장 기본이 되는 기준이 바로 닐슨(Nielsen)의 휴리스틱 10원칙이다.이 원칙은 “사용자가 서비스를 사용하면서 불편함을 느끼는 지점”을 빠르게 발견하기 위한 체크리스트에 가깝다. 휴리스틱 10원칙은 특정 디자인 트렌드나 기술에 종속되지 않기 때문에,웹·모바일·어드민·서비스 기획 등 다양한 환경에서 공통 기준으로 활용할 수 있다.왜 휴리스틱 10원칙을 사용하는가실제 사용자 테스트 전에 문제 가능성을 빠르게 점검할 수 있다정량 데이터가 없어도 논리적으로 개선 포인트를 설명할 수 있다디자이너·기획자·개발자 간 공통 언어로 쓰기 좋다휴리스틱 10원칙 요약시스템 상태를 사용자에게 항.. 2026. 1. 27. Next.js에서 DevTools 방지 로직 리팩토링 일반 사용자에게 개발자 도구 접근을 제한할 필요가 있어프론트엔드 단에서 DevTools 방지 로직을 구현했다.다만 초기 구현 방식이 모바일 환경에서 오작동하면서 리팩토링이 필요해졌다.이 글에서 다루는 내용은 보안이 아닌 UX 차원의 방지 로직입니다.기존 구현의 문제점초기 구현은 다음 방식에 의존했다. window.outerWidth / innerWidth 차이를 이용한 DevTools 감지console API override단축키 및 우클릭 차단이 방식은 모바일 브라우저에서 높은 오탐률을 보였다. 모바일에서는 주소창, 하단 바, 가상 키보드 등의 영향으로 viewport 크기가 수시로 변경되며 정상 상태에서도 DevTools가 열린 것으로 잘못 판단되는 문제가 발생했다.리팩토링 방향문제를 해결하기 위해 .. 2026. 1. 22. 검색 페이지 스크롤 위치 복원 UX 개선 현재 상황검색 페이지에서 특정 아이템을 클릭해 상세 페이지로 이동한 뒤브라우저의 뒤로가기 버튼을 누르면 보통 아래와 같은 문제가 발생합니다.검색 조건은 유지되지만 O스크롤 위치 초기화 X페이지 번호도 초기화 X목표이 문제를 해결하기 위해 다음 목표를 설정검색 조건(필터)이 같다면페이지 번호를 기억하고스크롤 위치까지 복원뒤로가기 / 새로고침 상황에서도 자연스럽게 동작이를 통해 사용자가 중단했던 지점부터 다시 탐색할 수 있도록 합니다.1️⃣ sessionStorage를 활용한 상태 보존localStrorage ❌ → 너무 오래 남음sessionStorage ✅ → 탭 단위 유지, UX에 적합const SCROLL_POSITION_KEY_PREFIX = "search_scroll_position_";const.. 2026. 1. 21. 이전 1 2 3 4 ··· 9 다음
