📢 프로젝트 소개
- 프로젝트 인원 : 3명 (전원 HTML,CSS만 사용)
- 프로젝트: 철가방 속 물건 맞추기 게임 시뮬레이션
- 깃허브링크
나의 역할
- 메인 페이지 구현
- GitHub Pages로 정적호스팅하기
프로젝트 과정
기획
이번 프로젝트의 주제는 HTML과 CSS만을 사용해서 "All or Nothing, 진-짜 쓸모 있거나 1도 쓰잘데기 없거나" 웹사이트 만들기였다. HTML과 CSS에 익숙해지기 위해 편한 주제로 주신것같다. 더욱 부담없이 임할수 있었던 이유
처음 아이디어를 정하는데 시간을 꽤 쏟았다. 약 30분정도 쓴것같은데 나온 의견들은 두더지잡기게임 , 수업지각생들 랜덤 벌칙 고르는 게임, 무궁화 꽃이 피었습니다등등 여러 재밌는 의견들이 많이 나와서 결정하느라 힘들었다. 난 철가방 속 물건 맞추는 게임을 하면 재밌을 것 같다는 의견을 냈고, 팀원들이 반응을 잘 해줘서 기분이 좋았다. 여기에 개발자들이 사용하는 언어나, 프레임워크 IDE등의 로고를 사용해서 퀴즈는 내자는 의견이 나와 방향이 결정됐다.
HTML과 CSS만을 사용하는 프로젝트다보니 협업을 어떻게 해야할지 갈피를 잡지 못했는데, 가장 큰 이유는 중복되는 코드들이 많았다. 예를들면, 배경이미지라던가 철가방 이미지같은 부분들을 서로 어떻게 표준화할지가 고민이였는데. 결국 한 사람이 공통부분을 만들어 커밋하고 여기서 분기해서 작업하기로 결정했다.
이후에 한 페이지씩 맡아 개발했고. 난 메인 페이지 귀인인 채연님은 게임페이지를 담당했다. 마지막으로 팀의 첫째 소연님은 결과페이지를 담당했다. 이후에 게임 설명페이지를 소연님이 추가했는데. 어쩌다보니 내가 제일 한게 없는것 같아 미안한 기분이 들었다.
설계
우리 프로젝트는 미니 프로젝트이기 때문에 디자인을 제외하곤 크게 설계에 집중하진않았다. 단순히 재밌게 구현해보고 결과물에 집중하자고 자연스레 합의된 느낌이랄까.. 난 디자인이 처음이였기에 피그마를 어떻게 사용하는지 조차 몰랐는데 두 팀원은 이미 자르고 붙이고 내 눈엔 무슨 디자인 장인처럼 보였던 기억이 난다. 아무튼 내가 디자인과정에서 참여하진 않았다. 내가 필요없을정도로 이미 훌륭한 디자인이 나와서 소연님이 이거 어때요 하는 의견에 좋습니다만 연신 대답했다 ㅋㅋ 근데 진짜 좋아서 끄덕임
또 폰트와 BGM에 심혈을 기울였는데 ㅋㅋㅋ 둘 다 중국풍이나 동양풍을 살리는것이 키포인트였다. 난 BGM을 퇴실후 밤 12시까지 찾았다.. 그 중 맘에 들었던것은 예전에 귀혼이라는 게임이 있다. 내가 이 게임을 많이 하지도 않았는데 신기하게도 머리속에 귀혼이 스쳐갔다. 그래서 귀혼 BGM을 들어보는데 청음평야라는 스테이지의 BGM이 정말 찰떡이였고 이거 외에도 다른 후보들을 들고 다음 날 팀원들과 같이 들어보는데 사람 귀는 다 똑같은듯
폰트는 윤독립체라는 폰트를 사용했는데. 우린 중국집 폰트를 찾고있었는데 독립체에 중국집을 빗대긴 죄송하지만, 붓글씨? 같은 느낌이 딱 우리 프로젝트에 찰떡이였다. 이 모든 과정이 너무 진심으로 즐거웠다.
그리고 내 담당인 첫 화면과 게임페이지에선 철가방뚜껑이 내려오는 효과가 필요했다. 난 이게 js없이 가능한지 몰랐는데 css에 애니메이션이라는 기능이 있어서 이걸로 할 수 있다고 해서 여기저기 뒤져서 구현해냈다. 생각보다 안 어려워서 놀랐고. 잘 동작해서 뿌듯했다
그 외
라이트하우스를 이용해 웹사이트 성능을 측정했다.
개선 전 측정사진
개선 후 측정사진
개선 사항
- 메타 태그 설정
- 검색 엔진 최적화 성능 향상을 위해 메타 태그를 넣어주었어요.
<meta name="description" content="IT 개발자들을 위한 재미있는 퀴즈 게임 띵호와"/> <meta name="keywords" content="IT, 개발, 게임, 퀴즈, 철가방, 띵호와" />
- 이미지 webp로 이미지 포맷 최적화
- 이미지 및 폰트 preload 설정
<link rel="preload" href="./img/bagTop.webp" as="image" type="image/webp" /> <link rel="preload" href="./data/css.webp" as="image" type="image/webp" />
느낀점 및 배운점
새로운 도전은 늘 새롭다~
프로젝트를 하면서 가장 크게 느낀건 html,css만으로도 협업과 만족스러운 결과를 냈다는것이다. 이게 왜 가장 크지 싶을 수 있는데 난 개발자라면 정의한 문제를 기술에 관계없이 수행하는것이 역량이라고 생각을 해왔는데 실제로 그런적이 없는것같다. 대부분 안해본 영역에는 경계심을 가지고 시도도 안 해보고 늘 안정적인 영역에서 해결을 하고자했다. 이번엔 아예 새로운 영역에서 내가 원하는 결과물을 냈다는게 너무나 신기했고 간단하지만서도 신선한 인사이트를 받았다.
협업에서의 팀의 분위기
나는 팀 분위기에 정말 큰 만족을 느꼈다. 왜냐하면, 난 지금껏 협업을 할 때 막내이거나 아예 리더이거나 극과 극이였다. 심지어 IPP과정에서도 막내 비슷한 포지션이었기에 심적인 부담이 있었다. 막내입장에선 늘 따라가기 바빴고, 리더입장에선 내가 늘 앞장서서 리드해야한다는 부담이 있었는데 이번 프로젝트에선 그런 포지션이 서로에게 존재하지 않기도 했고, 팀 분위기가 너무 편안해서 개발과정내내 즐거웠다. 지금이야 가벼운 주제이지만 더욱 어려운 비즈니스로직이 주어질때도 긍정을 유지하고 편안함을 유지할 수 있는 능력을 갖고싶다고 생각했다.
아쉬운 점
- 우리 프로젝트는 2차프로젝트로 js를 도입하는 프로세스이다. 하지만, 우리가 1차 프로젝트에 구현한 아이디어와 설계는 사실 자바스크립트를 사용해서 디벨롭하는 과정에서 적용되는 부분이 적어 기술적인 고민할 부분이 조금은 부족할 수 있겠다라는 걱정이 들었다.
- HTML,CSS는 사실 개발자의 기본인데 코로나 시기에 수강했던 과목인지라 사실상 거의 생소했다. 그래서, 진행 과정에서 나도 모르게 소극적인 태도로 임했던 것 같아 아쉽다.
