프로젝트를 시작하면서 부산관광정보사이트를 만들기로 했다. 원래 서울 관광 사이트를 만들 계획이었지만, 팀원 중에 부산 정보가 빠삭한 토박이 분이 계셔서 부산으로 정했다.
1. 사이트 계획
사이트 이름은 <Let's Go Busan>의 줄임말인 'LEBU'로 정했다. 대표 색상은 시원한 느낌을 주는 푸른색(#30A2FF)으로 정했다.
1. 레이아웃
레이아웃을 작성하기 앞서 어떤 페이지가 필요한지 정하기로 했다. 주어진 프로젝트 기간이 일주일 조금 넘는 기간이었기 때문에, 무리하게 페이지를 늘리기보다 필요한 페이지만 정해서 만들기로 했다.
우리에게 필요한 페이지는 사람들을 처음 맞이하는 '메인페이지'와 관광지에 대한 정보가 담긴 '관광지페이지', 관광지 주변 음식점의 정보가 담긴 '식당페이지' 정도로 정리했다.
제작할 페이지를 정하고, 페이지에 어떤 요소들을 넣을지 정리했다.
- 메인페이지 : 시간, 부산 날씨, 테마별 관광지 및 식당 정보가 담긴 슬라이드보드
- 관광지 페이지 : 관광지의 이미지가 담긴 슬라이드보드, 관광지 정보, 관광지 안내
- 식당 페이지 : 관광지 별 식당 정보, 식당 정보를 자세히 보여주기 위한 모달 창
레이아웃은 간단하게 필요한 요소들의 위치만 정하면 된다고 생각해서 figma 같은 어플리케이션은 이용하지 않기로 했다.
하지만 나중에 다른 팀들의 결과물을 보니 figma로 제작한 레이아웃이 훨씬 보기 깔끔했다. 다음 프로젝트에서는 이용해봐야겠다고 생각했다.
2. 관광지 선정
데이터베이스 없이 진행되는 프로젝트였기 때문에 부산지역에 있는 모든 관광지와 식당을 대상으로 하기보다는, 유명한 관광지 5개를 선정해 페이지를 만들기로 했다.
선정한 관광지는 아래와 같다.
- 광안리
- 청사포(해변열차)
- 다대포
- 감천문화마을
- 송도해상케이블카
3. 프레임워크 및 라이브러리
개발을 시작하기에 앞서 프레임워크 및 라이브러리를 어떻게 활용할지 이야기했다. 팀원들 대부분 웹 프로젝트 경험이 없었고, 이제 막 CSS와 JavaScript를 배우고 있는 단계였기 때문에 외부 라이브러리나 프레임워크를 이용하는 대신, 직접 CSS, JavaScript를 통해 웹사이트 디자인과 기능을 개발하면 실력향상에 도움이 될거라고 생각해 이용하지 않으면 좋을 것 같다고 이야기했다.
다행히 팀원들도 의견에 동의해줘서 프레임워크와 라이브러리를 최소한으로 사용하기로하고 프로젝트를 진행하게 되었다.
2. 사이트 제작
1. Header, Footer
프로젝트가 시작되면서 내가 가장 먼저 맡은 역할은 모든 페이지에 동일하게 들어가는 header와 footer를 만드는 일이었다.
하나의 페이지를 만드는 경우에는, 그 페이지에 태그를 입력하고, 스타일을 입히고, 기능을 만든다. 그리고 수정이 필요하면 페이지를 수정하면 그만이다.
하지만 모든 페이지에 들어가는 header와 footer를 각각의 페이지에 직접 입력하게되면, 조금의 수정사항이라도 생길 경우, 각각의 페이지를 모두 수정해줘야만 했다.
<-- 메인페이지 -->
<header>
<div>logo</div>
<div>login</div>
</header>
<main>
.
.
.
</main>
<-- 로그인페이지 -->
<header>
<div>logo</div>
<div>login</div>
</header>
<form>
.
.
.
</form>페이지가 적으면 문제 없겠지만, 페이지가 많아지면 일일이 수정해 주기 어려웠다.
그래서 한번의 수정으로 모든 페이지에 있는 header와 footer를 수정해줄 수 있는 방법이 필요로 했고, 제이쿼리에 포함되어있는 load함수를 이용하기로 했다.
load함수는 다른 html, php, ejs등의 파일 안에있는 내용을 현재 페이지로 불러올 수 있게 해준다.
즉 header와 footer의 내용이 담긴 html파일을 만들고, 각각의 페이지에서 load함수를 이용해 header.html, footer.html 안에 담긴 내용을 불러와주면 된다는 말이다.
이렇게하면 header와 footer를 수정할 때 header.html, footer.html 파일만 수정하면 되기 때문에, 간단해진다.
<header id="header"></header>
<footer id="footer"></footer>
<script>
$(document).ready(function () {
$("#header").load("header.html", function () {
});
$("#footer").load("footer.html", function () {
});
})
</script>
header 안에는 사이트의 로고와 관광지, 식당의 정보가 담겨있는 사이트로 이동되는 a태그, 한국어, 중국어, 영어 번역을 제공하기 위한 버튼으로 구성하였다.
또한 select, option 태그의 경우 원하는대로 디자인하기 어려웠기 때문에, Language 버튼을 눌렀을 때 언어를 선택할 수 있는 버튼이 나타나도록 하였다.
2. 기상청 오픈 API (날씨 정보)
사이트의 메인페이지에서 우리가 대상으로 삼고 있는 부산 지역의 날씨 정보를 제공하기로 하였다. 기상청에서 데이터를 받아오기 위해서는 공공데이터 포탈을 이용해야했다.
https://www.data.go.kr/
데이터를 이용하기 위해 포탈에 가입하고, 기상청_단기예보 서비스를 신청해 인증키를 발급받았다. 인증키를 발급받는데까지는 시간이 오래걸리지 않아서 무난하게 서비스를 이용할 수 있을 거라고 생각했다.
문제는 데이터를 받아오고 난 뒤에 생겼다.
데이터를 받아오긴 했는데, 데이터 포맷이 JSON방식으로 받아와졌다. 이 안에 기온, 풍향, 바람세기 등의 데이터들이 존재하는데, JSON을 이용해보지 않아서 어떻게 필요한 정보들을 빼내야할지 막막했다.
검색을 해본 결과 JSON.parse() 메서드를 이용하면 JSON 문자열을 자바스크립트 객체로 변환해준다고 한다.
console.log("LGT 낙뢰 : ", JSON.parse(this.responseText).response.body.items.item[0].fcstValue)
console.log("PTY 강수형태 (0없음, 1비, 2비/눈, 3눈, 5빗방울, 6빗방울눈날림, 7눈날림): ", JSON.parse(this.responseText).response.body.items.item[6].fcstValue)
console.log("RN1 1시간 강수량 mm : ", JSON.parse(this.responseText).response.body.items.item[12].fcstValue)
console.log("SKY 맑음(1), 구름많음(3), 흐림(4) : ", JSON.parse(this.responseText).response.body.items.item[18].fcstValue)
console.log("T1H 기온 : ", JSON.parse(this.responseText).response.body.items.item[24].fcstValue)
console.log("REH 습도 % : ", JSON.parse(this.responseText).response.body.items.item[30].fcstValue)
console.log("UUU 풍속(동서성분) m/s : ", JSON.parse(this.responseText).response.body.items.item[36].fcstValue)
console.log("VVV 풍속(남북성분) m/s : ", JSON.parse(this.responseText).response.body.items.item[42].fcstValue)
console.log("VEC 풍향 deg : ", JSON.parse(this.responseText).response.body.items.item[48].fcstValue)
console.log("WSD 풍속 m/s : ", JSON.parse(this.responseText).response.body.items.item[54].fcstValue)JSON 문자열을 자바스크립트 객체로 변환한 뒤, 우리에게 필요한 정보들을 각각 알맞는 인덱스로 접근해 불러올 수 있었다.
남은 작업은 불러온 데이터를 메인페이지에서 보여주는 일이었다. 날씨 아이콘을 다운로드하고, 조건문을 이용해 날씨에 맞는 아이콘이 출력되도록 했다. 결과는 아래와 같다.
3. Map태그
메인페이지에서 부산 지도를 보여주고, 지도에서 관광지의 위치를 클릭했을 때, 해당 관광지의 페이지로 이동시켜주면 좋겠다는 의견이 나왔다.
즉, 하나의 이미지에 하나의 링크가 아닌, 여러 개의 링크를 넣자는 의견이었다. 하나의 이미지에 여러 링크를 넣는 작업은 대학교 교양 수업 프로젝트에서 이미 만들어본 경험이 있었다.
바로 Map 태그를 이용하는 방법이었다.
Map 태그를 이용해 영역을 분할하는 건, 직접 코드를 짜기 보다 아래와 같이 이미지맵 태그를 쉽게 만들어 주는 사이트를 이용하면 편리했다.
https://www.image-map.net/
하지만 예상하지 못한 문제가 발생했다.
이번 프로젝트에서 우리는 사이트를 반응형으로 만들기로 했다. 이미지의 가로 길이를 픽셀로 고정해놓은 경우에는 문제가 없었지만, %나 vw 등으로 할 경우, 창을 줄였다 늘렸다 할 때마다 map태그로 분할한 영역은 변하지 않고, 그대로라는 점이었다.
해결방법은 의외로 간단했다. 코드 한 줄만 입력하면 됐다.
$('img[usemap]').rwdImageMaps();rwdImageMaps() 메서드는 반응형일 때 map태그의 좌표를 자동으로 수정해준다. 이 메서드를 태그 아래에 입력만 해주면, 반응형일 때도 걱정없이 map태그를 이용할 수 있게 되었다.
4. 배포
배포는 Netlify를 이용하기로 했다. 그동안 깃허브 develop branch에 올려놨던 코드들을 main branch로 옮기고, 깃허브와 Netlify를 연결했다.
Netlify에 깃허브 연결을 마치면, 프로젝트를 배포할 수 있는데, 어떤 branch를 사용할지 선택할 수 있다. 우리는 main branch에 있는 코드를 배포하기로 했다.
그렇게 배포한 사이트는 아래와 같다.
https://poetic-druid-deac2a.netlify.app/
5. 마무리
프론트엔드 프로젝트이다보니, 데이터베이스를 이용하지 않기로 하면서, HTML 파일에 검색을 통해 얻은 관광지의 정보를 입력해서 페이지를 만들었다. 하지만 이 방법보다 관광지의 정보를 제공하는 API를 찾아보고 이용했다면, 조금 더 사이트에서 많은 정보를 제공하고, 쉽게 페이지를 만들 수 있었을지 모른다고 생각했다. 다음에는 이런 API를 찾아보고 결정하기로 다짐했다.
다른 팀들의 결과물을 보면서, 우리도 외부 프레임워크나 라이브러리를 이용했으면 조금 더 깔끔하고 예쁜 사이트를 만들 수 있었을 거라고 생각하기도 했지만, 직접 슬라이드보드, 모달 창 등을 만들면서, 각각의 요소들이 어떻게 동작하는지 원리를 이해할 수 있는 기회가 되었다고 생각한다.
지금까지 Github를 통해 다른 사람과 함께 작업한 경험이 없었는데, 이번 팀 프로젝트를 하면서 어떻게 Github를 통해 협업하고 충돌이 발생했을 때 어떻게 대처하면 될지 배울 수 있는 기회가 된 것 같다.
