<1> Prologue
실무에서 사용하는 HTML, CSS 스타일이 궁금하다.
재작년 처음 HTML, CSS 기초 공부를 마치고 "이제 웹사이트를 만들어볼까?!!" 하고 자신감있게 에디터를 실행시켰으나... 어디서부터 어떻게 접근해야할지 망막하기만 했습니다. 주요 태그와 속성들에 대해서는 이해를 했는데 이를 완벽하게 버무리는 경험이 전혀 없었기 때문에 한동안 멘붕 상태에 빠지기 시작했습니다. 당시에는 학원을 다니지 않고 독학으로 공부하는 상황이였기 때문에 물어볼 사람도 거의 없었습니다.
그래서 일단 구글에서 Free HTML Template 를 다운받아서 안에 있는 코드를 하나하나 연구하고 분석해 나가면서 시맨틱 태그와 CSS 속성값의 특징을 잡아나가기 시작했습니다.
이후 지인 회사 홈페이지 작업을 진행하면서 레이아웃에 대한 기초 개념들을 잡아나가면서 실력이 조금씩 향상되기 시작했습니다. 결국 개발 공부 역시 실제 무언가를 만들어보는 것이 가장 빠른 배움의 지름길이라는 걸 깨닫게 되었습니다.
이 글은 현업에서 사용되는 HTML, CSS 스타일을 학습해 보자는 취지에서 연재를 시작했습니다. HTML, CSS 에 대한 기초 지식이 없다면 다소 어렵게 느껴질 수 있기 때문에 생활코딩이나 코드아카데미에서 관련 수업을 듣고 본 글을 읽어봐 주시기 바랍니다. ^^
물론 연재는 웹 표준과 웹 접근성을 고려하여 진행할 계획입니다. 그럼 여기서 얘기하는 웹 표준 & 웹 접근성이 무엇인지 간단하게 살펴보겠습니다.
웹 표준이란 "The power of the Web is in its universality"
웹 표준이란 인터넷을 이용하는 사용자가 Explorer, Chrome Safari, Firefox 등 어떤 브라우저를 사용하더라도 동일한 결과물이 출력되게끔 하는 것을 의미합니다. 기술적으로 표현하면 웹 표준에 적합한 HTML, CSS, JavaScript 코드로 웹 페이지가 완성되었다는 것을 의미합니다.
이러한 웹 표준이 담고 있는 정신(?)은 WWW 창시자인 팀 버너스리의 말에서도 드러나 있습니다.
"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
- Tim Berners-Lee, W3C Director and inventor of the World Wide Web -
한 마디로 웹은 "장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간" 입니다. 이러한 웹 표준과 관련된 이야기는 아래 W3C 공식 문서에서 확인할 수 있습니다.
웹 접근성, "Access by everyone regardless of disability"
웹 접근성이란 쉽게 말하면 웹 접근에 취약한 사람들이 정보를 취득하는데 있어 어려움을 겪지 않도로 배려하여 코딩을 작성하는 것을 의미합니다. 국내에서는 장애인 차별 및 권리구제 등에 의거하여 공공 및 민간 웹 사이트의 웹 접근성 준수가 의무화되었으며, 지침 사항은 아래와 같이 정리되어 있습니다.
화면을 볼 수 없는 시각 장애인을 위해 모든 이미지에는 대체 텍스트를 제공해야 합니다. 이미지없이 대체 텍스트 정보만으로도 이미지 정보와 동일한 내용으로 이해할 수 있도록 제공해야 합니다.
청각 장애인과 고령자를 위해서는 모든 음성지원 콘텐츠에 실시간 자막 또는 음성정버와 동일한 내용의 텍스트 정보를 제공해야 하며, 시각 장애인과 고렬자를 위해 소리없이 화면으로만 진행되거나 자막 등으로만 정보를 제공하는 경우 별도의 텍스트나 음성으로 해당 정보를 제공해야 합니다.
시력이 좋지 않은 고령자나 시각 장애인을 위해 글자와 배경 간의 명도대비와 폰트크기를 충분히 제공해야 합니다.
마우스 사용이 불가능하거나 불편한 상지지체장애인 및 시각장애인 등을 위해 마우스가 없는 상태에서 키보드만으로도 모든 정보 확인 및 기능을 이용할 수 있도록 구현해야 합니다.
시각장애인의 경우에는 '스크린 리더'라는 별도의 소프트웨어를 사용하여 웹 사이트 정보를 음성 또는 점자 형태로 변환시켜 내용을 이해할 수 있습니다. 하지만 텍스트가 아닌 이미지 정보를 만났을 경우에는 이를 변환시킬 수 없습니다. 그래서 되도록이면 소스 코드에 내용을 그대로 담는 것을 권장하며, 부득이하게 이미지를 사용할 경우에는 반드시 그 이미지가 어떤 정보를 담고 있는지 내용을 추가해야 합니다.
<img src=" runDog.jpg" alt="뛰어노는 강아지" >
예를 들어 <img> 를 사용할 경우에는 이미지 내용을 설명하는 반드시 alt 속성값을 반드시 입력해야 합니다.
스크린 리더는 <img> 를 만나면 alt 속성값에 들어있는 정보를 읽어냅니다.
웹 표준 & 웹 접근성 확인하는 방법
Validation Service 를 이용하면 특정 웹사이트 또는 본인이 작성한 HTML, CSS 코드가 웹 표준에 근거하여 제대로 작성되었는지 확인할 수 있습니다.
또는 Firefox 에서 HTML Validator 부가 기능을 설치해서 웹표준 웹접근성 유무를 확인할 수 있습니다.
아직 개발 경력도 길지 않고 실무 경험도 많지 않지만, 실용적인 다양한 케이스를 살펴보면서 제 자신의 역량을 강화시켜나가자는 취지에서 연재를 시작했습니다. 그렇기 때문에 앞으로 연재될 글에서는 제 개인적인 의견이 들어가는 경우도 있기 때문에 이 점 염두하여 읽어주시기 바랍니다.
마지막으로 "실무에서 사용되는 웹스타일" 매거진을 함께 만들어 주실 웹퍼블리셔, 개발자 분들의 참여를 기다리고 있습니다. 주제는 웹 접근성을 고려한 HTML, CSS 작성법, 효율적인 버튼 디자인, 중앙 정렬 방법, 반응형 배경 이미지 삽입 방법 등 웹사이트를 만드는데 자주 사용되는 실무팁을 공유해 주시면 됩니다.
매거진을 함께 만들어주실 분들은 댓글이나 제 페이스북 계정으로 코멘트 남겨 주시면 됩니다. 아 물론... brunch 작가 등록이 사전에 완료되어 있어야 가능합니다. ㅠ.ㅠ
