Angular5를 사용하여 kakaobank사이트 만들어보기

최근 만들어진 웹사이트중 가장 심플하게 잘 만들어졌다고 생각하는 kakaobank 사이트를 직접 copy 해보고,

어떤 plugin들을 사용했고, 레이아웃은 어떤 방식으로 잡았는지에 대해서 알아보는 시간을 가져보았습니다.

결국, 어떻게 만들었길래 이렇게 이쁠까? 란 궁금증을 해결하기 위해서 직접 똑같이 만들어 보았습니다.

목적

• kakaobank 사이트와 똑같은 사이트를 구현합니다.
• 구현하면서 필요한 라이브러리 또는 스킬들도 하나하나 정리합니다.

요구사항

• kakaobank와 최대한(?) 똑같이 만들어야합니다.
  (따라서, 구현시 사용되는 모든 리소스는 kakaobank의 리소스를 참조하여 개발합니다.)
• 오픈소스로 공개하고 스터디 용으로만 사용합니다.

구축환경

• angular5를 사용하여 개발합니다.
  (angular-cli로 생성한 프로젝트를 사용합니다. webpack, scss, typescript etc..)

사용된 skill & plugin

• slick-carousel
  - 5장의 카카오뱅크 카드를 slick-carousel을 사용하여 슬라이드하면서 볼 수 있도록 구현합니다.
• ng-scrollreveal
  - 스크롤을 내릴때 애니메이션을 적용하여 이미지가 자연스럽게 나타나도록 구현합니다.
• css transition 속성을 사용한 애니메이션 효과
  - transition 속성을 사용하여 애니메이션을 구현합니다. (낮이 저녁이 되도록, 해가 달이 되도록..)

복제 과정

1. 필요한 플러그인을 정리합니다.
   - chrome 개발자 도구를 사용하여 쉽게 수집이 가능합니다.
2. 사용되는 리소스(image, favicon 등..)를 모두 수집합니다.
   - chrome 개발자 도구를 사용하여 쉽게 수집이 가능합니다.
3. 영역별로 section을 나누고 수집한 리소스를 사용하여 구현합니다.
   - 화면에 보여지는 것만 똑같이 보이도록 하면 되기 때문에 html의 경우 꼭 똑같이 구현할 필요는 없습니다.
4. css의 경우 구간 별로 kakaobank의 사이트를 참고해서 똑같이 적용합니다.
   - 화면을 똑같이 만들기위해서 font-size나 색상 모두 같은 값을 사용해야 합니다.

느낀점

• 반응형 웹 아닙니다. (app은 별도로 개발하였습니다.)
  - 반응형 웹으로 개발하지 않고 모바일은 별도로 개발함으로써 PC에 최적화된 웹을 만들었습니다.
• retina용 이미지는 별도로 사용하였습니다.
  - retina의 경우 화면 해상도가 더 높기 때문에 그에 맞는 고화질의 이미지를 사용합니다.
  - 또한, 다양한 사이즈의 이미지를 준비해놓고, window 사이즈에 따라 이미지를 알맞게 적용하여 퀄리티를 높였습니다.
• 같은 영역에는 font-size, margin, padding 을 일정하게 적용하여 깔끔하고 통일성 있게 구현하였습니다.
• 전체적으로 간격을 넓게 사용하여 답답하지 않고 시원한 느낌을 주도록 합니다.
• 내용과 이미지가 적절하게 혼합되어 보기 쉽도록 구성되어 있습니다.

github 주소

• 카카오뱅크 복사본, https://github.com/leeduyoung/kakaobank-copy

참조

• https://github.com/jlmakes/scrollreveal
• https://tinesoft.github.io/ng-scrollreveal/doc/index.html
• https://github.com/kenwheeler/slick