dev-hpk 님의 블로그

[맛길] 접근성, SEO 개선

사이트 배포 후 lighthouse를 이용해 접근성, SEO를 체크했습니다.분명 접근성과 SEO를 고려하면서 작업했다고 생각했는데 결과가 92점이네요. 낮은 점수는 아니지만 완성도 높은 서비스를 만들기 위해 개선 작업을 해보겠습니다.접근성 개선위 사진은 접근성 테스트에서 통과하지 못한 요소들입니다. 차례대로 하나씩 살펴보면서 수정해 보겠습니다. 1️⃣ 텍스트 & 배경색 명암비텍스트 색과 배경 색의 대비는 저시력자나 고령자도 인식할 수 있도록  4.5:1 이상이어야 한다고 합니다.기존 버튼의 경우 배경색이 #059669, 텍스트가 #FFFFFF로 3.7:1입니다. 명암비 접근성 테스트 사이트를 이용해 접근성을 준수하도록 수정했습니다. 2️⃣ 버튼 터치 영역 수정버튼의 크기를 W3C에서 권장하는 터치 영역 ..

[맛길] 안드로이드(AOS) 위치 정보(Geolocation API) 지연 문제 해결

사이트 배포 후 모바일 디바이스(AOS, IOS)에서 아래 브라우저들을 통해 길 찾기 기능을 테스트했습니다.Chrome (IOS, AOS)Naver 앱 (IOS, AOS)카카오 인 앱 브라우저 (IOS, AOS)Firefox (IOS, AOS)Edge (IOS, AOS)Opera (IOS, AOS)safari (IOS)삼성 인터넷(AOS)IOS에서는 길 찾기가 정상적으로 동작하는 반면, AOS( Android OS)의 경우 경로를 받기까지 매우 오래 걸리는 문제가 발생했습니다. 테스트에 사용한 기종이 오래된 갤럭시 S10이라는 의심이 들어, 가장 최신 기종인 갤럭시 s25로도 테스트해봤지만 결과는 같았습니다. 혹시 서버에서 응답이 늦게 오는건 아닐까 하는 생각에 Vercel의 로그도 확인해 봤지만, 실행..

현재 Naver Map API를 이용해 맛집 가게의 지도를 불러오고 마커를 찍는 기능까지 구현했습니다. 지인들에게 테스트와 피드백을 부탁했습니다. 모바일 디바이스에서 터치로 화면을 움직일 때 지도가 움직여서 불편하다.맛길 서비스 내에 지도에서 길 찾기 기능을 사용할 수 있으면 좋을 것 같다.첫 번째 피드백을 토대로 테스트 해보니 모바일 디바이스에서 지도 영역의 인터랙션 때문에 화면을 스크롤하기가 불편했습니다. 이 부분은 사용자 입장에서 부정적인 경험이라고 생각해 인터랙션 옵션을 제거하는 방법으로 수정했습니다. 두 번째 피드백인 길찾기 기능입니다.사용자 입장에서 생각해보니 맛길 서비스에서 맛집의 위치를 찾아도 별도의 길 찾기 서비스를 이용해야 한다는 점에서 번거로울 것 같습니다. 이런 불편함을 제거하고 사..

오늘은 맛집 상세 페이지에 지도를 추가해 보겠습니다. 지도는 Naver Map API를 이용해 볼 계획입니다. 0️⃣ Naver Map API 선택 이유Naver Map API v3 특징  프레임워크에 의존하지 않고 독립적으로 동작하기 때문에 불필요한 의존성을 최소화할 수 있고,  React & Next.js로 제작된 맛길 프로젝트에 적합할 것 같아 선택했습니다. DOM 처리 및 웹 브라우저 호환 코드를 내장하고 있어 크로스 브라우징 이슈를 최소화하면서 손쉽게 지도 기능을 구현할 수 있을 거라 생각해 선택했습니다.별도의 CSS를 필요로 하지 않도록 설계된 내용을 보고, 개발 부담을 줄일 수 있을 것 같아서 선택했습니다. 모바일 환경에서도 최적화된 성능을 제공하기 때문에 별도의 최적화 작업이 필요하지 않아..

