brunch

라이킷 86 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 고코더 Jul 06. 2021

CSS라는 SPA 브랜드

CSS가태그로부터분리되다.

SPA 브랜드, 오트쿠튀르

1986년 미국의 의류 브랜드 GAP은 기획, 생산, 유통을 직접 맡아서 판매하는 "SPA 브랜드"가 탄생합니다. 이러한 방식은 패스트패션(fastfashion)이라는 단어로 쓰이기도 합니다. SPA의 최대 장점은 속도입니다. 트렌드가 될만한 아이템을 기획한 후에 2~3주 안에 전 세계 매장에 출시하게 됩니다. 그리고 또 하나의 장점은 보편성입니다. 개개인에 꼭 맞는 옷을 생산하기보다는, 대중적인 디자인과 사이즈를 다품종 소량으로 생산하고, 소비자가 옷을 구매하는 방식입니다. 이렇게 만들어진 SPA 브랜드는 소비자의 신체 사이즈를 재지 않고, 누구에게나 잘 어울릴만한 디자인의 옷을 만들어 냅니다. 이를 다른 말로 '기성복'이라고 표현하기도 합니다.

오트쿠튀르(Haute Couture)은 상류층을 위한 맞춤을 만드는 의상점입니다. SPA와 다른 성향의 옷이라고 할 수 있습니다. 파리 의상 조합(federation francaise de la couture)에서 지정한 기준에 맞는 규모와 조건을 갖춘 의상 제작점에서 만들어지는 옷입니다. 여기서 제작되는 옷은 특급 VIP들을 위해 개성 있는 의상을 제작합니다. 특별한 한 사람을 위한 옷이 만들어지던 역사가 깃든 패션 형태입니다.

최초의 HTML이 입던 옷은 "맞춤복"

HTML은 디자인 요소가 필요하지 않았습니다. 정보를 보여주기 위한 플랫폼이라고 지난 시간에 설명했습니다. 그런데 사람의 욕심은 끝이 없어서, 예술성을 발휘하기 시작했습니다. 그래서 고안한 방법은 맞춤복을 만드는 방법이었습니다. 그때그때에 맞는 옷을 만들어 입히면 어떨까라는 생각을 합니다. 처음에 생각한 방법은 바로 태그를 이용한 방법이었습니다.

<font color="blue" > CSS </font>

여기 "CSS"라는 글자가 있습니다. 아무런 디자인도 존재하지 않는 순수한 HTML 상태입니다. 여기서 맞춤복을 한번 주문해보겠습니다. 파란색으로 색상을 바꾸고 싶습니다. <font>라는 요소를 글자 사이에 넣어놓습니다. 그리고 컬러(color) 색상은 파란색인 "blue"를 줍니다.

결과 화면은 이렇습니다. 다소 심심해 보이던, 검은색 글자가 파란색으로 변했습니다. 맞춤복의 특성상 한 사람을 위해 만들어집니다. <font> 태그 역시 하나의 텍스트 만을 위해 만들어졌습니다. 그러므로 해당 글자의 색상만 바꿔놓을 수 있습니다. 특별한 서비스도 좋지만 변경해야 하는 대상이 많아진다면, 복잡한 태그들이 난무하는 웹사이트가 될 수 있다는 단점도 존재합니다.

CSS를 위한 기성복, SPA 브랜드

그래서 사람들은 생각합니다. HTML을 입힐 수 있는 누구나 쉽게 사용하고, 보편적으로 사용할 방법을 고민합니다. 그래서 HTML과 디자인 요소를 분리하고자 합니다. 새로운 문법을 가진 새로운 디자인 언어 체계인 CSS를 만들어 냅니다. 더 이상 복잡하고, 재사용하기 어려운 디자인 태그를 사용하지 않고 SPA 브랜드처럼 보편적인 디자인 방식이 사용됩니다. 일정한 기준으로 미리 만들어 놓고 원할 때 판매 가능한 기성복처럼 말입니다.

<style type="text/css">
p {
color: blue;
}
</style>

앞에서 태그를 사용한 방식을 CSS로 문법으로 표현했습니다. 이렇게 하면 매번 글자 색을 바꾸지 않아도 <p> 태그를 사용할 때마다. 자동으로 글자색은 빨갛게 표현됩니다. SPA 매장에 가서 미리 만들어 놓은 옷을 구매하여 바로 입을 수 있는 것처럼, CSS라는 기성복을 준비하고 원하는 태그와 요소들이 가져다 쓸 수 있게 만들어 놓게 됩니다.

정보와 디자인의 분리

CSS가 분리된 이후 웹 언어의 디자인은 눈부신 발전을 이루어냅니다. 그리고 빠르고 신속하게 사이트를 만들어 낼 수 있게 됩니다. 저는 SPA 브랜드를 굉장히 좋아합니다. 저렴한 가격에 유행에 맞는 옷이 준비되어 있습니다. 카드를 들고 디스플레이된 옷을 고르면 됩니다. CSS가 HTML과 분리된 이후로 우리는 옷을 만드는 것만 할 수 있게 되었습니다. 전에는 태그 사이에 맞춤형 디자인을 끼어넣어야 했습니다. HTML 개발과 동시에 이루어져야 했지만 이제는 CSS 문법을 활용해 코딩에 집중할 수 있게 되었습니다.