CSS 웹 디자인 접근, 업그레이드 방법

고민

css는 자유도가 너무 높다. 내가 원하는 대로 디자인이 가능한 것이다. 하지만 내가 디자인을 정하고 css코드를 치려고 하면 굉장히 어렵다. 내가 디자인을 정하는 것 부터가 문제이다.

어떻게 디자인을 해야 접근성이 좋을지, 글자가 너무 크지도 않고 작지도 않을지, 모바일에서와 pc에서 사용경험이 다를지, 사용자 경험이 직관적일지, 일관성 있는 색상 요소들... 너무나 많은 생각을 해 시작부터 난관에 빠지는 것이다. 게다가 내가 생각한 디자인을 css코드로 만들 수 있는 디자인인지조차 생각해보면서 하면, 디자인을 하려고 시작할 때부터 스트레스를 엄청 받는 것이다. 

아무 것도 모를 때 알면 좋은 것들

디자인 도구 활용(Figma 등): css코드로 구현할 수 있을지는 생각하지 말고 일단 시각화에만 집중하는 단계가 필요하다. 피그마에서 만드는 레이아웃은 tailwind css같은 유명 프레임워크로 거의 100% 구현 가능하기 때문에 css코드로 구현할 수 있을지 고민하지 않아도 된다. 일관성 있는 색상 요소들인지도 눈으로 볼 수 있으니 해결 가능한 고민이다.

 

모바일 우선주의: 모바일에서와 pc에서 사용경험이 다른것은 당연하다. pc기준으로 만든 레이아웃이면 모바일에서는 컴포넌트들이 작고, 모바일 기준으로 만든 레이아웃이면 컴포넌트들이 큰 것이다. 하지만 다른점은 pc기준으로 만든 레이아웃을 모바일에 맞추기는 어려우나 모바일기준으로 만든 레이아웃을 pc기준으로 바꾸기는 훨씬 쉽다는 것이다. 모바일에서 없는 부분을 확장하면 되기 때문이다.

 

css 프레임워크(tailwind, bootstrap 등) 활용: 사용할 수 있는 색상과 글자 크기가 몇개 정해져있다. 이중에서 골라서 사용하면 되는것이다. 

css 프레임워크 존재 이유와 공부법

생 css의 복잡함을 어떻게 하면 질서있게 관리할까? 라는 질문은 나만 한 것이 아니다. 모든 css프레임워크들이 css를 질서있게 관리하기 위해 만들어졌다.

대부분의 css프레임워크들이 공유하는 핵심 공통 개념이 있다. 핵심 공통 개념들만 알아놓으면 css프레임워크들이 어떤건지 하는지 금방 이해할 수 있다.

- 유틸리티 퍼스트 또는 클래스 조합: Bootstrap은 .btn-primary tailwind는 flex pt-4 text-center처럼 클래스들을 조립해서 사용한다. 이미 준비된 클래스 이름을 HTML에 갖다 붙인다는 공통점이 있다.

- 반응형 디자인 접두사 (Breakpoints): 화면 크기에 따라 스타일을 바꾸는 기능을 '접두사'로 해결한다. sm:, md:, lg:, xl:등.

- 디자인 토큰 (Design Tokens): 미리 약속된 수치가 있다. p-1, blue-500처럼 숫자를 붙여 정해진 단위를 사용한다.

- 그리드 시스템 (Grid & Container): 모든 프레임워크는 화면을 나누는 '틀'을 가지고 있다.

- 박스 모델의 시각화 (Flex & Grid 제어): 프레임워크들은 Flexbox속성을 짧은 클래스로 배치할 수 있다. items-center, justify-between등

 

그리고 프레임워크의 공식문서를 모두 읽으면 시간이 너무 많이 걸린다.

1. Layout: 화면 전체 틀을 어떻게 잡는지 (Container, Grid)

2. Flexbox: 요소를 가로/세로로 어떻게 세우는지

3. Spacing: 안쪽/바깥쪽 여백은 어떻게 주는지 (padding, margin)

4. Typhgraphy: 글자 크기와 굵기는 어떻게 바꾸는지

이렇게 4가지만 훑어보면 대부분 ui를 바로 코딩 가능하다. 나머지는 필요할 때 검색해보면 된다.

 

그러면 어떤 순서로 디자인과 코딩을 진행해야 하는가?

 

top-down으로 계획하고, bottom-up으로 구현하는것이다.

피그마나 메모장에 큼직하게 사각형을 그려 헤더, 콘텐츠, 푸터 등등 구역을 나눈다. 이때 세부 디자인은 하지 않는다.

전체를 한번에 그리려고 하지 말고, 작은 컴포넌트부터 만들고 작은 컴포넌트들을 조립해 중간 컴포넌트를 만들고.. 를 반복해 조립하여 전체를 만드는 bottom-up방식이 개발자에게 좋은 방법이다. 

디자인 업그레이드 방법

색상과 대비

여러가지 색깔을 사용하여 웹페이지 요소들을 배치하면, 시선이 분산되고 난잡하다.

브랜드 컬러를 하나 정하자. 그리고 나머지는 무채색(흰색, 회색, 검정색)위주로 사용하는 것이다. 다른 사이트들을 봐라. 페이지 대부분이 무채색일 것이다.