MOA Webtoon Project: 웹툰모아 프로젝트

개발동기

---

웹툰 모아 (Webtoon MOA) 는 대표적인 웹툰 플랫폼 3사 네이버, 카카오페이지, 카카오웹툰(구 다음웹툰)의 웹툰들을 한 페이지에서 찾아 볼 수 있도록 만든 서비스이다.
웹툰 플랫폼의 다양화 및 컨텐츠 수가 증가함에 따라 사용자는 양질의 콘텐츠를 더 많이 이용할 수 있게 되었다. 하지만 원하는 웹툰을 보기 위해서는 여러 사이트를 방문해야 하는 불편함이 존재한다. 우리는 이러한 불편함을 해소하고자 대표적인 웹툰 플랫폼의 컨텐츠를 집약해 사용자의 편의성을 개선하는 서비스를 개발하였다.

역할

• 백엔드
  기능 구현 및 크롤링 등

• 프론트
  페이지 화면 제작 및 데이터 불러오기 등

• 나의 역할
  헤더, 푸터, 검색창, 로그인, 회원가입, 아이디 찾기, 비밀번호 찾기 등의 페이지 제작 (퍼블리싱)

주요 기능

---

• 다양한 방식으로 웹툰 리스트 보여주기
  여러가지 방식으로 웹툰 리스트를 보여주는 기능이다.
  해당 기능은 가장 메인이 되는 기능이다.
  처음 페이지에 접근하게 되면, 해당 요일과 전체 플랫폼을 기준으로 웹툰 리스트를 보여준다.
  요일과 플랫폼, 정렬 방식(인기순, 조회순)을 조건으로 설정할 수 있으며, 조건에 해당하는 웹툰들의 썸네일 이미지와 제목, 작가, 조회수 정보를 표기하여 보여준다.
  정렬 방식 중 인기순의 경우 각 유저들의 즐겨찾기 리스트에 가장 많이 추가가 된 순서로 정렬된다.
  조회순의 경우 해당 서비스에서 실제 웹툰 페이지로 이동할 때 발생하는 클릭 누적 횟수를 기준으로 정렬된다.

• 웹툰 즐겨찾기
  각 웹툰 카드의 하트 토글을 누르면 동작한다.
  하트 토글을 누르게 되면 해당 유저의 즐겨찾기 리스트에 추가되며, 한 번 더 누르게 되면 즐겨찾기 리스트에서 삭제가 된다.
  이와같이 사용자가 즐겨찾기한 웹툰 리스트는 오른쪽 상단(인기순, 조회순 버튼 옆)의 하트 토글을 눌러 확인할 수 있다.

• 검색
  페이지 상단의 검색창에 작가, 작품명을 키워드로 검색할 수 있다. 일치하는 결과가 있다면, 웹툰의 제목과 플랫폼, 작가 정보를 보여준다. 검색결과에서 제목을 클릭시 해당 웹툰으로 이동할 수 있다.

페이지 구성

---

• 메인 화면 (웹툰 리스트)
• 로그인
• 회원가입
• 아이디 찾기
• 비밀번호 찾기
• 검색

Header

• 웹툰 모아 첫번째 로고
  클릭시, 메인 페이지로 이동.

• 검색란
  원하는 키워드 입력시 해당 키워드로 작가/작품명 검색.

• 로그인 / 로그아웃
  로그인 하지 않았을 때는 로그인창으로 이동.
  로그인이 되어있는 상태일때는 로그아웃글자가 적혀있으며, 클릭시 로그아웃.

Footer

• 웹툰 모아 두번째 로고
  로고 클릭시, 메인 페이지로 이동.

• 정보
  웹툰 모아 개발자 및 개발 기간 등을 명시.

요일별 웹툰 정렬

• 요일 정렬 Default
  기본적으로 해당 요일에 맞는 웹툰 리스트를 보여줌.
  오늘이 수요일이면, 수요일 웹툰 리스트를 보여줌.

• 요일별 웹툰
  원하는 요일을 선택하여 해당 요일의 웹툰들을 볼 수 있음.

플랫폼별 웹툰 정렬

• 원하는 플랫폼만 보기
  네이버웹툰, 카카오페이지, 카카오웹툰 중 원하는 플랫폼 하나를 선택하여 해당 플랫폼의 웹툰만을 볼 수 있음.

• 플랫폼 정렬 Default
  플랫폼 정렬의 기본은 3사 플랫폼 모두를 모아 보는 것임.

웹툰 즐겨찾기

• 하트 토글
  하트 토글을 클릭하여 해당 웹툰을 즐겨찾기에 추가.
  빨간색이 된 하트를 한번 더 클릭시 즐겨찾기에서 삭제.
  우측 상단 하트 버튼을 클릭하여 사용자가 즐겨찾기한 웹툰만을 모아 볼 수 있음.

