1. 서론

본문은 프론트엔드 데브코스 4기의 팀원들과 매주 금요일마다 아티클 읽기 를 주제로 하여 쓴 글입니다. 전문적인 내용을 담고 있다기 보단 글을 꾸준히 쓰고, 글에 대한 재미를 붙이기 위해 작성했습니다.

또한 저는 디자인 전공을 하지 않았고, CSS 에 대해서도 무지한 부분이 여전히 많기에 정확하지 않은 정보가 많습니다. 제가 개인 프로젝트를 진행하며 CSS 를 작성할 때 어떤 점들을 포인트로 잡는지에 대해 작성한 글이므로 부족하더라도 가볍게 봐주시면 감사하겠습니다!

2. 디자인 분석

지금은 대충 제가 개인 프로젝트를 할 때 신경 쓰는 기준이 있지만, 저도 처음 프론트 엔드 개발을 할 땐 어떻게 CSS 를 작성해야 예쁠지 몰랐습니다.

그래서 처음엔 여러 웹 사이트들을 참조하고, 자신이 생각하기에 어떤 점들이 보기 편하다고 느껴지는지 직접 알아보는 게 도움이 된다고 생각해요.

2-1. 여러 웹 사이트들을 참조하자!

개인적으로 디자인이나 그림은 타고난 재능이 아닌 이상 처음부터 창작을 잘 할 수 없다고 생각합니다. 더군다나 저는 디자인을 배워본 적이 없어서 잘 만들어졌다고 생각하는 웹을 참조했습니다.

제가 생각하기에 깔끔하고 예쁜 사이트를 가져왔습니다. 순서대로 프로그래머스, 인프런 사이트입니다.

2-2. 마음에 드는 요소를 분석하자!

마음에 드는 웹 페이지를 찾았다면 분석을 합니다. 이 페이지는 무엇이 다르길래 깔끔하고 예뻐 보이는 건지, 어떤 기법인지 들여다 봅니다.

예를 들어, 위의 두 페이지에선 다음과 같은 규칙(?)을 찾을 수 있었어요.

• 많은 색을 사용하지 않는다.
• 강조하는 색이 있다.
• 각진 도형보다는 가장자리가 부드러운 도형을 사용한다.
• 화려한 폰트를 사용하지 않는다.

사실 여기 적은 4가지만 해도 저는 디자인을 따로 신경쓰지 않고도 깔끔한 CSS 를 작성할 수 있다고 생각해요. 실제로 제가 꼭 지키는 원칙이기도 합니다!

3. 깔끔한 CSS 작성

3-1. 많은 색을 사용하지 않는다

웹 사이트들은 자신만의 색이 있습니다. 유튜브는 빨간색이고, 위에서 나온 프로그래머스는 파란색이죠!

그래서 저도 CSS 를 작성할 땐 이번엔 무슨 색을 사용하는 게 좋을까~ 하고 생각합니다. 추천하는 색이 있다면 적당히 채도와 명도가 있는 색이 좋다고 생각해요. 그렇다고 너무 눈이 아프거나 탁한 색이면 안되겠죠!

가령 제가 이번에 만든 todo-list 앱을 예시로 든다면 다음 색깔들은 좋지 못한 색입니다.

대신 적당한 색깔은 다음과 같겠죠!

더불어 글자의 색이 묻힌다면 글자의 색을 바꾸는 것도 좋습니다!

여기서 더 추가로 색을 사용하고 싶다면 보색이나 비슷한 계열의 색, 혹은 투명도나 채도를 낮춘 색을 사용해서 통일감을 주면 됩니다! 다만 이 부분은 여러 컬러파레트 사이트의 추천을 받는 것을 권하고 싶네요.

3-2. 부드러운 도형을 사용하자

저는 각진 도형 보다는 부드러운 도형을 사용하려고 하고 있습니다. 특별한 이유는 없고, 요즘 트렌드인 것 같아서... 입니다!

프로그래머스 프론트엔드 데브코스의 페이지를 한 번 볼까요?

데브코스 소개 페이지의 카드들도 부드러운 도형을 사용했습니다.

페이지 내의 버튼이나, 카드들도 마찬가지로 모서리를 둥글게 처리해줬어요. 저는 개인적으로 이런 둥근 사각형들이 부드러움을 줘서 UI 적으로 좋다고 생각하고 있고, 자주 쓰고 있습니다! CSS 에선 border-radius 속성을 줘서 만들 수 있어요.

3-3. padding 을 활용하자

