프로덕트 디자이너가 알아두면 좋을 개발 상식 05. CSS 기본 개념과 문법 이해하기

 

2년차 디자이너로서 개발 지식은 알게 모르게 나를 주눅 들게 만드는 부분이었다. 
좋은 기회로 부트캠프에서 프론트엔드 개발을 배우면서, 이 과정을 기록으로 남겨야겠다고 다짐했다.

개인 웹사이트를 제작해본 경험은 있지만, 지금은 아주 초보적인 단계에서부터 하나씩 기록해 나가고 있다. 프로덕트 디자이너라면 개발자, 기획자와의 유연한 소통이 필수적이기 때문에, 이러한 과정을 통해 나의 이해도를 점차 높여가고 싶다.

각 주제별로 순차적으로 글을 작성하고 있으니, 더 궁금한 부분이 있다면 아래 목록에서 클릭해 확인해 보길 바란다! 😽
⇊⇊⇊

프로덕트 디자이너가 알아두면 좋을 개발 상식 01. HTML 기본 개념

프로덕트 디자이너가 알아두면 좋을 개발 상식 02. HTML 기본 요소

프로덕트 디자이너가 알아두면 좋을 개발 상식 03. HTML으로 웹페이지 기본 구조 작성해보기

프로덕트 디자이너가 알아두면 좋을 개발 상식 04. Figma에서 UX/UI 디자이너가 개발자와 소통 잘하는 법 (컴포넌트 네이밍)

프로덕트 디자이너가 알아두면 좋을 개발 상식 05. CSS 기본 개념과 문법 이해하기

 

CSS란 무엇인가?

CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 정의하는 언어다. HTML은 웹 페이지의 구조와 내용을 정의하지만, 그 자체로는 시각적 매력이나 디자인을 제공하지 않는다. CSS는 이러한 HTML의 구조에 색상, 글꼴, 레이아웃 등 시각적 스타일을 부여해 더욱 사용자 친화적이고, 매력적인 웹 페이지를 만들어준다.

CSS를 사용하면 HTML로만 만든 웹 페이지가 갖는 단순함을 벗어나, 사용자가 더 오랫동안 머물고 싶게 만드는 경험을 제공할 수 있다.

CSS의 필요성

1. HTML의 시각적 한계 극복

HTML은 웹 페이지의 콘텐츠와 구조를 정의하는 언어이지만, 이를 시각적으로 멋지게 만드는 기능은 없다. HTML만으로 만들어진 페이지는 기본적으로 텍스트와 이미지의 나열에 불과할 수 있다. CSS를 사용해 이러한 요소들을 멋지게 꾸미고 배치함으로써, 사용자에게 시각적 만족감을 주는 페이지를 만들 수 있다.

2. 코드 재사용성 향상

CSS를 사용하면 한 번 작성한 스타일을 여러 HTML 파일에서 재사용할 수 있다. 예를 들어, 회사 브랜드에 맞는 일관된 스타일을 정의해놓고 모든 페이지에서 사용할 수 있다. 이러한 재사용성은 유지보수를 용이하게 하고, 시간이 지나면서 발생하는 스타일 수정에도 효율적이다.

3. 반응형 웹 디자인

현대 웹사이트는 다양한 기기에서 열람된다. 데스크톱, 태블릿, 모바일 등 기기마다 화면 크기가 다르기 때문에, 화면 크기에 맞게 레이아웃을 변경하는 것이 중요하다. CSS의 미디어 쿼리를 사용하면 다양한 화면 크기에 맞추어 레이아웃을 조정할 수 있어, 모든 기기에서 최적의 사용자 경험을 제공할 수 있다.

---

🥺 잠시만요. 근데 css 를 프로덕트 디자이너가 꼭 알아야하나요?

CSS는 웹 페이지를 시각적으로 아름답게 꾸미고, 사용자 경험(UX)을 극대화하는 데 필수적인 도구이다. 프로덕트 디자이너로서 CSS에 대한 기본적인 이해를 가지면 개발자와의 협업이 원활해지고, 디자인 구현 가능성을 더 잘 이해할 수 있다.

 

현업에서 CSS가 사용되는 경우

1. 스타일 일관성 유지

모든 프로젝트에서 일관된 사용자 경험(UX)을 유지하는 것이 중요하다. CSS는 전체 프로젝트의 디자인을 통일하여 사용자에게 익숙한 환경을 제공하는 역할을 한다. 특히 대기업에서는 수많은 페이지와 기능이 있기 때문에, 디자인 시스템이나 스타일 가이드를 통해 모든 팀이 같은 CSS 규칙을 따르는 것이 중요하다. 이렇게 하면 브랜드의 아이덴티티를 유지하고, 모든 인터페이스가 일관된 룩앤필을 가질 수 있다.

