Content와 Style

IT 서비스 프로젝트를 진행할 때

 

정말 중요하지만

 

너무나도 당연해서

 

그냥 지나치는 개념이 하나 있습니다.

 

 

 

 

바로

 

 

 

'Content(내용)'과 'Style(형식)'에 대한 개념입니다.

 

서로 대립되는 듯 보완해주는 두 개념은 '질료'와 '형상', 'material'과 'form' 등으로 다뤄지기도 하며,

 

오늘 이야기하려 하는 수준을 넘어 심오한 철학적 논의의 대상이 되기도 합니다. 

 

 

 

 

그러나 이번 글에서는

 

IT 서비스의 관점에서 (실질적으로 도움이 되는) '콘텐츠'과 '스타일'의 개념을 다루려고 합니다. 

 

 

 

 

그렇다면,

 

콘텐츠는 무엇을 의미하고, 스타일은 무엇을 의미하는 것일까요?

 

그리고

 

IT 서비스 프로젝트를 진행하는 데, 이 두 개념을 왜 알아야 할까요?

 

 

 

 

먼저 이해하기 쉽게 단순화해서

 

(단순화 한다는 것은 많은 세부 개념을 무시한다는 것이지만..)

 

콘텐츠과 스타일이 무엇인지 설명하면, 다음과 같습니다.

 

콘텐츠  =  단어 또는 문장

스타일  =  글꼴, 글자 크기, 글자색 등

 

 

그리고 

 

 

IT 서비스 프로젝트의 관점으로 조금 (급격하게) 확장해보면,

 

콘텐츠  =  기획자가 작성한 텍스트

스타일  =  디자이너가 디자인한 내용

 

으로 이해할 수 있습니다. 

 

 

보기 쉽도록 예시를 들면,

 

Tistory 블로그의 카드 UI 컴포넌트를 콘텐츠와 스타일의 조합으로 생각할 수 있습니다. 

 

예) 기획자가 작성한 텍스트

예) 디자이너가 디자인한 내용

 

 

즉, 누군가가 블로그 서비스를 개발한다고 하면, 

 

카드 UI 컴포넌트에 제목, 본문 요약 등 처럼 어떤 내용을 넣을지 기획하고,

 

이 내용들을 의미하는 바에 맞게 크기, 색, 위치 등을 적절히 디자인해야 합니다.

 

 

즉, 위 예시에 설명을 더해보면, 아래와 같습니다.

 

예) 기획자가 작성한 텍스트 설명

 

예) 디자이너가 디자인한 내용 설명

 

 

그렇다면

 

이렇게 길게 콘텐츠와 스타일에 대한 개념을 이야기 했는데,

 

어째서 IT 서비스 프로젝트를 진행하는 데, 이 두 개념을 알아야 할까요?

 

 

프로젝트를 보다 효율적으로 진행하기 위해서입니다. 

 

 

모든 경우에서 콘텐츠와 스타일이 완벽하게 구분될 수는 없지만,

 

많은 경우 제대로 구분해서 생각하면, 일을 보다 효율적으로 처리하는 데 도움이 됩니다. 

 

(물론 작은 프로젝트에서는 오히려 구분하는 것이 불필요할 수도 있지만..)

 

 

 

아래 두 예시를 비교해보면

 

어떤 부분에서 효율적인지 생각하기 쉽습니다. 

 

예) Figma로 본 콘텐츠와 스타일이 분리된 정도 비교

좌측의 경우 콘텐츠와 스타일은 구분되지 못한 상태로

 

각 콘텐츠는 스스로 스타일(Noto Sans, 14pt, Bold, #000000, ...)을 갖고 있습니다.

 

반면

 

우측의 경우 콘텐츠와 스타일이 구분된 상태로

 

각 콘텐츠는 별도의 스타일(Subtitle 2, BASIC-BK)과 연결되어 있고,

 

이 스타일들이 실제 데이터(Noto Sans, 14pt, Bold, #000000, ...)를 갖고 있습니다.

 

 

 

 

두 방식 모두 실제 보여지는 콘텐츠는 동일하지만

 

작업하는 과정 또는 수정하는 과정에서의 효율성에는 차이가 발생합니다.

 

 

하나의 UI 요소가 여러 개 사용되는 경우나

 

하나의 스타일이 서비스 전체에 걸쳐 사용되는 경우

 

이를 수정해야 한다고 할 때

 

 

콘텐츠와 스타일이 구분되어 있지 않다면, 

 

콘텐츠 하나하나 마다 스타일을 수정해야 하지만

 

 

콘텐츠와 스타일이 잘 구분되어 있다면,

 

스타일만 수정하면 되기 때문입니다.

 

(이러한 문제는 Component와 Instance 에서 본격적으로 ...)

 

 

 

 

디자이너가 사용하는 Figma의 예시 외에

 

개발자의 관점에서도 '콘텐츠'와 '스타일'의 구분은 중요합니다.

 

위 Figma의 예시를 활용해 

 

간단한 퍼블리싱 예를 들어보면 아래와 같습니다. 

 

// 콘텐츠와 스타일이 구분되지 않은 경우

<div class="blog-card-ui">
    <img class="thumbnail" src="../thumnail.png" />
    <p class="category" style="font-family: noto sans; font-size: 14px; font-weight: 700; color: #000000;">
      모르는 것과 친해지기
    </p>
    <p class="content" style="font-family: noto sans; font-size: 16px; font-weight: 500; color: #646464;">
    	초등학교 6학년, 친구들 사이에서 홈페이지를 만드는 것이 유행했던 적이 있었습니다.(사실 그것은 홈페이지가 아니고 블로그와 카페였지만..) 그때 처음으로 웹사이트가 무엇인지에 대해 의문을 품었던 것 같습니다. 그리고 이러한 의문은 대학교를 졸업할 때까지 제대로 풀리지 못했습니다.
    </p>
 </div>

 

// 콘텐츠와 스타일이 구분된 경우

<style>
  .category {
    font-family: noto sans; font-size: 14px; font-weight: 700; color: #000000;
  }
  .content {
    font-family: noto sans; font-size: 16px; font-weight: 500; color: #646464;
  }
</style>

<div class="blog-card-ui">
    <img class="thumbnail" src="../thumnail.png" />
    <p class="category">
      모르는 것과 친해지기
    </p>
    <p class="content">
    	초등학교 6학년, 친구들 사이에서 홈페이지를 만드는 것이 유행했던 적이 있었습니다.(사실 그것은 홈페이지가 아니고 블로그와 카페였지만..) 그때 처음으로 웹사이트가 무엇인지에 대해 의문을 품었던 것 같습니다. 그리고 이러한 의문은 대학교를 졸업할 때까지 제대로 풀리지 못했습니다.
    </p>
 </div>

 

이렇듯

 

콘텐츠와 스타일을 구분하는 것은 작업의 효율성 측면에서 분명 장점이 있으나

 

이 '효율성'은 UI 요소의 사용 빈도나 프로젝트의 규모에 따라 언제든지 바뀔 수 있다는 점을 명심해야 합니다.

 

이번 글에서의 예시도 

 

보여주기 쉽도록 만든 것이고, 

 

실제 IT 서비스 프로젝트를 진행해보면 콘텐츠와 스타일을 구분하는 것이 항상 명확한 것이 아니기도 하고,

 

생각보다 어려운 부분이기도 합니다..

 

 

그래서 

 

크레이그리스트 같은 사이트는 스타일을 철저하게 배제하고

 

콘텐츠만을 제공하기도 합니다. 

 

craigslist: seoul jobs, apartments, for sale, services, community, and events