프로젝트 진행 시 유의점. (프로젝트 방법론)
1. 프로젝트의 성격 파악
어떠한 프로젝트 이던지 일단 그 프로젝트가 어떠한 프로젝트 인지 알 필요가 있다.
사용자 층은 어떻게 되는지 환경은 어떻게 되는지 프로젝트의 최종 목적은 무엇인지.
퍼블리셔는 이 부분을 간과해도 된다고 생각하는 경우가 많다.
왜 프로젝트에 대해 파악이 필요한지 얘기해보자.
먼저 UI(user interface)에 대해서 얘기해보자 UI는 말 그대로 사용자와 웹 사이트가 의사 소통을 할 수 있는 유일한 수단이다.
만약 이 UI에 문제가 있다면? 즉 의사소통을 제대로 할 수 없다는 것이다. 웹 사이트를 잘 사용 할 수 없다면 그건 그냥 한 장의 이미지일지도 모른다.
이 UI는 프로젝트 설계 단계에서부터 진행된다.
UI설계에 있어서 어떠한 점이 고려 되어야 할까? UI뿐만 아니라 모든 기획 마케팅 등에서도 마찬가지이지만 사용자계층(연령, 성별, 등등) 및 목적 등을 고려 한다. UI도 이처럼 목적에 사용자에 따라 고려되어야 하는 부분이 많다. 모든 UI는 사용자 경험을 필요 하게 된다. 익숙한 UI와 익숙하지 않은 UI 흔한 예로 포털 사이트와 같이 많은 연령층이 사용하게 되는 경우 쉽고 빠르고 친숙한 UI로 되어있지만 영화 프로모션 사이트 등 사용자 층이 얇거나 특정 UI에 익숙한 사람들이 사용하게 되는 사이트는 다소 독특하고 발랄한 UI로 되어있는 경우가 있다. 만약 포털 사이트가 영화 프로모션 사이트 같은 UI를 가지고 있다면 그건 0점 자리 UI다 라고 말 할 수 있겠다.
이처럼 UI는 웹사이트와 의사소통을 유일한 수단이며 프로젝트 성격에 따라 충분한 사용성과 접근성을 가진 UI가 필요하다.
둘째로 사용자 환경과 서버(?) 환경에 대한 분석이 필요하다
프로젝트가 서비스 되는 지역과 그곳에 환경, 사용자분석이 필요한 이유는 지역별 인터넷 환경과 PC환경 등 기계적인 환경과 학생, 직장인, 노인, 장애인 등 비 기계적은 환경의 차이에서 오는 문제로 인하여 분석이 필요한 것이다. 아직 56k모뎀을 통하여 전화접속으로 웹에 접근하는 곳도 있고 노안, 색맹, 약시, 거동이 불편한 자 등 다양한 사용자 환경이 있다. 아직 흑백 모니터가 대중화된 곳이거나 시각적으로 장애가 있는 사람들에게는 충분한 명암비를 가지는 구성이 되어야 할 것이고, 네트워크가 느린 지역에서는 일종의 제약 사항이 발생하는데 이는 퍼포먼스 측면에서 접근을 하면 된다. 최소한의 용량과 요청 횟수로 빠른 접근이 가능 하게 해야 할 것이다.
다양한 사용자 환경분석으로 사용자 중심의 웹이 되어야 할 것이다.
2. 프로젝트의 설계
프로젝트에 대한 분석이 완료 되었다면 이제 프로젝트 설계를 진행 하여야 한다.
프로젝트 성격에 따라 문서타입, 인코딩, 지원기기, 환경 등을 고려하여 설계한다.
A. 문서타입과 CSS
문서타입에는 다양한 종류가 있지만 현 시점에서 가장 대중적인 문서타입은 HTML 4.01, XHTML 1.0, HTML5 정도라고 할 수 있겠다.
적절한 문서 타입의 선정은 프로젝트에 따라 다르겠지만 일반적인 선정 기준은 지원 브라우저의 상, 하위 호환성과 데이터 형태로 크게 나눌 수 있겠다. XHTML의 경우 XML의 문법을 사용한다고 알려져 있는데 이는 결국 XHTML페이지가 데이터 형태로 제공을 하자는 의미를 가진다. 현재 그 의미가 많이 퇴색 되었지만 여전히 XHTML이 가지는 의미는 크다.
데이터형태의 콘텐트가 아니라면 보통 HTML4.01을 사용하게 되며 가장 많이 쓰는 문서 타입이다.
HTML5의 경우 현재 모든 브라우저가 완벽하게 지원하고 있지는 않다 하지만 대부분의 주요 기술들은 지원하는 브라우저가 늘어나고 있으며 지금 바로 구현하는 것도 큰 무리가 아니다 현재 모바일 사이트의 경우 실제로 많이 사용되고 있다. 대중적인 모바일 브라우저의 경우 대부분 HTML5를 지원하고 있기 때문이다. 그러나 현재 IE(8.0이하)는 HTML을 지원하고 있지 않기에 국내에서는 HTML5의 사용은 어려운 점이 있다.
CSS는 현재 2버전과 3버전이 있다. CSS3는 HTML5와 마찬가지로 아직 도입단계라고 할 수 있겠다 물론 지금도 국내외에서 CSS3를 이용한 사이트를
볼 수 있다. 단지 IE(8.0이하)에서는 지원하는 것이 거의 없기 때문에 HTML5와 마찬가지로 적극적인 사용은 어려움이 있다.
그래서 현 시점에서는 CSS 2.1버전의 사용이 대중적이다.
B. 인코딩 타입 선정
인코딩 타입은 컴퓨터가 인지하는 부호 방식이다. 대중적으로 크게 두 가지 분류가 있다 언어별 인코딩과 유니코드가 있다.
언어별 인코딩은 언어에 따라 다른 인코딩을 가지고 있다. 국내에서는 euc-kr이 한글 완성형 인코딩으로 대중적으로 사용되고 있다.
유니코드는 언어와 관계 없이 전 세계의 모든 문자를 표현 할 수 있게 설계된 인코딩이다. 즉 어떠한 언어를 쓰는 국가에서든 기본적으로 각 국가의 언어를 볼 수 있게 된다. Euc-kr로 작성된 글은 해당 언어가 PC에 설치 되지 않으면 읽을 수가 없게 된다. 하지만 유니코드는 전세계 언어를 담은 표준 방식임으로 정상적으로 출력이 가능하다.
프로젝트 내에서 다양한 언어가 필요하다만 가급적 유니코드를 추천한다 그리고 개인적으로도 모든 프로젝트를 가급적 유니코드를 권장한다 하지만 한글을 표현함에 있어서 유니코드는 3바이트가 필요하고 euc-kr은 2바이트가 필요하다 그만큼 데이터의 용량 또한 증가하는 부분이 있다.
C. 지원환경
지원환경의 경우 프로젝트 설계 시 꼭 논의 되어야 할 부분 중 하나다. 지원 브라우저, 지원 기기 등 많은 고려 사항이 필요하다.
하지만 본 글에서 이 부분에 대해서는 제외하겠다.
D. 해상도
웹사이트의 적절한 해상도는 몇일까? 아직도 적절한 해상도는 이것이다 라고 정확히 얘기 할 수 있을지는 모르겠다. 해상도가 가지는 의미는 생각보다 매우 크다 해상도는 결국 한 화면에서 얼마만큼의 데이터를 보여 줄 수 있느냐가 결정 나기에 사용성, 접근성은 물론이거니와 마케팅적인 측면 등등 의미하는 것이 많다.
//*웹사이트에서 사용자의 시선이 가장 많이 머무는 곳은 주요 메뉴와 큰 모션이나 이미지가 있는 곳에 많이 머물게 된다. *//
사용자 해상도보다 웹사이트의 해상도가 월등히 높을 경우 사용자가 모든 콘텐트를 보려면 많은 불편함이 있다 스크롤 등을 통하여 보게 되는데 매우 불편하게 될 뿐 아니라 집중도 또한 떨어지게 된다 한번에 다 파악을 할 수 없기 때문이다. 예를 들자면 한 페이지에 한 줄만 나오는 책이 있다고 하자 아마 손이 매우 아픈 책이 되지 않을까 싶다 좀 전의 내용을 다시 읽으려면 한참을 이전 페이지로 넘겨야 할 것이고 계속 페이지를 넘겨야 한다면 집중도가 떨어질 뿐만 아니라 매우 불편한 책이 아닐까 싶다.
이처럼 사용자의 사용성에 있어서도 문제가 있지만 마케팅 측면에서도 큰 의미를 가진다 실제적 통계로 보면 스크롤이 있는 페이지의 경우 사용자의 시선이 스크롤 하단 부분과 상단 부분을 나눴을 때 월등히 상단 부분이 높다 즉 그만큼 사용자에게 노출이 많이 되는 것이다 마케팅 적인 측면에서 많은 의미를 가진다.
그럼 과연 이처럼 중요한 해상도가 가장 적절한 해상도는 몇일까? 답은 없을지도 모르겠다 사용자 환경이라는 것이 매우 다양하기에 모든 사용자 환경을 충족시키기에는 매우 어렵기 때문이다. 하지만 현실적인 최적의 해상도는 있다. 서비스되는 지역 등 환경을 분석하여 가장 많이 사용되는 해상도를 지원하는 것이 가장 현실적인 해상도라고 할 수 있겠다. 국내 실정으로는 1024 x 768 해상도가 가장 많이 사용되고 있다.
E. 작업환경
작업환경은 분업과 협업에 따라 다르게 구성이 되고 서버 환경 및 프로젝트 성격에 따라 달라진다.
개인적으로 협업시 주의 할 점이 있다. 협업을 할 시에 퍼블리싱 작업을 할 경우 공통된 HTML, JS, CSS 등 동일한 파일을 많이 사용하게 된다. 작업자가 많이 지게 되면 각 개인별로 마크업 형태 라던지 네이밍이라던지 각자의 스타일대로 작업하게 되는데 이는 매우 좋지 않은 방법이라고 할 수 있다.
한 프로젝트 내에 다양한 형태의 마크업 스타일이 있다면 재 가공 하기에도 매우 힘들뿐 아니라 본인이 아닌 다른 작업자가 수정 보완하기에는 분석이 필요하기 때문에 매우 불편하며 그 외 여러 가지 측면에서 비 효율적이다. 그렇기에 협업을 할 시에는 공통된 가이드 형태가 필수적으로 필요하다고 생각된다.
공통된 가이드에는 크게 네이밍 가이드, workspace, 디렉터리 구조, 인코딩 타입 등 이러한 공통된 가이드가 필요하다.
형상관리와 협업
형상관리는 프로젝트를 좀더 효울 적으로 진행 할 수 있게 해준다 오류 사항이 생겼거나 이전 버전이 필요하게 될 시에 버전관리를 통하여 쉽게 재 이용, 가공이 가능 해진다 협업시 공통된 파일을 진행하게 되면 그 파일을 합치거나 각자 한 파일을 저장시 매우 불편하다.
이를 편리하게 해주는 형상관리 시스템 몇 가지를 소개한다. SVN과 CVS가 있다 SVN, CVS는 소스 관리에 매우 편리한 기능을 제공한다. 버전관리는 물론 좀 더 업무를 효율적으로 진행 할 수 있는 기능들이 많이 있다.
자세한 사항은 WIKI를 활용 하길 바란다(http://ko.wikipedia.org/wiki/서브버전)
3. 프로젝트 구현
HTML 마크업
HTML마크업은 표준 마크업, 의미론적 마크업 두 가지에 대해서 얘기 할 수 있다.
표준 마크업이란 W3C에서 제정한 HTML 표준이 있다. 비 표준 마크업은 각 브라우저 별로 제작사가 각자의 브라우저에 고유하게 인식 할 수 있는 표준 이외의 방식을 사용한 마크업이다. 표준 마크업이 중요한 이유는 표준이라는 것에 큰 의미가 있다. 세상에는 많은 표준들이 있고 그 표준이 생겨난 배경을 보면 HTML마크업도 왜 표준을 따르는 것이 좋은지 같은 맥락에서 이해 되리라 본다.
의미론적 마크업이란 HTML의 각 요소들은 각각의 의미를 가지고 탄생 되었다 그 각각의 의미에 맞게 마크업을 의미론적 마크업이라 할 수 있다.
의미론적 마크업은 이미 부여된 의미를 가지고 있기에 기계적으로 해석이 가능하며 그 의미론적 마크업을 통하여 정확한 정보의 획득을 할 수 있게 합니다. 이는 화면 낭독 프로그램 및 정보의 제 가공 측면에서 매우 유용하게 작용 합니다. 또한 의미론적 마크업은 논리적인 마크업과 같은 맥락을 가지고 있습니다.
논리적인 마크업이란 말 그대로 논리적인 구성을 통하여 논리 있는 문서를 만드는 것에 목표이며 이를 통하여 논리적인 정보 전달에 목적이 있습니다.
논리적인 마크업은 한 장의 문서를 생각하면 쉽게 이해가 됩니다. 문서에는 제목이 있고 이에 대한 내용이 나오게 됩니다. 개요가 있고 제목이 있고 내용이 있습니다 논리적인 구성이라 할 수 있겠습니다. 이와 마찬가지로 마크업 또한 콘텐트의 흐름이 문서와 같이 선형적인 구성이 되어야 하며 웹의 특성상 키보드를 통한 접근 순서와 화면 배치 또한 콘텐트를 중심의 흐름이 되는 것이 논리적인 마크업입니다.
크로스브라우징 (웹 브라우저 호환성)
크로스 브라우징이란 수많은 웹 브라우저들의 다양한 특성들을 충족하여 동일한 사용성을 지닌 웹 사이트를 보여주기 위해서 필요한 작업입니다.
똑같은 마크업이라 할지라도 브라우저 들간의 랜더링 특성에 따라 조금씩 다른 화면을 보여 주게 됩니다. 많은 실무자들이 어려움을 호소하는 부분 중에 하나라고 할 수 있습니다.
크로스 브라우징을 하기 위해서는 설계 단계에서 진행했던 지원 브라우저를 선정한 뒤 이에 맞는 html과 css를 사용하여야 합니다.
크로스 브라우징을 잘 하기 위해서는 표준 마크업으로 마크업을 하고 각 브라우저 별 특성과 제약 사항에 대해 이해가 필요합니다.
주로 특정 브라우저에서만 발생되는 버그나 각 브라우저의 특성에 따라 다른 화면을 보여 주게 되면 CSS핵과 조건부 주석을 통하여 이를 보완합니다.
CSS핵은 특정 브라우저에서만 인식되는 비 표준 코드이고 조건부 주석은 IE 계열 브라우저들을 위한 주석이며 이 조건부 주석은 IE에서 대응하여 조건 별로 해당 주석내의 영역을 인식하게 됩니다 즉 IE에서만 조건 별로 인식함으로 IE계열의 브라우저에게만 별도의 CSS등을 적용 할 수가 있게 됩니다.
검색제어
검색제어란 국내외 주요 검색 서비스를 제공하는 구글, 네이버, 다음, 네이트, 야후 등 검색 크롤러에게 웹 사이트에 대한 정보를 제공하여 좀더 명확한 검색결과를 위한 제어를 말한다.
크롤러들의 처리 방식은 각 검색엔진마다 방식이 다르지만 통용된 검색 방식이 있다. 크롤러들의 주요 검색 포인트는 URL, 페이지 타이틀, 메타 정보, 컨텐츠 데이터, robot.txt 가 있다.
검색 키워드와 주요 검색포인트를 매칭하여 정확도 순으로 검색결과를 출력하기 때문에 중요하다고 볼 수 있다.
Robot.txt(or meta robots)는 웹사이트에서 검색로봇을 제어하기 위해 사용한다 현재 페이지나 위치를 크롤링을 하게 할 것인지 말 것인지에 대한 정보를 주게 되며 보안에 이점이 있기도 하다.
접근성
접근성이란 어떠한 사용자와 사용자의 환경에 구애 받지 않고 모든 정보에 대하여 접근이 가능하게 하는 것을 말한다.
다른 분류로는 정보에 대한 접근 가능성과 접근 용이성을 얘기한다.
접근성을 준수하기 위해 실무자들은 접근성에 대한 이해 부족으로 큰 벽처럼 생각하는 경우가 많다. 사실 접근성을 완벽하게 준수하는 것은 다소 어려움이 있을지도 모르겠다 하지만 접근성을 준수하는 길이 그렇게 어려운 일이 아니다. 접근성을 전혀 보장하지 않는 것보다 다소 불편할지라도 접근성을 어느 정도 보장 하는 것이 옳지 않을까 라는 생각을 한다. 웹 접근성을 준수하는 방법을 매우 쉽게 생각해보고 접근성을 준수하는 방법을 몇 가지 얘기해보겠다.
아주
아주 쉽게 생각해보자 첫째로 위에서 비유 했던 것과 마찬가지로 웹 페이지는 단순한 이미지거나 그림이 아니다. 웹
사이트는 사용하는 것이지 감상용 이미지가 아니라는 얘기다. 그럼 접근성을 위해서 무엇을 해야 할까 애초에
웹 페이지는 문서형태로 접근했다. 마크업을 통한 문서 근본부터 웹 페이지는 문서다.
레포트를 쓴다고 가정을 하자 제목을 쓰고 내용을 쓰고 내용에 필요한 도표나 이미지 등 필요한 형태로 글이 아닌 콘텐트를 삽입하게 된다. 웹 페이지도 마찬가지다 일단 접근성을 보장하기 위해서는 논리적인 구성이 필요하다. 시각적으로 보았을 때의 논리적인 구성도 중요하지만 html문서 상에서의 논리적인 구성이 필수이다. 이는 시각적으로 장애가 있는 사람들에게는 문서상의 논리적인 구성이 매우 중요하기 때문이다. 즉 접근성을 준수하기 위해서는 문서의 논리적인 구성이 필요하다.
둘째로 멀티미디어 콘텐트다 웹 페이지 다양한 멀티미디어 콘텐트가 삽입된다. 하지만 웹 페이지는 기본적으로 문서다. 그럼으로 세상의 다양한 브라우저는 이미지를 제외한 거의 모든 콘텐트는 별도의 플러그인 등이 필요하다. 흔한 얘로 플래시, 실버라이트 음악 동영상 등 모든 컨텐트는 웹 브라우저 자체적으로 이를 실행 할 수가 없다. IE등 간혹 기본적으로 플러그인이 탑재 되어서 나오지만 모든 브라우저를 놓고 보면 기본적으로 모두 외부 플러그인이 필요하다.
즉 다양한 사용자 환경(기기 등)에서 이미지와 텍스트를 제외한 모든 멀티미디어 콘텐트에는 외부 플러그인이 필요하다는 제약이 있다.
외부 플러그인이 설치가 가능한 기기가 있는가 하면 없는 기기도 있다. 이것이 뜻하는 바는 모든 멀티미디어 콘텐트를 대체 하는 이미지나 텍스트가 필요하다는 얘기가 된다. 멀티미디어 콘텐트를 대체 할 수 있는 정보가 있어야 정보 접근의 제약이 어느 정도 해소 되는 것이다. 즉 모든 멀티미디어 콘텐트는 대체 텍스트가 필요하다.
셋째로 다양한 사용자 환경이다. 사용자 환경이 다르다는 것은 예를 들어 설명을 해보겠다. 키패드만 있는 구형 핸드폰, 흑백 모니터, 손 등이 불편한 장애인,
눈이 불편한 장애인, 노안, 거동이 불편한 환자, 평균 이하의 PC사양을 가진 자, 다양한 브라우저 등 매우 다양한 사용자 환경이 있다. 이 매우 많은 사용자 환경을 어떻게 충족 시키는가에 대한 문제다. 혹자는 이렇게 다양한 사용자 환경을 어떻게 다 충족 시킬 수 있는가에 대한 의문을 가진다. 하지만 모든 것은 근본에 답이 있다.
애초에
컴퓨터는 흑백화면에 키보드(버튼)만으로 시작 되었다 즉 그
이하의 환경은 없다. 흑백화면과 키보드 환경만 보장하게 되면 모든 것이 해결 된다는 얘기이다. 그렇다고 모든 정보를 흑백으로만 표현하라는 얘기는 당연히 아니다. 흑백에서
인지만 할 수 있으면 되는 것이다. 그럼
구체적으로 어떻게 해야 하는지에 대해서 얘기해보겠다.
모든
색에는 명암이라는 것이 존재하고 흑백모니터 나아가 16칼라 256칼라
등등 디스플레이 모두 명암을 가지고 출력이 된다. 이미지 작업을 하게 될 경우 이런 명암비를 숙지하고
작업을 하면 된다.
컴퓨터가 흑백화면과 키보드로 시작된 것이 단순히 기기적인 환경차이를 해소하는 것이 아니라 장애를 가진 사람들에게도 많이 해소가 된다. 예외적으로 흑백화면과 키보드만으로 해소 할 수 없는 장애에는 키보드를 바로 사용할 수 없는 장애가 있다. 키보드를 사용하기 힘든 장애에는 손과 발 등 눈이나 혀 이외에는 모든 불편함이 있는 장애가 있다.
넷째로 css와 script가 있다 css와 접근성은
css는 사실상 스타일을 위한 것으로 접근성과 큰 관계가 없다. 관여가
되는 것은 css 속성 중에 display이외에는 접근성과
큰 관계가 없다. display속성이 관계 있는 이유는
display:none을 하게 되면 스크린리더기 등에서 출력을 하지 않는 경우가 있기 때문이다. 끝으로 script는 근본적으로는
css와 마찬가지로 콘텐트 정보를 담고 있는 것은 아니라 정보를 출력해주거나 화면에 이벤트나 액션을 주게 되는 기능이라고 볼 수 있다. 하지만 script 만을 통하여 정보의 출력 여부를 결정하는 것은
매우 좋지 않은 방법이다. 이는 멀티미디어 콘텐트와 마찬가지로 스크립트에 대한 제약이 발생한다.