“예전에 쓴 메일인데 다른 분들께도 도움이 될지 싶어 올립니다. “
안녕하세요. 정을수입니다.
제작하시는 업체에서 물론 잘 아시는 내용을 또 말씀 드리는 것일지 모르지만, 수요일에 있을 제안 시연에 대한 몇가지 의견을 드립니다.
아래의 의견은 본 프로젝트에 대한 작업 디렉션이기도 하면서도 수요일 제안 시연회에서 있을 여러가지 예상되는 예상된는 질문의 답변이기도 합니다. 또한 제안 전략에도 참고 하실 수 있습니다.
아래 내용은 먼저 실무 작업자들과 협의한 뒤에 제안 시연회에서 답변으로 사용하시는 것이 좋겠습니다. 종종 제안시연회에서는 할 수 있다고 답변 했지만, 실무 작업자들이 할 수 없는 상황이 벌어지기 때문입니다.
1. VHTML
VHTML 이라고 개발형식을 적어 주셨는데 javascript를 이용한 동적 구현을 이렇게 표현 하신것 같습니다.
단순한 소개 페이지인데 진짜 동작, 애니메이션을 염두해 두시고 쓰셨는지가 궁금합니다. 왜냐하면 플래시처럼 구현을 원하시는 것이라면, 자바스크립로 구현하는 현제 상황에서 큰 무리가 예상됩니다.
수요일전에 담당자에게 문의하셔서 분명한 답을 가지시는게 좋지 않을까 생각됩니다.
2. 컨텐츠관리
마지막 탭의 공통기능에 컨텐츠 관리 기능을 요청 하셨는데 이것도 모든 메뉴 생성과 컨텐츠를 관리자 페이지에서 관리하고 싶다는 것인지를 분명히 할필요가 있을것 같습니다. 만약 모든 컨텐츠 페이지를 직접 넣고 빼고 수정하고 싶다는 의미라면 CMS를 사용해야 하는데 가능하신지 아니면 제작 업체쪽에서도 알고 계신지 정확한 요구사항을 시연전에 알아 보아야 할 것 같습니다.
1. 웹표준
1) 크로스브라우징
웹표준 항목은 먼저 크로스 브라우징의 범위를 내부 작업자나 고객 모두가 정확히 알고 있어야 할 것 같습니다. ie7~ie10/firefox/safari/chorme 까지를 모두 맞추는 것이 일반적인 작업이라고 생각합니다.
하지만 현재 통계상 ie7이 10%미만 수준으로 사용되고 있기 때문에 ie8~10까지와 크롬, 사파리, 파이어폭스로 그 범위를 고객과 상의 하셔도 무리는 없으시리라 생각 됩니다. 참고로 ie8-38%, ie9-17%, ie10- 22%로 2013년 9월 조사에 따르면 그렇습니다.
여기서 크로스 브라우징 되도록 맞추는 일이란 일반적으로 1픽셀까지와 완전히 똑같이라는 의미는 아니라는 점을 고객도 인식은 하고 계셔야 할 것 같습니다.
2) HTML / CSS버전
HTML 4.01 trasitional 과 CSS 2.1을 사용하는 것이 좋다고 생각합니다. 고객이 특별히 요청하지 않은한 아직 스마트기기외에는 데스크탑용 브라우저에서는 HTML5나 CSS3를 위한 js 라이브러리를 사용해야 하기때문입니다.
HTML의 경우에는 작업자가 w3c의 validator를 통과하는 것을 기준으로 작업을 하면 좋을것 같구요. 이는 자체 검증 차원에서 HTML 작업이 너무 허술 하게 되지 않도록 하는 것이지 고객에게 말씀 드릴 필요까지는 없을것 같습니다. 왜냐하면 자바개발이 끝나고 나서도 validator를 통과 시킨다는것은 시간 여건상 무리가 있다고 생각합니다.
CSS의 경우는 validator를 돌리지 않는 것으로 했으면 합니다. ie7, 8 때문에 아직 hack이 사용되기 때문에 vailidator를 통과시키는 것 또한 무리라고 생각합니다.
2. 웹접근성
1) 컨텐츠
접근성은 먼저 고객이 가지고 있는 컨텐츠에 동영상이나 플래시 컨텐츠가 포함 되어있는지 확인할 필요가 있습니다. pdf다운로드도 마찮가지 입니다. 그리고 가지고 있다면, 웹 접근성 작업 범위가 컨텐츠(자막을 넣는 다던지 기존에 만들어진 플래시를 접근성있게 고친다던지 pdf를 접근성있게 만든다든지)에 대한 가능여부를 타진하시고 처음부터 할 수 없다고 말씀을 드리는게 좋겠습니다. 만약 고객이 원하신다면 이는 별도 추가 견적이 필요합니다.
2) 인증마크
인증마크는 고객과 협의를 하셔서 별도로 진행하시는 것 같습니다만, 프로젝트를 안정적으로 검증해서 끝내는 차원에서도 진행하시는 것이 좋다고 생각합니다. 이것은 퍼블리셔나 개발자 모두에게 분명한 목표를 주고 검증을 받으면서 수정 작업이 일어나기 때문에 고객에게도 만족을 주고 프로젝트가 깔끔하게 끝날 수 있다고 생각합니다.
3) 제작
기준이 되는 kwcag2.0을 기준으로 작업을 하신다니 특별한 말씀은 드리지 않겠습니다. 다만 몇가지 말씀드리자면 처음(화면설계서)단계부터 퍼블리셔와 상의를 하셔서 진행 하시는게 중요합니다. 네비게이션의 동작이나 디자인을 할때 접근성있는 자바스크립트로 구현하기에 용이한지를 반드시 퍼블리셔분과 상의 하셔서 진행 하시면 좋겠습니다.
사용자가 직접 올리는 게시판의 경우 이미지를 첨부할때 대체텍스트를 반드시 입력할 수 있도록 입력란을 만들어 두는 일도 중요합니다. 그래야 계속해서 생성되는 자료에 대한 접근성이 유지 될 수 있을 테니까요.
3. 기획적 측면
1)템플릿
프로젝트 자체가 하나의 탬플릿을 만들어 여러개로 만들는 것이기 때문에 편하게 끝날 수 도 있고 그렇지 않을 수 도 있다고 생각합니다. 처음 템플릿을 만들때 정보구조설계(메뉴구조)를 컨텐츠의 분석이 모두 끝난 상태에서 시작해야 한다고 생각합니다.
컨텐츠를 충분히 살펴보면서 메뉴를 늘리기도 하고 줄이기도 해야 딱 맞는 메뉴 구조가 생기고 이렇게 뼈대(정보구조)가 제대로 선상태에서 디자인을 하고 시안을 컴펌 받아야 부드럽게 진행될 수 있습니다. 고객 측에도 하나의 템플릿을 만들어서 2개 3개를 만드는 작업이므로 컴펌 이후에는 수정 변경이 쉽지 않으니 꼼꼼히 확인해 주실 것을 요청 드리면 좋겠습니다.
2) 컨텐츠
첫 번째 한벌을 만들고 이것을 탬플릿 삼아 2번째 3번째까지를 찍어내야 하는 프로젝트이기 때문에 가장 중요한 것은 컨텐츠에 규칙을 만들어 주는 것입니다. 아직 자료를 받아 보진 못해서 장담 할 수 없지만 300본 분량의 컨텐츠에 그 유형별로 규칙을 부여해야 합니다.
예를 들어 보겠습니다. 어떤 소제목 아래에 불릿이 있는 문장이 올 경우 모든 컨텐츠에 이 규칙이 적용되어야 합니다. 어떤 페이지는 불릿과 들여쓰기까지 추가되고 어떤 페이지에는 그 들여쓰기의 사이즈가 다르게 된다면 즉 그 페이지의 상황만을 보고 디자인되면 프로젝트가 어려워질 수 있습니다.
왜냐하면 디자인이 구성하는 요소들마다 조금씩이라도 다르면 그것은 모두 관리하는 코드(CSS의 클래스네임)가 늘어나고 있다는 뜻이기 때문입니다.
그러므로 처음 컨텐츠를 받으시면 충분히 검토해서 최대한 컨텐츠를 일관성 있게 정리를 하는 작업이 필요하다고 생각하고 이런점이 고객 요청사항에 있는 관리성을 아주 높일 수 있는 본질적인 포인트가 된다고 생각합니다.
3) 스마트기기
별도의 요청이 없다고 한다면 풀브라우징 방식 즉 데스탑이나, 스마트패드, 스마트폰에서 모두 동일하게 보여지는 것을 원칙으로 하는것이 제일 좋지 않을까 생각합니다.
이를 위해서 정해져 있는 것은 아니지만 본문 텍스트를 14px이상 버튼들은 33px 이상의 높이를 갖도록 하면 요구사항은 아니지만 제작후에 사용성 측면에서 불만 사항으로 나오지 않을것 이라고 생각합니다.
또한 텍스트 크기를 크게하고 버튼을 크게 하는것은 웹 접근성 측면에도 좋은 작업이라고 생각합니다.
네비게이션의 경우에도 패드와 폰을 배려해서 좌측 메뉴를 없애고 상단 메뉴에서 해결한다면 반응형웹까지는 아니더라도 충분히 좋은 사이트를 만들수 있다고 생각합니다. 좋은 예로 apple.com은 아직도 이런 풀브라우징 방식을 사용하고 있습니다. 그러므로 애플은 좌측메뉴가 없으며, 사진과 글이 큼직 큼직 하게 되어있습니다.
4. 전체 전략
본 프로젝트의 전략은 먼저 컨텐츠에서 시작됩니다.
지금까지 있는 컨텐츠를 분석하고 향후에 어떤 컨텐츠들이 생겨날 것인지를 고객과 인터뷰하고 그 컨텐츠의 형식을 유형별로 정해 놓고 컴폼을 받습니다.
이후 그 유형에 대해 디자인한 서브페이지 시안과 메인페이지의 시안을 디자인합니다.
이렇게 접근성과 풀브라우징을 고려한 템플릿을 디자인한 후 웹표준으로 작업하고 CSS를 통해서 관리성을 극대화 할 수 있도록 하는것입니다.