1. 카카오 페이지 클론코딩 해보기 - 페이지 분석하기

이 글은 자바스크립트로 작성되었습니다

---

들어가기 전에

저는 개인적으로 좋아하는 카카오 기업의 기술을 어떻게 어깨너머로라도 배워볼까 생각을 하다가
카카오 페이지를 클론코딩 하기로 생각했습니다

https://page.kakao.com/

카카오페이지

클론코딩을 진행하면서 제가 몰랐던 기술들이나 설계방식을 배워보려고 합니다

 

순서

 

1. 카카오 페이지 분석하기

카카오 페이지를 직접 들어가서 어떤 기술들로 구현이 되어있는지 확인해보려고 합니다

 

2. 설계하기(요구사항 정의하기)

분석한 카카오페이지를 제 나름대로 재설계해보려고 합니다

저의 경우는 대체할 데이터(웹툰)가 없기 때문에
다른 작가들이 이용하는 이미지를 업로드하는 페이지로 대체하겠습니다

 

3. 구현해보기(테스트코드 작성하기)

설계를 기반으로 구현을 해보려고합니다
이 때, 테스트 코드도 작성해 TDD 개발을 해보려고 합니다

 

4. 통합테스트

요구사항을 토대로 개발된 서비스를 release환경에서 테스트 합니다

 

5. 배포하기

Vercel에 서비스를 빌드해 배포하고 서비스 공유해보려고 합니다

 

 

1. 카카오페이지 분석하기

1. Next.js 

SEO에 최적화 된 Next.js를 사용한 것 같습니다
개발자 도구에서 확인할 수 있었습니다

 

2. tailwindcss

이 또한 개발자도구에서 tailwindcss를 사용한 것을 확인할 수 있었습니다
요즘 정말 인기가 많은 css 프레임워크입니다
저 역시도 좋아하는 프레임워크입니다

Tailwind CSS 사용기 | 카카오엔터테인먼트 FE 기술블로그

tailwindcss 사용기도 기술블로그에 잘 정리되어 있었습니다 

 

3. mobile > desktop 반응형

웹툰의 특성 상 대부분이 모바일로 접근을 하기 때문에
모바일 우선의 반응형 디자인이 구현된 것 같습니다

4. lazy loading

분석이라고 하기는 그렇지만 눈에 보이는 최적화 기술도 다 적어보려고 합니다
용량이 큰 이미지 특성상 한번에 다 로딩되면 부하가 발생할 수 있기 때문에
lazy loading을 적용한 것 같습니다

 

5. OAuth2 로그인

당연하겠지만 OAuth2를 이용한 카카오 로그인으로 구현되어 있습니다

 

6. 랭킹 시스템(인기 검색어, 최근 검색어)

웹툰의 랭킹 시스템이 있습니다
기간별 조회수 기반의 랭킹 시스템인지 확인해봐야 할 것 같습니다

검색어 또한 수집해 인기 검색어를 보여주는 것 같습니다

7. 결제 서비스

수익이 발생해야 하는 서비스라면 결제시스템이 있습니다
카카오 페이지 역시 결제서비스가 있습니다

8. 선물하기

유료로 이용할 수 있는 서비스를 타인에게 선물할 수 있는 기능이 있습니다
구독제, 일회성 선물이 있을 수 있을 것 같습니다

9. Graphql

네트워크에서 graphql을 찾을 수 있었습니다
내용을 살펴보니 특정 레이아웃 정보를 조회하기 위한 query와 fragment를 정의하고 있었습니다
여러 종류의 UI 구성요소(items)를 받아오고 있었고, 각 요소는 배너, 카드, 리스트 등 다양한 형태를 포함하고 있었습니다

카카오페이지는 BFF(Backend For Frontend)를 어떻게 적용했을까? | 카카오엔터테인먼트 FE 기술블로그

찾아보니 기술 블로그에 자세히 적혀 있었습니다

BFF Apollo GraphQL을 사용하면서 겪었던 이슈들
urql를 도입하게 된 계기등이 잘 정리되어있었습니다

 

10. Track

network에서 track이라는 트래픽이 계속 발생했습니다

사용자의 디바이스 정보, 화면 위치정보 등 사용자의 행동(노출, 클릭 등)을 수집하여
개인화 추천이나 광고 효과 분석, 사용자 경험 개선 등에 활용하려는 목적을 가진 것 같습니다

스크롤을 내리면 graphql과 track이 반복적으로 발생하면서 데이터를 렌더링 시켜주는 것 같습니다

 

이 외에도 여러가지 기술들이 많이 포함하고 있다고 생각합니다
카카오 엔터테이먼트 기술블로그를 정독하고 공부해서
가장 흡사하게 클론코딩을 해보는 것이 제 목표입니다