CSS 계획

CSS 를 하게 되면서 단계를 스스로 만들었다

• 컴포넌트 파악

• 컴포넌트 계획

• 와이어 프레이밍

• 세부 구현

• 디자인 수정 및 컴포넌트 리팩토링

컴포넌트 파악

디자인 원안이 도착하면 먼저 컴포넌트 파악부터 하게된다 중복 컴포넌트, 페이지 특화 컴포넌트 등을 먼저 파악한다

컴포넌트 계획

이 컴포넌트들을 어떤 식으로 나누고 어떤 식으로 지배구조(상/하위 DOM)를 가질 지, 중복된 컴포넌트는 어떤 식으로 처리할 지 등에 대한 계획을 그린다

와이어 프레이밍

프로젝트가 어떤 식으로 변경될 지도 모르고 MVP 를 바로 테스트 할 지도 모르기 때문에 일단 최대한 구현을 해야한다고 판단하기에 배치같은 큰 선을 그린다. display : flex, position 등을 이용하여 굵직굵직한 컴포넌트들 부터 먼저 배치한다

세부 구현

이제 디테일한 부분을 손을 댄다 shadow, border,margin 등 여러 부분에 걸쳐서 위에서 아래방향으로 디자인을 구현한다.

디자인 수정 및 컴포넌트 리팩토링

일반적으로 바로 컨펌나는 경우가 잘 없다 구현을 잘못 하는 경우도 있고 디자이너의 의견이 추가로 반영되는 경우가 나의 경우 많았다. 그리고 처음 계획을 잘 짰어도 진행중이나 완료 후 마음에 안 드는 부분이 생길 수 밖에 없었다. 그래서 리팩토링을 진행하며 여러 부분을 유지보수 한다.

요약

• 컴포넌트 파악

• 컴포넌트 계획

• 와이어 프레이밍

• 세부 구현

• 디자인 수정 및 컴포넌트 리팩토링