마트철수
[TIL_8] KB 부트캠프: 카카오개발자 API 지도 불러오기(Vue, JAVA) 본문
안녕하세요,
KB IT's Your Life의 마지막 프로젝트!
현재 프론트엔드 개발에 들어갔습니다.
Vue.js를 사용해서 프론트엔드를 만들어 나가고 있습니다.
그리고 부트스트랩로 꾸며나가고 있는 상태..!
(KB 국민은행 주관 IT's Your Life)
초기에 어떻게 개발을 기획했는지,
그리고 제가 맡은 지도 부분을 어떻게 구현하고 있는지 설명해보겠습니다.
작업 정리 및 관리 도구
1. 노션
노션을 통해 프로젝트 전반에 대한 계획과 자료들을 체계적으로 정리하고 있습니다. 개발 일정, 각종 메모 및 아이디어를 저장하며 팀원들과의 협업에 활용하고 있습니다.
2. 구글 드라이브
구글 드라이브를 통해 개발 일지를 관리하며, 일별로 진행된 작업 사항과 성과를 기록하고 있습니다. 이는 주기적인 회의에서 참고 자료로 사용되고, 추후 프로젝트 리뷰에도 활용하려고 합니다.
3. 슬랙
슬랙을 통해 팀원들과의 소통을 진행하고 있으며, 실시간 업데이트 및 피드백을 빠르게 주고받고 있습니다. 프로젝트 관련 정보와 자료도 채널을 통해 공유하고 있습니다.
카카오API를 활용해 지도 불러오기
▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼
카카오 API를 활용한 지도맵 불러오기
저는 지도맵을 불러오는 역할을 맡았습니다!
카카오 API를 활용하여 웹사이트에 지도맵을 불러왔는데요,
어떻게 활용했는지 자세히 작성해보겠습니다.
많은 웹사이트나 앱에서 카카오 지도를 사용하는 걸 보셨을 텐데요,
생각보다 간단하게 적용할 수 있습니다.
초보자인 저도 성공했으니,
이 포스팅을 본다면 따라할 수 있도록 차근차근 설명해 드리겠습니다.
먼저, 카카오 API란 무엇이고, 왜 사용하는지 간단히 짚고 넘어갈게요!
1. 카카오 API란?
카카오 API는 카카오 플랫폼에서 제공하는 다양한 기능을 사용할 수 있는 도구입니다.
그중에서도 많이 사용하는 것이 지도 API입니다. 카카오 지도 API를 활용하면 웹사이트나 애플리케이션에 인터랙티브한 지도 기능을 쉽게 추가할 수 있습니다.
저는 검색한 위치를 지도에 표시하거나, 특정 위치에 마커(핀)를 추가하였습니다!
2. 카카오 지도 API 사용 준비
먼저, 카카오 API를 사용하기 위해서는 카카오 디벨로퍼스웹사이트에서 API Key를 발급받아야 합니다.
이 과정이 가장 중요한 단계입니다.
2-1. 카카오 개발자 계정 생성 및 로그인
1. 카카오 디벨로퍼스 웹사이트에 접속합니다.
2. 카카오 계정이 없으시다면 먼저 회원가입을 하고, 로그인을 합니다.
2-2. 애플리케이션 생성
1. 로그인 후, 우측 상단의 내 애플리케이션 버튼을 클릭합니다.
2. 새 애플리케이션 추가를 클릭하고, 프로젝트에 대한 기본 정보를 입력합니다. 애플리케이션 이름과 플랫폼 정보를 입력한 후 생성 버튼을 누르면 됩니다.
어플리케이션은 현재 자신이 제작하고 있는 것을 표현하는 이름으로 짓기!
2-3. JavaScript 키 발급받기
1. 애플리케이션이 생성되면, 앱 키 항목에서 JavaScript 키를 확인할 수 있습니다. 이 키는 나중에 카카오 지도를 불러올 때 사용할 것이니 복사해둡니다.
3. HTML에 지도 API 적용하기
이제 본격적으로 지도를 웹사이트에 적용하는 방법을 알아볼까요?
매우 간단한 HTML 코드만으로도 카카오 지도를 불러올 수 있습니다.
카카오개발자에는 다양한 코드를 제공해주고 있습니다.
만약 필요한 기능이 있다면, 해당 기능들을 검색해서 바로 볼 수 있다는 사실!
구글링이 필요없을정도로 상세합니다.
3-1. 기본 HTML 코드 작성 !!
HTML 문서를 먼저 만들어야 합니다.
제가 카카오 개발자 탭에서 참고하여 작성해둔 기본 예제입니다!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>카카오 지도 불러오기</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=YOUR_API_KEY"></script>
</head>
<body>
<h2>카카오 지도 불러오기 예제</h2>
<div id="map" style="width:100%;height:350px;"></div>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.5665, 126.9780), // 지도의 중심좌표 (서울 중심)
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
</script>
</body>
</html>
• YOUR_API_KEY: 여기에 이전 단계에서 발급받은 JavaScript 키를 넣으시면 됩니다.
• mapContainer: 지도를 표시할 HTML 요소(div)입니다. 크기를 설정할 수 있습니다.
• center: 지도의 중심 좌표입니다. 위 예제에서는 서울의 좌표(37.5665, 126.9780)를 설정했습니다.
• level: 지도 확대 레벨입니다. 숫자가 작을수록 더 확대된 지도가 보입니다.
위 과정만 따라하면, 카카오맵을 자신의 앱에서 보여줄 수 있습니다.
크게 어렵지 않지만 .. 딱 완성한 순간 성취감이 아주 컸답니다.
참고 포스팅:
※ 위 사진 출처는 모두 카카오(KAKAO)입니다.
📒TIL을 마무리하며..
위 내용은 팀원들과 논의를 했던 내용입니다.
추가로 프로젝트 진행 중 현직에 계신 멘토님의 조언을 얻을 수 있는 기회를 가졌습니다.
매주 토요일마다 특강 형식으로 멘토님을 직접 만나,
저희 아이디어가 너무 비현실적이지 않은지,
어떤 개선점이 필요한지를 중간중간 체크할 수 있었습니다.
특히 좋았던 점은 비전공자임에도 전공자 친구들과 함께
새로운 인사이트를 얻을 수 있었다는 것과,
풀스택으로 직접 개발에 도전할 수 있었다는 점입니다.
제가 맡은 지도 부분은 주로 사용자가 금융 정보를 시각적으로
쉽게 접근할 수 있도록 구현하고 있습니다.
구체적으로는 다양한 은행 지점 및 환율 정보를 제공하고,
이를 지도 위에 표시하여 사용자들이 손쉽게 주변의 금융 서비스를
탐색할 수 있도록 설계하고 있습니다.
지도 API와 연동하여 지점 위치를 표시하고,
사용자 맞춤형 금융 정보를 제공하는 방식으로 개발을 진행 중입니다.
앞으로 더 열심히 해보겠습니다 흐흐
'KB IT's Your Life > KB 기자단' 카테고리의 다른 글
| [TIL_10] KB 풀스택 부트캠프 최종 수상? 발표 자료 꿀팁까지! (8) | 2024.10.20 |
|---|---|
| [TIL_9] KB 부트캠프: 챗GPT API 완전 쉽게 연결하기 (챗봇) (3) | 2024.10.01 |
| [TIL_7] KB 부트캠프: 비전공자가 개발 프로젝트 시작 (5) | 2024.09.15 |
| [TIL_6] KB 부트캠프: CRUD 게시판 만들기 ?! (1) | 2024.09.08 |
| [TIL_5] KB 부트캠프: Spring과 Vue로 연동하기 (6) | 2024.09.01 |