2. 컴포넌트 기반 개발

현대의 프론트엔드 개발에서는 컴포넌트 기반 프레임워크인 React나 Vue.js 등을 사용한다. 각 컴포넌트의 스타일은 CSS로 정의되며, CSS 모듈이나 CSS-in-JS 같은 기법을 활용해 재사용성을 극대화한다. 컴포넌트는 서로 다른 프로젝트나 페이지에서도 일관되게 사용될 수 있도록 설계되며, 그 스타일을 관리하는 CSS는 재사용성을 높이기 위해 잘 구조화되어 있다.

3. 반응형 웹 디자인

모바일 기기와 데스크톱에서 모두 잘 동작하는 웹 페이지를 만들기 위해 반응형 웹 디자인이 필요하다. CSS의 미디어 쿼리(media query)를 통해 화면 크기에 따라 레이아웃을 조정할 수 있다. Flexbox와 Grid 같은 CSS 레이아웃 모듈을 사용하면 다양한 화면 크기와 상황에서 레이아웃을 유동적으로 만들 수 있어 사용자 경험을 개선할 수 있다.

4. 애니메이션과 전환 효과

CSS는 웹 페이지에 애니메이션과 전환 효과를 적용해 인터랙션에 생동감을 불어넣는다. 작은 애니메이션이라도 사용자 경험에 큰 차이를 줄 수 있다. 예를 들어, 버튼을 클릭할 때 색이 부드럽게 변하는 효과를 주면 사용자가 상호작용에 대한 피드백을 받게 되어 더 직관적이고 즐거운 경험을 할 수 있다.

프로덕트 디자이너가 CSS를 알면 좋은 이유

1. 디자인 구현 가능성 이해

디자인은 아름다워야 하지만 현실적으로 구현 가능해야 한다. CSS를 이해하면 자신이 설계한 디자인이 실제로 프론트엔드에서 어떻게 구현될 수 있는지 이해하는 데 도움이 된다. 예를 들어, 반응형 레이아웃에서 요소들이 브라우저 크기에 따라 어떻게 변화할지를 미리 고민하고 디자인에 반영할 수 있다. 이는 개발자와 협력할 때 가능한 디자인을 제안하거나 구현의 복잡성을 예측하는 데 유리하다.

2. 개발자와의 소통 효율화

개발자와 원활한 협업을 위해서는 공통 언어를 사용하는 것이 중요하다. CSS의 속성과 원리를 이해하면 개발자와 스타일이나 레이아웃에 대한 대화를 보다 정확하고 효율적으로 진행할 수 있다. 예를 들어, "이 컴포넌트를 Flexbox로 가운데 정렬해 주세요"라는 요청은 개발자에게 명확한 지시가 되어 소통의 오해를 줄인다.

3. 프로토타입 강화

디자인 툴(Figma, Sketch 등)로 작업할 때도 CSS 개념을 적용해 디자인 시스템을 강화할 수 있다. 텍스트 스타일(h1, h2 등), 간격, 색상 등을 CSS 속성에 해당하는 개념으로 정의하면 프로토타입의 정확도가 높아지고, 실제 개발과의 간극을 줄일 수 있다. Figma의 스타일 라이브러리에 CSS의 컬러 변수나 타이포그래피 규칙을 정의해 놓으면 개발 단계에서 디자인이 더 잘 반영될 수 있다.

4. 디자인-개발 핸드오프 과정 효율화

CSS를 이해하고 있으면 디자인에서 개발로 넘어가는 핸드오프 과정이 매우 매끄러워진다. 디자인 시스템에서 정의된 컴포넌트나 버튼의 스타일을 개발자에게 전달할 때, CSS 속성 값(예: 색상, 여백, 글꼴 등)을 명확하게 전달하면 개발자가 디자인 의도를 정확히 이해하고 구현할 수 있다. 이를 통해 팀 내 커뮤니케이션이 효율적으로 이루어지고 결과물의 일관성이 유지된다.

실제 작업 시 참고하면 좋은 링크

1. CSS 기초와 응용에 대한 학습 리소스

• MDN Web Docs - CSS 기본 가이드: 가장 포괄적인 CSS 가이드로, 초보부터 전문가까지 다양한 정보를 제공한다.
• W3Schools CSS Tutorial: 실습하기 좋은 예제와 설명이 포함된 튜토리얼로, 단계별로 따라 하며 CSS의 기본 개념을 익힐 수 있다.

2. CSS 레이아웃 모듈

• Flexbox Froggy: Flexbox의 개념을 재미있게 배울 수 있는 게임으로, 각 레벨을 클리어하면서 Flexbox에 익숙해질 수 있다.
• Grid Garden: CSS Grid의 원리를 게임 형식으로 배울 수 있는 사이트로, 단계별로 진행되므로 CSS Grid를 재미있게 익힐 수 있다.

