[2026-05-13] JSP 동적 웹 페이지 구현과 카카오맵 API(Geocoder) 실전 연동

오늘은 그동안 단편적으로 학습해 온 자바 백엔드 로직(JDBC, DAO/VO)과 프론트엔드 화면(HTML/CSS)을 하나로 결합하는 JSP(JavaServer Pages)의 진수를 경험했다. 맛집 리스트를 페이징하여 출력하고, 특정 맛집 클릭 시 DB에 저장된 주소를 기반으로 동적 지도를 렌더링하는 풀스택(Full-stack) 웹 애플리케이션의 핵심 워크플로우를 완성했다.

 

1. DAO/VO 아키텍처와 서버 사이드 페이징 최적화

• 데이터 캡슐화 (FoodVO): 오라클 테이블 스키마에 맞춰 맛집 번호(fno), 이름, 평점, 주소, 이미지 경로 등 10여 개의 속성을 묶어내는 Value Object를 설계했다.
• 페이징 쿼리 (FoodDAO): 전체 데이터를 한 번에 가져오면 서버 메모리와 네트워크에 치명적인 부하를 준다. 오라클 12c 문법인 OFFSET ? ROWS FETCH NEXT 12 ROWS ONLY를 활용하여, 한 페이지당 정확히 12개의 레코드만 잘라서 가져오는 효율적인 페이징 로직을 구현했다. 총 페이지 수 역시 CEIL(COUNT(*)/12.0) 쿼리로 DB 단에서 연산하여 가져오도록 최적화했다.

2. JSP 스크립틀릿과 Bootstrap을 활용한 동적 그리드 렌더링

• 데이터 수신 (list.jsp): 클라이언트가 URL을 통해 넘긴 페이지 번호를 request.getParameter("page")로 수신했다. 처음 접속해 파라미터가 null인 경우 "1"페이지로 강제 매핑하는 방어 코드를 작성한 뒤, DAO를 호출해 List<FoodVO> 객체를 메모리에 적재했다.
• 블록 페이징 알고리즘: 단순히 [이전/다음]을 넘어, 1~10페이지 묶음으로 이동하는 하단 페이징 네비게이션을 위해 수학적 연산(startPage, endPage)을 도입했다.
• UI 렌더링: 순수 HTML 대신 Bootstrap 3 프레임워크의 col-md-3 그리드 시스템과 thumbnail 클래스를 적용해 1줄에 4개씩 카드가 배치되는 반응형 UI를 구축했다. 특히, CSS의 text-overflow: ellipsis와 white-space: nowrap 속성을 활용해 맛집 이름이 너무 길 경우 텍스트를 말줄임표(...)로 깔끔하게 자르는 프론트엔드 디테일을 챙겼다.

3. Query String 기반의 화면 이동과 상세 정보 출력

• 목록 화면(list.jsp)에서 특정 맛집 이미지를 클릭하면 <a href="detail.jsp?fno=<%=vo.getFno()%>"> 태그를 통해 맛집의 고유 식별자(PK)인 fno를 Query String 방식으로 상세 페이지에 전달했다.
• detail.jsp는 이 번호를 받아 dao.foodDetailData(fno)를 호출해 단 1건의 데이터를 가져오고, HTML <table> 구조의 rowspan과 colspan을 적절히 혼합하여 맛집 포스터, 평점, 테마, 영업시간 등을 직관적인 UI로 뿌려주는 화면 간 데이터 흐름을 완성했다.

4. 외부 오픈 API 연동: 카카오맵 Geocoder 시스템 가장 인상 깊었던 핵심 비즈니스 로직이다. 웹 서비스의 가치를 높이기 위해 외부 데이터를 내 시스템으로 끌어오는 API 연동을 실습했다.

• 카카오 개발자 센터에서 AppKey를 발급받아 자바스크립트 라이브러리를 로드했다.
• 동적 좌표 변환: 단순히 고정된 지도를 띄우는 것이 아니라, 자바스크립트 코드 내부에 <%=vo.getAddress() %>라는 JSP 출력식을 삽입했다. DB에서 가져온 실제 텍스트 주소를 카카오맵의 Geocoder 객체(addressSearch 메서드)로 던져준 것이다.
• API 서버가 이 텍스트 주소를 내부적으로 분석해 위도/경도(LatLng) 좌표로 반환해주고, 결과값을 콜백 함수에서 받아 해당 좌표 위치에 마커(Marker)와 가게 이름이 적힌 인포윈도우(InfoWindow)를 동적으로 렌더링하는 완벽한 위치 기반 서비스 연동을 체득했다.