배포한 사이트 주소 : 대한민국 구석구석 리뉴얼
1. 팀 프로젝트 소개
대한민국 구석구석이라는 웹 사이트의 리뉴얼을 진행했다. 현재 이 웹 사이트는 리뉴얼 돼있는 상태이고, 이전 버전의 웹 사이트를 우리 조는 리뉴얼 하기로 결정했다.
아래 사진은 이 웹 사이트가 리뉴얼되기 전 우리 조가 리뉴얼하기로 결정했던 웹 사이트 형식이다.
2. 왜 선정했나?
자바스크립트 숙련도를 올린다.
불편한 UX를 개선한다.
2-1. 팀적 의견
- 여행 관련 웹 사이트라 다룰 컨텐츠가 많다.
2-2. 개인적인 의견
- Tour API를 통해 자바스크립트로 하는 데이터 처리를 경험해본다.
- 다양한 기능을 만들어보면서 자바스크립트의 숙련도를 늘린다.
- 페이지별 컨텐츠를 페이지 카테고리에 맞게 정렬한다.
3번 내용에 대해 다시 언급하면, 예를 들어 "지역"이라는 카테고리에는 지역에 대한 내용만 있어야 했는데 코스, 테마, 관광 상품 등등 카테고리에 맞지 않은 정보가 불필요하게 작성돼있었다.
3. 내가 맡은 역할
조장, 여행 코스 카테고리
3-1. 조장으로서의 역할
1) 리뉴얼 방향성 정하기
내가 지적한 사항으로는 아까 언급했듯이 각 카테고리 별 컨텐츠들이 서로 뒤섞여 있어서 카테고리로 나눈 의미가 없었다.
따라서 각 카테고리 별 컨텐츠는 해당 카테고리에 맞게만 보여지도록 사이트맵을 다시 짰다.
또한 디자인적으로 웹 사이트를 파란색 계열의 단순한 레이아웃으로 구성하고 싶었기 때문에 비슷한 정부 관련 여행 웹 사이트에서 우리가 원하는 성격의 레이아웃을 찾아내봤다.
참고한 웹 사이트 : 경기 관광
이후 이 웹 사이트의 디자인을 모방하여 리뉴얼을 진행했다.
2) CSS 컨벤션 정하기
CSS 방법론을 찾아보던 중 3가지 패턴을 발견했다.
- OOCSS (Object Oridented CSS)
객체 지향을 추구하는 CSS 설계 방식이다. CSS 레이아웃을 담당하는 클래스 선택자와, 내부 컨텐츠를 배치하는 클래스 선택자를 분리하는 것이다.
이에 따라 동일한 내용이나 레이아웃의 경우 재사용할 수 있도록 설계된다.
하지만 해당 방법론은 다음과 같은 이유로 반려됐다.
- 디자인을 보면서 공통된 CSS 속성을 골라서 따로 정리해야 하므로 난이도가 높다.
- 제대로 설계되지 않을 시 수정사항이 발생하면 다른 CSS 코드도 전부 수정해야 한다. (CSS 숙련도 문제)
- 해당 태그가 어떤 역할을 하는지 파악하기 힘들다.
- BEM (Block Element Modifier)
출처 : BEM 공식 문서
말 그대로 Block, Element, Modifier로 나누어 클래스명을 분리하는 방법이다. Block은 레이아웃, Element는 내부 컨텐츠 배치, Modifier는 상태에 따른 클래스 변동 사항을 의미한다.
결론적으로 우리 조는 이 방법론을 채택했다. 근거는 아래와 같다.
- 마크업 구조 파악 및 클래스 작성 시 난이도가 상대적으로 쉽다
- 프로젝트 기간이 충분하지 않기 때문에 CSS 구조 설계에 시간을 덜 들이고 바로 코드를 짤 수 있다. (이 부분은 이후에 후회했다. 실력이 늘지 않기 때문..)
- 클래스명이 길어지지만 레이아웃 구조 상 HTML 태그의 중첩이 많지 않아보여 (3중첩 이하) 가독성을 크게 해치지 않다.
3-2. 코스 파트
- Tour API를 통한 여행 코스 검색 기능
- 깃헙에 저장한 json 파일을 통한 여행자가 직접짠 코스 필터 기능
- 지도 API를 활용한 상세 여행 코스 동선 보여주기
- 메인 페이지 슬라이더
각 기능에 대해 내가 조사한 자료, 코드에 대한 내용은 추가로 게시물을 작성하여 정리하겠다.
4. 프로젝트를 통해 내가 배운 것
- DOM 조작을 통한 HTML 태그, 클래스 선택자 삽입, 혹은 삭제
- API 활용 경험
- git, github 활용 경험
- CSS 애니메이션 활용 경험
5. 미흡했던 점
- jQuery 활용 경험 없음
팀원들은 모두 제이쿼리를 사용했지만 나는 바닐라 자바스크립트 자체가 처음이라 하나하나 공부해가면서 바닐라로 코드를 짰다.
다시 생각하면 이 때 제이쿼리도 같이 활용해봤으면 어떨까 싶지만 당장은 React, Vue를 배워야 하므로 제이쿼리는 후순위로 밀린 상태이다..
- git, github 이해도 부족
팀원이 merge를 하다가 실수로 다른 팀원들의 파일이 최신화된 코드가 아니라 이전 버전에 있던 파일로 병합이 되는 이슈가 있었다.
깃헙을 한 번도 써본 적이 없어서 처음엔 파일이 깨진 줄 알았지만 로그를 추적해보니 다른 팀원이 merge 하는 과정에서 되돌아 간 것을 확인할 수 있었다.
하지만 근본적인 해결책을 알아내지는 못 했으며 이전 버전의 코드들을 다시 작성하여 push 하는 식으로 해결했다.
애초에 깃헙에 대한 지식이 있지 않아서 발생한 문제이므로 추후에 깃헙에 대해 공부하면서 부족했던 개념을 채울 예정이다.
- 의사소통 간 문제점
우리 조는 리뉴얼 디자인에 대해 토의할 때 토의를 거친 후 텍스트로 정리했는데, 아무리 텍스트로 상세히 정리한다고 해도 머리 속에 있는 내용이랑 텍스트를 보고 팀원들이 이해하는 내용이 다를 수도 있어, 기존에 합의했던 디자인 레이아웃과 다른 결과물이 나왔다.
이후 디자인 관련 사항은 무조건 그려서 보여주는 것으로 합의를 하고 진행했다.
