소개

Pocket이라는 가상의 모바일 앱을 소개하는 랜딩 페이지로서 다양한 애니메이션이 적용되었습니다.

아토믹 디자인

이 랜딩 페이지는 '아토믹 디자인'을 통해 개발되었습니다.

'아토믹 디자인(Atomic Design)'은 웹 페이지를 구성하는 각각의 요소(컴포넌트)를 가장 작은 단위인 원자(Atoms)부터 시작해서 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)로 구성하여 효과적으로 웹 페이지를 개발하는 디자인 방법론입니다. 쉽게 말해, 레고 블록을 쌓는 것처럼 웹 페이지를 개발하는 방식이라고 생각하면 됩니다.

예를 들어 이 랜딩 페이지는 아래와 같이 '버튼'과 같은 '원자' 단위의 가장 작은 컴포넌트들부터 개발을 시작한 후 이렇게 만들어진 컴포넌트들을 다시 조합하여 더 복잡한 컴포넌트들을 만들어가며 최종적인 페이지를 구성합니다.

전체 컴포넌트 살펴보기 →

아토믹 디자인을 사용하면 개발의 일관성을 유지하고 또 생산성을 높일 수 있으며, 차후 수정 사항이 생기더라도 이에 기민하게 대처할 수 있어 유지보수성도 높일 수 있습니다.

작업 내용