오늘은 상세 페이지를 작업할 건데요.처음 기획 당시 페이지 상단에 맛집 소개 Youtube 영상을 띄우기로 했었네요.. 어떤 방법이 있는지 찾아볼게요👀✨ 영상 추가 방법1️⃣ 기본 태그 이용  유튜브 영상에 자체적으로 퍼가기 기능을 제공하고 있네요😀 iframe의 src를 보니 프로젝트에서 사용하는 데이터의 videoId를 embed/ 뒤에 추가하면 될 것 같아요. 2️⃣ react-youtube 라이브러리 및 Youtube API 사용 사용법을 보니 videoId 부분에 Youtube API에서 요청을 통해 받아온 videoId를 넣어주면 되는 것 같아요. 원래라면 Youtube API를 연동해서 아래와 같은 과정을 거치겠죠🤔  서버에서 Youtube로 API key를 포함한 데이터 요청 유튜브..

🚨 문제 상황프로젝트를 진행하면서 Youtube 채널을 추가하면서 점점 불편함을 느끼게 되었어요. 위의 이미지처럼 채널이 추가될 때마다 /app 폴더 하위에 폴더가 점점 늘어나 구조가 너무 복잡해지게 되더라고요😭 왜 채널(라우트 페이지)마다 폴더를 만드는지 궁금하실 수 있겠네요🤔Next.js가 파일 시스템 기반의 라우터를 사용하여 폴더를 경로 정의에 사용하기 때문이에요. 위 예시를 보시면 /app 폴더 하위의 폴더 이름이 경로로 사용되고 있어요. /{channel}/page.tsximport axios from '@/app/lib/instance';import ListContainer from '@/app/components/lists/ListContainer';async function page(..

지난번에 Youtube Data API를 사용해 열심히 JSON 데이터를 만들었습니다. 처음 사용해 보는 API다 보니 공식문서를 여러 번 읽는 것도 힘들었지만, 이제 빛을 볼 시간입니다. 프로젝트에 JSON 데이터를 추가하고 사용해 볼게요. 맛길 프로젝트의 기획 포스팅을 보지 않으셨다면, 왜 프로젝트에 JSON 데이터를 일일이 추가하는지 의문이 드실 수 있겠네요😅이번 프로젝트는 CRUD나 로그인 기능을 제외했기 때문에 firebase나 supabase  같은 실시간 DB 서버를 사용하는 것은 조금 과한 것 같아요. 그래서 저는 Next.js에서 지원하는 API Routes를 사용해 볼 겁니다. API Routes는 Next.js에서 Serverless API Endpoint를 만들 수 있게 해주는 기..

기획 단계에서 Serverless Function을 이용해 유튜브 영상과 상세 내용을 관리하기로 했습니다!흠.. 영상 정보를 어떻게 저장할까요? 직접 JSON 파일에 작성하기에는 양이 너무 많아 비효율적일 것 같습니다.구글링을 통해 크롤링과  Youtube Data API를 알게 되었습니다. 크롤링이 더 간단한 것 같지만, 프론트엔드 개발자라면 API를 사용하는 게 당연하겠죠!사실 크롤링이 유튜브 정책 위반이라는 내용도 있고, 크롤링 관련 재판 사례들이 있는 것 같아서 선택한 것도 없진 않습니다😅  Youtube Data API 탐색기를 통해서 query에 "먹을텐데"를 검색하니 아래와 같은 결과가 나왔네요. 재생목록의 영상을 가져오려면 아래  2단계를 거쳐야해요.1️⃣ 재생목록 API에 GET 메서드..

🌈 사이드 프로젝트 시작 계기팀 프로젝트를 진행하면서 소통과 협업의 기술을 배울 수 있어 프론트앤드 개발자로서 한 걸음 더 가까워진 것 같아요.그런데 프로젝트 후반으로 갈 수록 저를 포함한 팀원들의 체력과 의욕이 떨어져 기능을 하나씩 빼게 되었습니다. 추가 기능을 구현하고 싶은 제 입장에서는 프로젝트에 대해 만족을 못하고 있는 느낌이 들었어요😂 제가 원하는대로 만들 수 있는 사이드 프로젝트를 한 번 해보면 팀원과의 협업의 소중함도 느끼고 문제 상황도 혼자 해결해 보면서 성장할 것 같아요. 그래서 개인 사이드 프로젝트를 시작하기로 결심했습니다!🤔 사이드 프로젝트 주제 선정막상 프로젝트를 시작하려고 하니 주제 선정부터 쉽지 않았어요..😂일상생활을 하면서 많은 사람들이 느꼈던 불편 또는 이런 것이 있으..