3. 반응형 웹 디자인과 레이아웃

• CSS Tricks - Flexbox Guide: Flexbox의 모든 속성과 사용 예제에 대해 자세히 설명하고 있는 가이드이다.
• CSS Tricks - Grid Guide: CSS Grid 레이아웃을 사용할 때 참고하면 좋은 완전 가이드로, 그리드 시스템을 이용해 다양한 레이아웃을 구현할 수 있는 방법을 설명한다.

4. 디자인 시스템과 협업 도구

• Figma Design System Documentation: Figma에서 디자인 시스템을 구축하고 유지보수하는 방법을 안내하는 문서로, 프로덕트 디자이너가 시스템을 관리하는 데 유용하다.
• Material Design Guidelines: Google의 Material Design 가이드라인으로, Android UI의 표준을 정리해 다양한 컴포넌트의 스타일 정의에 도움을 준다.

정리

CSS는 프로덕트 디자이너가 반드시 알아야 하는 기술은 아니지만, 알면 협업과 디자인 과정에서 큰 이점을 제공한다. CSS를 이해하면 디자인의 구현 가능성을 예측할 수 있고, 개발자와 원활하게 소통할 수 있으며, 프로토타입과 핸드오프 과정에서 일관된 결과물을 만들 수 있다. CSS는 디자인과 개발의 간극을 줄이는 중요한 다리 역할을 하며, 사용자 경험을 극대화하기 위한 도구이다. 😓

디자인을 할 때 현실적으로 구현 가능한지, 개발자와 소통을 더 잘할 수 있는지 고려하면서 CSS를 익히는 것은 더 나은 제품을 만들기 위한 필수적인 과정이다. 앞으로 CSS의 기초부터 활용법까지 차근차근 함께 익혀가면서 프로덕트 디자이너로서의 역량을 한층 높여보자!! 😝

---

 

다시 본론으로 돌아와서, css의 주요 구성 요소에 대해 정리해보자!

CSS의 주요 구성 요소

CSS는 크게 선택자(selector), 속성(property), 값(value)로 구성된다. 각각이 무엇을 의미하는지 살펴보자.

1. 선택자

선택자는 CSS가 어떤 HTML 요소에 스타일을 적용할지 지정한다.
- 태그 선택자: 특정 태그에 일괄적으로 스타일을 적용한다.
아래의 코드는 모든요소의 글자 색을 파란색으로 지정한다.

p {
  color: blue;
}

 

- 클래스 선택자: 여러 요소에 적용할 수 있는 재사용 가능한 스타일을 정의한다. 클래스는 HTML 태그 내에 class 속성으로 지정된다.
이 클래스는 highlight라는 이름을 가지며, 모든 해당 클래스가 지정된 요소에 노란색 배경을 적용한다.

.highlight {
  background-color: yellow;
}

- ID 선택자: 특정 요소에만 적용되는 스타일을 정의하며, 문서 내에서 유일해야 한다.
main-title이라는 ID가 있는 요소에 대해 글자 크기를 32px로 설정한다.

#main-title {
  font-size: 32px;
}

 

2. 속성과 값

CSS의 속성(property)은 HTML 요소에 스타일을 적용하기 위한 특정 특징을 말하며, 값(value)은 그 속성이 어떻게 적용될지를 정한다.

h1 {
  color: red; /* 글자 색상 */
  font-size: 24px; /* 글자 크기 */
}

 

 

위의 예시는 <h1> 태그에 빨간색 글자와 글자 크기 24px을 적용하는 코드다. 속성과 값이 쌍을 이루어 스타일을 정의한다.

 

✋ CSS에서 주석을 작성하려면 /* 주석 내용 */ 형식을 사용하면 된다. 예를 들어:

/* 이 부분은 주석입니다. 코드의 설명을 작성하는 데 사용합니다 */
body {
  background-color: #f0f0f0; /* 페이지의 배경 색상을 연한 회색으로 지정합니다 */
}

주석은 코드 내에서 설명을 추가하거나 특정 코드를 임시로 비활성화할 때 유용하다.
주석은 웹 브라우저에 의해 무시되므로, 페이지에 영향을 주지 않고 설명을 추가할 수 있다. (코드 작성 중 헷갈리는 부분이 있다면 주석으로 표기해놓자)

 

CSS의 적용 방식

1. 인라인 스타일 (Inline Style)

HTML 태그에 직접 style 속성을 사용하여 스타일을 지정하는 방식이다. 이 방법은 특정 요소에만 스타일을 적용할 때 사용되지만, 코드가 지저분해지고 유지보수가 어렵기 때문에 많이 사용되지는 않는다.

