왜?? 프로젝트?
html과 css를복습하며 자바스크립트와 알고리즘 리액트를 동시진행하며 어지럽게 보내고있는 나는 무언가 정리를하고싶은마음에 html과 css를 다시 공부하게되는데....
무언가 다시 읽어보는게 재미없어져버린 나는 한가지 재밌는생각이 떠오른다.
어차피 html 과 css연습겸 홈페이지 따라만들기할꺼면 한번 홈페이지를 따라만들어본후 비슷한계열에 사이트들을 참고한후 내가봣을때 개선점을 추가해 최고의 레이아웃을만드는 경험을해보면 재밋지않을까?? 하는생각이들었다.
계획
먼저 그래서 유튜브페이지등 클론코딩을 하나진행해 내실을다진후 한번 페이지를 디자인해보고자한다.
그래서 어떤 종류의 사이트를만들꺼냐? 아마 비교분석이쉽고 비교적?? 사이트가 개선점이 많을수있는 마이너한 게임강의 사이트를 한번 건들여볼까한다.
나는 롤강의 사이트를 선택했고 맨날 광고에뜨는 OGT (오지티) 사이트와 유튜브로 즐겨보던 테스터훈에 장인월드사이트 그리고 온라인강의사이트나 다름없기떄문에 웹개발 강의관련사이트인 패스트캠퍼스까지 세가지 비교해 한번 야무진 사이트를 설계해볼까한다.
사이트비교
1. 패스트캠퍼스(https://fastcampus.co.kr/)
2. 오지티(OGT)(https://ogt.gg/)
3. 장인월드(로그인해야페이지가나옴)
비교사항들
- 사이트길이
사실 별중요하지않다고 생각할수있긴한데 패스트캠퍼스 사이트를보다보니 사이트길이가진짜 어마어마하게 길어 스크롤을 매우내려야하더라 근데 보통 스크롤을 많이내리는사이트는 최상단으로가기(?) 맨위로 가게해주는 버튼이있는데 여긴없어서 위로올라가기가 너무힘들었다. 요런긴사이트만들떄는 꼭 위로가기 버튼을만들어주자
잡설은 그만하고 패스터캠퍼스가 오지티,장인월드에비해 굉장히길었다. 그러면 사이트가 한페이지에 다들어오는것과 스크롤을내리면 컨텐츠가 계속나오게하는것 사이트를 처음제작했을떄 의도가뭘까해서 한번 다른사이트도 좀뒤적여봤다.
유튜브 인스타그램 페이스북등 우리가 주로사용하는 어플리케이션 사이트들은 사용자가 스크롤을 내리면 끊임없이 게시물이나 영상등이 나오는데 이는 내 숙면을 매우방해하는요소지만 사이트나 어플입장에서보면 참 잘만들었다.. 알고리즘에의해 계속추천해주고 비슷한걸보게하고 영상마다광고 사람이좋아하는 부분을체크한다음 계속비슷한관심사의주제를 던져주니 이거 어떻게참냐고...
사실 목적성이 확실한 사이트는 사이트가 굳이 길필요는없는것같다.
그러면 강의사이트는 어떻게해야되냐??
강의사이트는 따지고보면 누구보다 목적성이확실한 사이트같다. 어떤강의를들을건지 정도는 고민하고 강의를 검색하기떄문이다. 예를들어 내가 프론트엔드 과정을 진행하면서 자바스크립트가 너무어려워 그러면 자바스크립트강의 이런식으로검색하지 그외 next.js 파이썬이런 언어들은 잇던말던 알빠노긴하다.
강의사이트의 핵심
강의사이트를만들려면 핵심은 카테고리별분류 그리고 전체적인 커리큘럼제공인것같다.
예를들어 내가 자바스크립트를 수강하려고했는데 그옆에 html+Css 자바스크립트를 듣기전에 수강해보세요~ 라던가 react 자바스크립트기반으로 쉽게웹개발을? 이런식으로 스텝별로 양옆에 관련강의를 놓는다면 사실 구매할가능성이높아질것같다.
(이거는 유튜브 알고리즘마냥 알고리즘이 진짜 중요한것같긴하다.)
그렇다면 내가 게임강의 사이트를 제작하려면 가장중요한건 카테고리별분류 그리고 비슷한유형이나 같이들으면 좋은것들에 대한 추천 전체적인 커리큘럼 제공일것같다.
- 목적에따라 조금씩 갈리는 디테일
사실 패스트캠퍼스는 정말 여러종류의 강의를모아놓은 플랫폼이라 자료양이방대해 상대적으로 사이트가 길수밖에없긴하다.그래서 11번가같은 모든걸파는 온라인쇼핑몰이 무신사나 이런 옷만파는사이트보다 사이트 규모가 클수밖에없는것이고 근데 게임강의는 사실 자료양이 많지는않기때문에 이 적은자료를 얼마나 효율적으로 잘배치하냐가 포인트인것같다.
(근데 아마존은 왜 사이트가 간단하냐..?? 그냥 궁금해져서 찾아본 아마존이 성공한이유https://brunch.co.kr/@uxuxlove/149)
그러면 나는 사이트설계를 어떻게할까?
- 카테고리별 분류
- 추천항목
- 커리큘럼제공
요 세가지를 포인트로두고 디자인해볼꺼다.
어떤방향성을가지고 사이트제작에 접근했는지 어떤생각에의해 레이아웃을 디자인할건지 간단하게 기록해봤다.
