놀러와요! 모현의 숲 테스트 해보기 (서버 비용 문제로 배포 중단)
"놀러와요! 모현의 숲"은 "멋쟁이 사자처럼" 동아리에서 했던 미니 프로젝트로 한국외대 글로벌캠퍼스의 특색을 살린 동물 테스트입니다.
기획 배경
- 한국외대 글로벌캠퍼스는 산으로 둘러싸인 곳으로 다양한 동물들이 출연하는데서 고안되었다.
- 글캠생들의 정체성 확립과 캠퍼스 홍보 효과를 위해 기획되었다.
기획 내용
- “나라", “직업", “동물"의 3가지 요소를 사용해 새로운 동물 캐릭터를 생성
- “국가"는 글캠의 다양성을, “직업"은 학과의 종류를, “동물"은 캠퍼스 자연환경을 상징
- 테스트 결과는 “(나라)에서 온 (직업)하는 (동물)” 형식으로 표기
- 각종 SNS를 통해 공유 기능 추가 + CTA로 메타버스 플랫폼으로 초대
나의 회고
나는 이번 프로젝트에서 프론트엔드를 맡았다. 아직 HTML, CSS, JavaScript 밖에 못해서 3가지 언어로 프로젝트를 진행했다. 그래도 이번 프로젝트를 하면서 JavaScript를 더 잘 사용할 수 있게 되었다. 또, 이 프로젝트는 모바일 퍼스트, 반응형으로 구현되었다.
처음 이 프로젝트를 시작할 때에만 해도 이렇게까지 힘들 줄은 몰랐다. 일주일 넘게 밤을 새는 것은 물론이고 이동하는 차 안에서도 코딩하는 아주 진귀한(?) 경험도 했다.
아니, 생각해보니 처음부터 난관의 연속이었다.
프로젝트 기획단계부터 기획했다가 엎어지고, 다시 기획하면 또 엎어지고를 반복했다. 기획이 끝난 후 프로젝트에 필요한 디스크립션도 80개를 썼다가 모두 다시 써야하는 불상사가 생기기도 했다.
코딩하는 과정은 뭐…🙄 문제 해결의 연속이었다. (원래 그런 맛에 코딩하지만?) 여러 크고 작은 문제들이 있었는데 제일 중요하고 기억하고 싶은 문제들만 추려보겠다.
1. CSS만 사용해서 아이콘과 함께 움직이는 진행바 만들기
첫번째로 진행바였다. 진행바는 html, css만으로 충분히 구현할 수 있지만 아이콘과 함께 움직여야 할 때는 이야기가 다르다. 구글링 해보니 다른분들은 제이쿼리를 사용하거나 자바스크립트로 페이지가 넘어갈 때 같이 움직이게끔 만드셨다. 하지만 나는 css만을 사용하여 구현했다. 프로그레스바에서 진행부분을 나타내주는 div 태그가 페이지가 넘어갈 때마다 움직이므로 이 부분을 활용했다. 일단 아이콘을 진행부분 맨끝 위치로 옮겨주고 페이지가 넘어갈때마다 진행부분이 옮겨진만큼 아이콘도 오른쪽으로 옮기게 해주었다. 그랬더니 프로그레스바가 동적으로 움직이는 것처럼 보여졌다.
'CSS만 사용해서 아이콘과 함께 움직이는 진행바 만들기' 포스트 보기
2. 로딩화면
두번째로는 로딩화면이다. 테스트를 모두 마치고 결과화면으로 넘어가는 로딩화면에서 그림들이 빠르게 바뀌도록 구현하기로 했다.
3. 공유하기 버튼
다 구현했더니 이번에는 ‘카카오톡으로 공유하기’가 말썽이였다. 또 구글링 해보니 나랑 같은 문제를 겪는 분들이 많으셨다. 답은 라이브서버로 돌리면 안된다.
위의 3가지 문제들은 추후에 포스팅을 할 예정이다.
.
.
.
나는 프론트엔드지만 이번 프로젝트를 통해 백엔드에 관련된 지식들도 습득할 수 있었다. 파이썬으로 매번 자료구조, 알고리즘만 짰는데 처음으로 가상환경을 돌려보았다.
이번 프로젝트에서 가장 좋았던 점은 내가 멋사를 통해 꼭 얻어가고 싶었던 다른 개발자들과의 협업을 경험해 볼 수 있다는 것이었다. 협업할 때 github를 이용했기 때문에 다른 때보다 commit message를 조금 더 명확하고 자세하게 쓰게 되었다. 내가 로컬에서 쓴 코드를 push하고 pull request하고 다른 개발자가 쓴 코드를 pull 해오는 등 git에 대한 지식도 얻어갈 수 있었다.
심지어 이번 프로젝트에서는 디자이너도 함께 했기 때문에 디자이너와의 협업도 경험해 볼 수 있었다. 디자이너와 개발자 사이의 괴리감을 느꼈지만 디자이너님이 전체적인 디자인을 굉장히 꼼꼼하게 봐주시고, 동물들도 너무 귀엽게 그려주셔서 프로젝트의 퀄리티가 매우 좋아졌다.
기획단계에서도 내가 얻어갈 것이 정말 많았다. 기획자님이 기획에 관한 실무 경험이 많으셔서 기획서를 쓰는 방법부터, 특히 사소한 것까지 메모하는 좋은 습관을 배울 수 있었다.
이번 프로젝트를 하면서 몸은 힘들었지만 기획했던 프로젝트를 완성해서 너무 뿌듯하고, 다양한 분야에서 배워갈 수 있는 것이 많아서 행복했던 경험이었다. 그리고 다 같이 밤을 샌 팀원들과 전우애가 생긴 것 같다. 💪
마지막으로 우리가 처음 프로젝트를 기획했을 때 목표 사용자가 100명이었는데 며칠 만에 목표 사용자 수를 돌파했다! 학교 사람들 기준으로만 카운트 되었기 때문에 실사용자수는 더 많을 것으로 예측된다.
