기술적 고민과 도전

저는 최근 지도 위에 캔버스에서 그림을 그릴 수 있는 기능을 구현하는 프로젝트를 진행했습니다.이 과정에서 가장 큰 고민은 줌인/줌아웃과 이동(팬)을 했을 때, 지도와 캔버스가 함께 움직이며, 그린 그림이 좌표에 따라 올바르게 유지되도록 만드는 방법이었습니다.고민 끝에

지도를 렌더링하는 웹 애플리케이션에서 마우스 이벤트를 활용해 자연스러운 드래그 이동과 줌 인/줌 아웃을 구현하는 것이 목표였습니다.사용자 경험(UX)을 높이기 위해 다양한 마우스 동작을 정확하고 자연스럽게 처리하는 데 중점을 두었는데,아래는 구현 과정에서의 시도와 문제

지도 상호작용을 구현하면서, 처음에는 마우스 이벤트를 활용해 지도 이동과 확대/축소를 구현했습니다.하지만 모바일 환경을 지원하기 위해 터치 이벤트를 추가해야 했습니다. 터치 이벤트는 마우스 이벤트와 기본적으로 비슷하지만, 일부 동작과 처리 방식이 달랐습니다. 예상했던

모바일에서 지도 기반 서비스를 구현하면서 사용자가 지도를 자유롭게 확대, 축소, 이동할 수 있도록 하는 것은 가장 중요한 기능입니다.하지만 모바일 환경에서는 지도를 다루는 도중에 화면 자체가 확대/축소되거나, 위아래로 스크롤하면서 브라우저가 새로고침되는 등의 문제가 발

안녕하세요, 이번 포스팅에서는 최근 구현했던 웹소켓(WebSocket) 기반의 실시간 통신에 대한 경험을 공유해보려 합니다.특히 Guest와 Host라는 두 가지 역할로 나뉘는 클라이언트 간 소켓 통신을 설계하고 구현하면서 겪은 어려움과 해결 과정을 담아보았습니다.이

이번 포스팅에서는 HTML Canvas를 사용하여 지도 위에 실시간 위치와 방향을 표시하는 방법에 대해 공유하려고 합니다.예를 들어, 지도 위에 사용자 또는 객체의 위치와 그 방향을 나타낼 수 있는 방법을 구현해봤습니다.이 과정에서 중요한 점은 위치 표시뿐만 아니라 방

저희 프로젝트 특성상 처음 접속하는 사용자가 사용법을 익히기에 어려움이 있을 것이라 판단했고, 온보딩 페이지가 필수적으로 들어가야겠다고 생각하게 되었습니다....... 하지만 시간이 너무 없었기 때문에..... 가장 간단하게 (하지만 라이브러리를 사용하진 않고.....

최근 진행한 프로젝트에서 모바일에서 위치 정보뿐만 아니라 사용자의 방향(heading) 정보를 실시간으로 가져오는 기능을 구현했습니다.하지만 사용자의 위치와 방향 정보를 가져오는 기능을 구현하면서 예상치 못한 문제를 마주했습니다.데스크탑에서는 강제로 알파 값을 변경하며