제목 : What is Soccer (W.I.S)
What is Soccer는 월드컵 경기 전 축구를 모르는 사람들도
이 사이트를 통해 축구의 역사, 다양한 정보들을 얻어, 같이 즐길 수 있게 만들고 싶은 목적으로 만든 사이트입니다.
당시 코딩을 배우고 처음 해보는 프로젝트였기에 많은 부담이 있었지만, 팀원들과 좋은 분위기와 그에 따른 결과물을 얻어 저로서 애정이 깊은 프로젝트입니다.
사이트
사이트 바로가기
코드
깃허브 코드 바로가기
정보설계
먼저 팀이 구성되고 사이트 제작 목표의 틀이 생겼을 때
정보를 설계한 도면입니다.
이와 같은 계획이 정립되었을 때, 역할을 나누어
하는 일을 나누었습니다.
역할분담
저희 팀은 총 세명으로
조장인 제가 판단하여 개인 실력차와 작업속도의 비례하여
정확하고 공정하게 역할을 분담하여 나누었습니다.
여기에서 저의 역할은 기능의 총괄 및 화면구현, 그리고 발표 자료 제작 및 발표를 맡았습니다.
발표자료 보러가기
제작환경
- 화면구성과 기능구현
( html5, scss, javascript, jquery, json )
화면구성과 기능 구현은 당시 배우고 있었던 기술들로만 사용하였으며, css의 경우 scss를 팀플 시작 전 독학한 뒤 팀원들에게 사용법을 익혀 제작하였습니다.
- 디자인
( photoshop, illustrator )
디자인은 교육 과정에 없었지만, 전공이 디자인과인 팀원에게 도움을 받아 포토샵과 일러스트를 배우고 프로젝트에 적용시켰습니다.
디자인
디자인을 구상할 때, 사이트 특성상 설명하는 글이 많은 페이지다 보니 심플하면서 임팩트 있는 디자인으로 의견을 수립하였습니다.
디자인 컨셉을 정한 뒤 먼저 한 일은 메인 컬러와 서브 컬러를 정한 뒤 심플하면서도 심심하지 않게 레이아웃을 만들었습니다.
오프닝에 타이포그래피와 축구공이 튀기는 애니메이션, 그리고 축구장 모양을 한 레이아웃을 보여줌으로써
처음 접속하는 유저들에게 해당 사이트가 축구 정체성을 가진 사이트라는 것을 역동적으로 각인시키기 위해 디자인했습니다.
메인페이지
서브페이지
디자인자료 보러가기
기능
- 오프닝 페이지
-
타이포그래피로 해당 사이트 소개
-
서로 다른 글자가 합쳐지면서 만들어진 사이트 로고의 설명을 시각화
- 메인페이지
-
메인페이지를 비롯한 모든 페이지에 스크롤을 편리하게 해주는 swiper slide 라는 라이브러리를 교육과정에서 배운 뒤 네비게이션바와 슬라이드를 적용시켰습니다.
-
서브로고에는 다음 월드컵까지 남은 일수가 기록되어 있습니다.
작성일 기준 23/04/06
- 자동 이미지 슬라이드 구현
- 팝업메뉴
-
페이지이동
-
공이 이동하며 벽에 닿을 시 방향 전환하는 애니메이션
- 서브메뉴(HISTORY)
- Date 함수를 이용하여 월드컵 남은 일자 초단위 카운트.
- 서브메뉴(What Is Soccer)
- 탭 메뉴로 포지션의 종류와 축구의 룰 등을 설명 출력
- 포지션 선택 시 포지션별 선수 위치 시각화
- 하단 슬라이드 마크 클릭 시 해당 구단 페이지로 이동
- 서브메뉴(Player)
- json으로 선수 정보와 관련 사진 받아오기
- 슬라이드 포커싱에 맞게 선수 정보받아 오기
트러블 슈팅
오프닝페이지
오프닝 페이지를 index 페이지로 할당하면서, 사이트 접속 시 먼저 보이게 해놓았지만,
새로고침이나 페이지전환으로 리로드나 렌더링이 일어나면 오프닝을 다시 봐야 하는 문제가 발생했습니다.
이러한 문제는 HTML문서 파일을 둘로 나누어
<meta http-equiv="refresh" content="5.5; url=./main.html">이와 같은 코드를 작성하여 최초 index 접속 후 오프닝을 시간인 5.5s 뒤 별도의 메인 페이지로 이동시켜 오프닝을 중복으로 볼 수 없게 해놓았습니다.
팝업메뉴 공이 움직이는 애니메이션
브라우저 크기 별 공이 움직일 수 있는 영역이 다르기 때문에 공이 최초 선언된 브라우저 사이즈에서 창을 줄이면 공이 바깥으로 나가버리는 현상이 발생했습니다.
하지만 구글링을 통해 지정 영역의 사이즈 변경시 함수를 재 할당시켜주는 "resize"라는 자바스크립트 함수를 알게되어 적용시킨 뒤 반응형 작업도 마쳤습니다.
프로젝트 후기
프로젝트 제작 당시엔 모르는 것도 정말 많고 하고 싶은 것도 많았기에
걱정과 더 좋은 결과물을 내야 한다는 욕심이 공존한 채로 정신없이 제작했던 것 같습니다.
이 프로젝트를 제작한 지 벌써 3개월이 지났습니다.
당시엔 보이지 않던 것들이 눈에 보입니다.
완벽할거라 생각했던 사이트의 부족한 점이 지금에서야 보이기 시작합니다.
지금 제작 중인 사이트들도 시간이 지난 뒤엔 더 많은 부족한 점이 보일 것 같습니다.
하지만 이 사이트는 기승전결을 보여주는 좋은 지표라고 생각되어 이 상태 그대로 멈추어 주었으면 좋겠다는 생각입니다.
코드를 되짚어보며 나의 안 좋은 버릇들과 발전 가능성을 찾았습니다.
더욱 더 발전하는 개발자가 되야겠다는 생각을 굳건하게 다짐합니다.
감사합니다.
후기 제작 23/04/07
* 팀원들과는 아직도 친하게 지내는 중입니다.