인기순 웹툰 정렬

• 인기순
  해당 서비스를 이용하는 사용자들이 가장 많이 즐겨찾기 리스트에 추가한 순서.
• 인기순 정렬로 인해 많은 사용자들에게 사랑받고 있는 웹툰들의 추세를 알 수 있음.

조회순 웹툰 정렬

• 하트 옆 숫자
  해당 서비스에서 웹툰 카드를 클릭하여 해당 웹툰의 페이지로 이동한 횟수를 나타냄.

• 조회순
  조회순 정렬 버튼을 클릭하면 조회가 가장 많은 웹툰부터 최상단에 정렬됨.

검색기능

• 검색란
  헤더 우측에 검색란에 원하는 키워드를 입력하여 검색.

• 검색 결과
  해당 키워드가 들어가는 작품과 작가명들을 모두 보여줌.
  검색 결과로는 제목, 플랫폼, 작가명을 알려줌.
  해당 웹툰 클릭시 해당 웹툰 페이지로 이동.

• 검색 결과 없음
  키워드에 해당하는 검색결과가 없을 경우, “검색 결과 없음”이라는 문구 등장.

로그인

• 자사 로그인
  아이디와 비밀번호 입력후 파란색의 로그인 버튼 클릭시, 로그인 완료.

• 소셜 로그인
  카카오와 네이버로 로그인 가능.
  카카오 및 네이버 로그인 버튼 클릭시, 회원가입이 되어있지 않을 경우 회원가입 페이지가 열림.
  회원가입이 완료되었다면 클릭시 팝업창이 뜬 후, 로그인이 완료됨.

회원가입

• 회원가입하기
  이름, 아이디, 비밀번호, 비밀번호 확인, 이메일을 모두 입력하면 가입완료.
  조건에 맞지 않거나 모두 입력하지 않았을 경우 팝업창으로 사용자에게 알려줌.

아이디 찾기

• 아이디 찾기
  이름과 이메일을 입력.
  회원가입한 이름과 이메일이 동일하지 않거나 존재하지 않는 계정이면 아이디 찾기가 불가하다는 경고문 알림.

• 인증번호
  이름과 이메일이 일치하면 해당 이메일로 인증번호 전송.
  인증번호를 해당 페이지에 입력 후, 확인버튼을 클릭하면 해당 아이디를 알려줌.

비밀번호 찾기

• 비밀번호 찾기
  아이디와 이메일을 입력.
  일치하지 않을 시 경고문 알림.

• 비밀번호 전송
  아이디와 이메일이 일치하면, 해당 이메일로 가입시 작성하였던 비밀번호를 전송.

프로젝트를 마치며

---

해당 프로젝트에서 내가 맡은 역할은 웹 퍼블리싱이었다.
아직 제대로된 프론트엔드공부를 하지 않아서 자바스크립트는 잘 다루지 못하는 것이 문제였다. 거의 모든 페이지를 제작하였는데, 저번 프로젝트에서 사용했던 것들을 다시 복습만을 하게 되었다. 새롭게 배운 것이 거의 없다보니 새로 배운 내용들을 작성할 것이 없다.
대신 이번 프로젝트를 하면서 깨달은 것은 난 정확히 무엇이 하고 싶은 것인가? 이다. 웹 퍼블리싱인지 프론트엔드인지.
내가 내린 결론은 프론트엔드이다. 웹 퍼블리싱, 충분히 좋지만 앞으로의 비전과 발전을 위해서는 프론트엔드가 맞는 것이고, 퍼블리싱의 길을 갈것이라면 디자인도 할 줄 알아야 한다고 생각이 들었다. 하지만 난 디자인은 완전 잼병..이다.
나는 프론트엔드 개발자의 길을 걸어가기로 완전히 정하게 되었다. 그렇기 위해서는 정말 자바스크립트 공부와 리액트 공부를 열심히 해야 한다는 것을 이번 프로젝트에서 절실히 느꼈다.
백엔드에서 크롤링한 데이터들을 제작한 페이지로 불러오는데 난 할줄 아는 것이 하나도 없었다. 심지어 프론트엔드 처음하시는 컴공분이 다 하셨다. 여기서 약간의 자존심 스크래치와 난 도대체 그동안 뭘 공부한거지?라는 약간의 회의감이 들었다. 그리고 아직 배울 것이 한참 남았다는 것을 깨닫게 된 프로젝트였다.
다음 프로젝트에서는 진짜 프론트엔드를 할 수 있도록 열심히 자바스크립트 기본 공부를 끝내고 리액트 공부를 해야 겠다.
이번 프로젝트는 새롭게 알게된 지식들은 별로 없었지만 해이해져있던 나에게 경각심과 뭘 공부해야 할지에 대한 방향을 얻을 수 있었던 프로젝트였다.