어떤 요소 내 컨텐츠를 작성할 때 여백이 있는 것과, 여백이 없는 것은 상당한 차이를 만들어냅니다.

여백이 없는 경우 UI 가 답답해 보이지만, 여백이 있는 경우 여유 공간이 생기면서 시각적으로 안정성을 주게 돼요.

input 의 placeholder 를 예시로 들면 다음과 같습니다.

input에 여백을 주지 않으면 글자가 요소 가장자리에 붙어 있어서 답답해 보입니다.

그에 비해 padding 속성으로 여백을 주면 위 사진에 비해 답답해 보이는 느낌이 줄어들게 돼요.

이런식으로 각 요소들에 자신만의 여백을 주는 것도 사소해보이지만 큰 영향을 미칩니다!

3-4. 글자의 행간, 자간을 신경 쓰자

보노보노 ppt 나, 무지개색 ppt 등 여러 화려한 ppt 유머(?)를 본 적이 있으신가요? 해당 ppt의 문제점은 가독성을 전혀 고려하지 못한다는 점에 있습니다.

프론트 엔드도 사용자에게 시각적인 정보를 전달해야하는만큼 사용자의 가독성을 고려해야 해요. 그 중 첫번째가 글자의 배치간격입니다.

행간의 경우엔 너무 좁은 것보다는 적당히 넓은 것이 도움이 됩니다.

자간의 경우 만화책 식자 작업에서도 많이 쓰는 기법으로, 너무 넓은 것보다는 적당히 좁게 배치하는 것이 좋습니다.

3-5. 글자 중앙 정렬은 필요할 때만!

마찬가지로 사용자의 가독성을 위한 부분입니다. 우선 저희 나라에선 보통 글자를 왼쪽에서 오른쪽으로 읽기 때문에 글자는 대게 좌측 정렬을 해주는 것이 좋아요.

단, 사용자의 시선을 고려해서 요소를 중앙에 둬서 시선 처리를 유도한 다음 왼쪽 정렬을 해주는 게 좋습니다. 다음 예시를 볼까요?

위와 같이 요소를 배치할 경우 사용자는 왼쪽만 바라보며 작업을 하게 됩니다. 중요한 요소라면 모쪼록 시선을 이리저리 옮길 필요 없이 가운데에 두는 게 좋겠죠?

이렇게 함으로써 사용자의 시선을 가운데로 유도할 수 있습니다. 그렇다면 이제 텍스트를 가운데 정렬로 다 맞춰볼까요?

글자를 가운데 정렬로 하면 어떤 좋은 점이 있고, 어떤 불편함이 있을까요? 글자를 가운데 정렬하게 되면 사용자에게 집중을 유도하는 글이 됩니다. 시를 쓸 때 가운데 정렬을 종종 하는 것도 그 이유입니다.

하지만 무분별하게 중앙정렬을 하는 경우 피로감이 생기고, 어디가 중요한 부분인지 알 수 없어요. 무엇보다 왼쪽 정렬을 한 경우 글자의 시작점을 알 수 있어 사용자의 시선이 바로바로 위치하게 되지만 중앙 정렬의 경우 시작점이 매번 달라져 사용자는 매번 글자를 쫓아야 하죠.

이런 부분에서 사용자의 가독성과, 전달하고 싶은 내용을 생각하여 요소들을 배치하는 것이 좋습니다!

4. 마치며

너무 당연한 정보를 쓴 것 같기도 하지만, 데브코스를 진행하면서 저나 남에게 당연한 정보들이 누군가에겐 그렇지 않을 수도 있다는 것을 알게 되었기에 용기내서 글을 발행합니다.

다시 한 번 말하지만 저는 디자인을 전공한 사람도 아니고 그저... 그림으로 따지면 관찰력으로 어찌저찌 기초 없이 모방작만 그리는 사람일 거예요. 제가 위에서 서술한 것 외에도 여러 요소가 있을 거고, 저도 아는 내용을 전부 쓴 것은 아니지 개인 프로젝트 정도면 이렇게 해도 큰 무리는 없으리라 생각해요!

그리고 저에게 CSS 작성 팁을 여쭤봐주신 팀원 분께도 감사인사 드립니다! 매번 저희 팀원들을 통해 제가 어떤 부분이 부족한지, 그리고 어떤 부분을 잘 하고 있는지 피드백 받을 수 있어서 기뻐요. 앞으로도 잘 부탁드린다는 말을 전해드리며 이만 글 줄이겠습니다! 감사합니다!