<h1 style="color: blue;">안녕하세요!</h1>

 

2. 내부 스타일 시트 (Internal Style Sheet)

HTML 파일 내의 <head> 태그 안에 <style> 태그를 사용해 스타일을 정의하는 방법이다. 이 방식은 하나의 HTML 문서에만 영향을 미친다.

<head>
  <style>
    p {
      color: green;
    }
  </style>
</head>

3. 외부 스타일 시트 (External Style Sheet)

외부에 CSS 파일을 별도로 만들어 HTML 문서에 연결하는 방법이다. 여러 HTML 파일에서 동일한 스타일을 공유할 수 있어 유지보수와 코드 재사용성 측면에서 가장 많이 사용되는 방식이다.
CSS 파일 (예: styles.css)

h1 {
  color: red;
  font-size: 24px;
}

HTML 파일 (예: index.html)

<link rel="stylesheet" href="styles.css">

 

마무리 요약

오늘 글에서는 CSS의 기본 개념과 필요성에 대해 학습하고, 이를 현업에서 어떻게 활용하는지, 그리고 프로덕트 디자이너로서 CSS를 알아야 하는 이유를 살펴보았다. CSS는 단순히 웹 페이지를 꾸미는 도구가 아니라, 웹 사이트의 일관성, 재사용성, 그리고 사용자 경험을 강화하는 중요한 기술이다. 👍

 

CSS를 이해하면:

• 디자인의 구현 가능성을 더 잘 파악할 수 있고,
• 개발자와의 소통이 원활해지며,
• 프로토타입의 정확성을 높이고,
• 디자인 핸드오프 과정이 매끄럽게 이루어진다.

CSS의 주요 구성 요소인 선택자, 속성, 값을 이해하고, 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트와 같은 다양한 CSS 적용 방식에 대해서도 알아보았다. 이러한 지식은 프론트엔드 개발과의 협업에서 매우 유용하며, 현실적인 디자인을 만들어내는 데 큰 도움을 준다.

 

🍡 학습한 내용을 바탕으로 아래의 퀴즈를 풀어보며, 개념을 한 번 더 복습해보자!
정답은 검정색의 하이라이트 부분을 드래그하면 뜬다.

퀴즈 1: CSS란 무엇인가요?

• (1) 웹 페이지의 구조를 정의하는 언어
• (2) 웹 페이지의 스타일을 정의하는 언어
• (3) 웹 서버와의 통신을 관리하는 언어

정답: (2) 웹 페이지의 스타일을 정의하는 언어

퀴즈 2: 다음 중 CSS의 필요성으로 올바르지 않은 것은?

• (1) 코드의 재사용성을 높일 수 있다.
• (2) 다양한 기기에 맞춘 반응형 웹을 구현할 수 있다.
• (3) 데이터베이스와 연동하여 데이터를 조회할 수 있다.

정답: (3) 데이터베이스와 연동하여 데이터를 조회할 수 있다.
CSS는 데이터베이스와 연동하는 기능을 가지고 있지 않다.

퀴즈 3: 선택자 중 클래스 선택자를 사용하여 특정 요소에 스타일을 적용하려면 어떻게 해야 하나요?

• (1) p { color: blue; }
• (2) .highlight { background-color: yellow; }
• (3) #main-title { font-size: 32px; }

정답: (2) .highlight { background-color: yellow; }
클래스 선택자는 .으로 시작하며 여러 요소에 동일한 스타일을 적용할 수 있다.

퀴즈 4: CSS에서 주석을 작성하려면 어떻게 해야 하나요?

• (1) <!-- 주석 내용 -->
• (2) /* 주석 내용 */
• (3) // 주석 내용

정답: (2) /* 주석 내용 */
CSS에서는 /* */를 사용해 주석을 작성한다.

퀴즈 5: CSS를 활용하여 모든 <h1> 태그의 글자 크기를 24px로 지정하려면 어떻게 하나요?

• (1) h1 { font-size: 24pt; }
• (2) h1 { font-size: 24px; }
• (3) h1 { font-height: 24px; }

정답: (2) h1 { font-size: 24px; }
CSS에서 글자 크기를 지정할 때는 font-size 속성을 사용한다.

 

부트캠프 에서 코딩 수업을 수강중인데, 강의를 듣고 블로그에 내용을 정리하며 복기하니 이해가 훨씬 잘 되는 것 같다. 
갑자기 Framer 툴도 공부해보고싶다는 생각이 들었다. 🧨 디자인 공부는 정말 끝도 없는 것 같다. 

자연스레 몸과 머리가 따라가며 행동했던 디자인 습관 말고 그간 배웠던 것들을 하나씩 복습하며 체계적인 디자이너가 되도록 노력하자.