좋은 퍼블리싱 하기
좋은 글이있어서 퍼온다.
개인적으로 퍼블리싱이나 퍼블리셔와 같은 단어가 가진 묘한 차별? 을 좋아하지는 않지만, HTML 과 CSS를 통한 화면 구성작업을 가장 명확하게 표현하는 단어이기에 “좋은 퍼블리싱 하기”라는 제목으로 퍼블리싱(화면구성)에 대한 경험을 공유해보겠습니다.
지난 2년간 프론트 엔드를 중점적으로 개발을 해오면서 느끼고 경험한 나름의 노하우입니다.
HTML5와 AJAX의 등장으로 웹이 점점 어플리케이션화 되고 있는것이 추세이지만 웹페이지의 본질은 결국 전자상의 문서이고 문서는 정보를 효과적으로 잘 전달하는 것이 핵심입니다.
즉, 문서를 꾸미기 전의 문서만으로도 충분히 원하는 정보를 무리 없이 전달하는 것이 중요합니다.
이말은 마크업, 즉 CSS와 Javascript를 제외한 상태의 HTML만으로도 완벽하게 의미 전달이 되어야 함을 의미합니다. CSS, Javascript는 화면을 구성함에 있어서는 단지 거드는 존재여야합니다. 마크업은 페이지를 구성하는 뼈대가 되며 마크업이 잘 구성이 되어 있어야 CSS, Javascript를 통한 풍부한 화면 구성이 쉽게 진행이 됩니다.
뿐만아니라 논리적으로 잘 구성된 마크업은 웹접근성의 문제도 매우 간단하게 해결할수 있습니다.
우리 나라 최고의 IT기업중 하나인 네이버도 마크업을 전문적으로 다루는 자회사가 있을 정도로 매우 중요하지만 여전히 그 중요성이 실무에서는 매우 가볍게 치부되는경우가 많습니다.
그럼 웹의 가장 핵심이 되는 마크업에 대해서 그동안 개발하면서 배우고 경험한 경험기를 차근차근 정리해 나가 보겠습니다.
- 마크업 하기전에 구조부터**
마크업을 하라고 하면 일단 냅다 div부터 찍고 시작하는 사람이 참.. 많습니다.
에디터를 열어 태그부터 찍기보다는 일단 디자이너가 전달해준 페이지의 레이아웃을 모듈화하는 작업을 먼저 해보시기 바랍니다. 모듈화라는 말은 기능 단위로 혹은 속성단위로 묶어서 표현하는것입니다. 요즘 유행하는 Angular나 React를 접해보신 분이라면 이부분에 대해서 이해하실수 있습니다.
일단 시작하기 전에 전체 페이지에서 공통으로 사용되는 부분, 그리고 페이지 별로, 그 페이지 내에서도 속성이나 기능별로 나눠서 구조를 잡아두면 CSS를 구조화하는데도 이 마크업 구조대로 만들면 되기때문에 매우 유용합니다.
뭔가를 할때 일단 컴퓨터로 코드부터 찍는 습관보다는 종이와 연필이나 자신이 편한 방법으로 큰 그림을 그리는 시간에 투자하는 것이 추후에 개발, 유지, 보수의 측면에서는 훨씬 시간을 절약하는 방법입니다.
- Reset CSS**
크롬브라우저에서 실컷 레이아웃을 잡아 두고 다른 브라우저에서 해당 페이지를 보면 레이아웃이 깨지는 경우가 있습니다. 이는 브라우저별로 각 태그에 기본적으로 적용된 CSS 속성이 다르기 때문입니다.
http://meyerweb.com/eric/tools/css/reset/
이곳의 코드를 복사해서 가장 root 역활을 하는 css의 최상단에 정의 해두고 시작하는것을 권장드립니다.
- 시멘틱 마크업**
HTML5가 나왔을때 대부분의 많은 개발자들이 처음 접한것이 시멘틱한 태그입니다. 기존에는 쓸만한 태그가 div, span ,p , h1~h6 정도가 화면을 구성할때 사용한 태그의 거의 전부 였습니다. 솔직히 저 네가지로도 화면을 구성하는데 어려움이 전혀 없습니다. 아니 div 하나로도 사이트 레이아웃을 짜는데는 아무런 문제가 없습니다.
하지만 앞서도 이야기 했지만 논리적인 마크업을 구현하기 위해서는 내용과 그 내용을 둘러싼 마크업이 얼마나 서로를 논리적으로 설명할수 있는지가 중요합니다.
위와 같은 코드도 화면안에서는 충분히 리스트로 표현이 가능합니다. 그러나 내용과 그를 감싸고 있는 태그사이의 논리성이 전혀없습니다. 내가 리스트의 엘리먼트를 나타내고 있다면 태그로 리스트의 엘리먼트를 표현하고 있음을 먼저 전달해야합니다.
CSS나 javascript를 통한 표현은 그 다음의 문제입니다. 이를 위해서는 시멘틱 마크업이 반드시 필요한 부분입니다.
http://www.w3.org/TR/html-markup/elements.html
W3C에서 제공하는 테그의 정의 입니다. 마크업을 시작하기전 우선 해당 태그가 어떤 정보를 전달하기 위해 존재하는지 우선 확인해보심이 좋습니다.
사례>
1) **a태그와 button태그의 혼용
- a태그를 버튼처럼 스타일일 줘서 마치 버튼처럼 동작하게 하려고 하는 경우가 있습니다.
a: 하이퍼링크.
button : submit, reset, button의 역활.
둘은 분명 다른 목적으로 존재하고 있습니다.
2) **Table 태그의 적극적인 사용
- 예전에는 table 태그 하나를 가지고 웹페이지 전체의 구조를 잡았던 적이 있었다고 합니다. 저는 두번인가 봤습니다. 언제 부터인가 table을 사용한 마크업이 올드한 스타일이라는 개념이 생기고 나서 table태그 사용을 극도로 꺼리는 모습을 종종 봅니다.
마크업의 핵심은 내가 전달하고자 하는 컨텐츠에 초점을 맞춰야합니다. 디자인은 그 다음입니다.
컨텐츠를 먼저 보고 이 컨탠츠가 table태그로 표현해야하는 부분이라면 주저하지 마시고 사용하세요. 제대로 사용한 table태그는 훨씬 논리적인 마크업을 보장합니다.
3)** 태그의 오용 피하기
- 예를들면 br 태그의 W3C문서상에서의 설명은 “line break” 입니다. 즉 문서상에 다음 줄로 넘어가겠다는 의미입니다. 그러나 레이아웃을 구성하는데에서 br태그를 엘리먼트간의 공간을 만들기 위한 방법으로 많이 사용합니다. 공간을 표현하는 것은 태그가 아니라 CSS가 해야하는 역활입니다. 공간이 필요하다면 CSS의 margin이나 padding을 사용하셔야 합니다.
※ 시멘틱 마크업에 대한 내용은http://www.w3c.or.kr/Events/html5/html5/Best_Practice_of_HTML5_Semantic_Markup.pdf 를 참고 하세요.
- 역활분리**
일명 관심사 분리라는 말로 통용되고 있는 내용입니다.
HTML : 정보와 그 정보의 의도를 태그로 전달하는것.
CSS : 잘 구성된 HTML 구조를 보기 좋게 꾸미는것.
Javascript : 다이나믹한 웹을 구현.
이 세가지를 지킨다면 코드의 가독성이나 유지보수가 매우 쉬워집니다. HTML 테그안에 스타일 인라인으로 스타일이나 스크립트 코드를 작성하는 일은 일단 지금 당장 동작하는 페이지를 만들기는 쉽지만 나중에 그 코드를 관리하기 위해서 드는 비용은 몇 배로 더 들게 되는 경우가 있습니다.
또한 i, b, font 같은 표현을 위한 마크업은 사용을 피하시고 무언가를 표현하고자 할때는 CSS를 통해서 구현하는 것이 좋습니다.
그런데 이 내용도 React나 Angular의 등장으로 조금 다시 생각해볼수 있는 부분입니다. 이러한 프레임워크가 등장하면서 관심사 분리라는 개념을 다르게 해석하는 분들이 계십니다. 실제 리엑트를 만든 개발자도 이부분에 대해서 언급을 했습니다. 이 내용은 추후에 다뤄보도록 하겠습니다.
- 태그의 속성 제대로 사용하기**
이는 개인적으로 정의를 내린 부분이라 제가 권장하는 방법입니다. 태그의 속성에는 크게 id, class, data-* 등 공통적으로 사용되는 속성은 물론 href, target, action등 특정 태그에서만 사용이 되는 속성이 있습니다.
class : 오직 CSS 정의를 위해서만 사용.
id : Javascript와의 인터렉션만을 위해 사용.
data-* : 태그가 감싸고 있는 내용과 태그의 논리와 정보를 보충하기 위해서 사용.
이외에 태그별 고유 속성인 title, alt등은 컨탠츠만으로 부족한 내용을 보충해주는 역활을 하기에 반드시 사용해주는 편이 좋습니다.
- 태그사용을 최소화 하기**
원하는 레이아웃을 구현하기 위해 div를 div로 감싸고 그안에서 또 div를 사용하고 하는 의미없는 div의 중첩을 통한 레이아웃 구성을 피해야합니다. 최소의 태그로 효율적으로 페이지를 구성하는것도 중요한 능력입니다.
예전에 읽었던 글중에 마크업을 3뎁스로 해당 컴퍼넌트를 구성하는 것이 능력이라고 하는 글을 본듯한데.. 그것보다는 필요하면 쓰는게 맞는거 같고 3뎁스이던 10뎁스이던 뎁스가 중요하다기 보다는 반드시 필요한 만큼의 테그로 구성하는 것이 핵심이 아닐까 생각합니다.
- 한줄로 계속 늘여쓰기 피하기**
CSS나 HTML을 작성할때 아래와 같이 작성하는 경우가 있습니다.
body{background-color:#dddddd; color:#1e1e1e; padding:10px 0 10px 10px; margin:20px 20px 10px 5px;}
위와 같이 한줄에 모든 속성이나 자식 엘리먼트를 나열하여 작성하는 경우가 있습니다. CSS를 압축하면 위와 같은 형태로 만들어 줍니다.
압축은 애초에 사람을 위한 것이아니라 컴퓨터를 위한 작업입니다. 사람이 컴퓨터도 아니고 다른사람을 위해서라도 가독성을 보장해줘야합니다. 압축은 나중에 다 구현이 된 다음 하면 되는 부분입니다. 위코드는 아래와 같이 만드시는 것을 권장합니다.
body{
background-color:#dddddd;
color:#1e1e1e;
padding:10px 0 10px 10px;
margin:20px 20px 10px 5px;
}
훨씬 읽기 쉽고 관리하기도 쉽습니다. 사람이.. 한줄에 하나씩..
- 한세트로 제공이 되는 태그는 같이 사용하기**
table 세트
table ,cation, colgroup, col, thead, tbody, tfoot, tr, th, td
alticle 세트
header , h1~h6, p
기본적으로 하나의 세트로 묶인 태그들이 있습니다. 이런 경우라면 왠만하면 하나의 세트로 다 사용하는 것이 좋습니다.
- 탑다운 방식의 마크업**
일단 가장 최신의 브라우저를 대상으로 마크업과 CSS를 모두 작성하고 최신 브라우저에도 완벽하다고 판단이 되면 버전을 하나씩 아래로 내리는 방법입니다. 특히 우리나라의 경우 IE… 하.. 예전 버전의 IE를 사용하는 경우가 많이있습니다. XP를 아직 사용하는 곳도 있으니까요.. 하… 한IE8까지만 크로스브라우징을 잡으세요. 딱 정신건강에 해를끼치지 않는 수준입니다.
저는 일단 크롬으로 페이지하나를 만들고 나면 해당 페이지를 파이어 폭스, 사파리, IE 순서로 테스트를 합니다. 페이지 단위로 하세요.. 한번에 모든 페이지를 테스트하면 귀찮습니다.
보통은 레이아웃은 IE8까지는 별로 문제되는 경우가 없었습니다. 물론 잘짜여진 구조에서는요.. 하지만 javascript는 조금 신경을 써야하지만 일단은 퍼블리싱에 관련된 글이기에 이부분은 건너뛰겠습니다.
- 웹접근성 제공하기**
웹접근성은 가장 기본이 논리적인 마크업과 필수 속성의 사용입니다. 물론 약시인분들 이나 다른 불편함을 느끼시는 분들을 위해서는 색사용이나 다른 여러 처리가 있지만 가장 기본은 논리적인 마크업입니다.
대한민국의 시각장애인 분들의 대부분이 사용하는 센스리더의 경우에는 웹페이지를 하나의 문서로 인식해 위에서 부터 차례로 읽어 나갑니다. 물론 CSS가 제거된 상태로 말입니다.
즉, 논리적으로 짜여진 HTML이라면 일단 컨텐츠를 읽는데는 전혀 문제가 없습니다. 액션이나 스타일은 그 다음 문제입니다.
“자신의 불편함이 차별이 되어서는 안된다.”
제가 웹접근성 작업을 진행하면서 들었던 말입니다. 웹접근성의 가장 기본은 논리적인 마크업임을 다시한번 강조 드립니다.
일단 이 정도로 정리를 마치겠습니다. 이 문서는 계속 추가해가도록 하겠습니다.