[웹표준] 디자이너와 웹 기획자가 고려해야할 웹접근성
항상 웹접근성이라는 말은 많이 들었는데
어떤건지 설명하기 어려울 때가 많았다
다행히 최근에는 강사님이 보다 명확한 내용을 알려주셔서
이전보다는 구체적으로 알고 있는 편이다
웹접근성은 쉽게 말해서
어느 누구나 웹에 표시되어있는 정보에 쉽게 접근할 수 있는 것을 말한다.
단적인 예로, 시력이 약한 사람의 경우 글자를 눈으로 못보는 상황이 발생하는데
이런 분들을 위해 글자를 "읽어주는" 브라우저가 있다고 한다.
하지만 이러한 브라우저도 이미지의 경우에는 대체 텍스트가 적혀있지 않으면
아무런 내용을 전달해 주지 못한다
그래서 "웹접근성"이 중요하다고 한다.
오늘 보던 다음 웹표준 가이드에
웹접근성에 관한 주요한 내용이 적혀있어서 가지고 왔다.
이 내용은 미국의 웹접근성 전문 비영리단체에서 발표한 내용을
정리해주신 부분이다.
많은 내용들이 있지만
그 중에서도 정말 중요하다고 생각되는 부분을
몇 가지 소개하겠다.
전체 내용을 보시려면
ui.daum.net
다음 웹표준 가이드로 접속하시면 된다
기획자가 있다면 당연한 부분이지만
나같은 초보의 경우에는 포트폴리오용이나 혹은 테스트 삼아 만드는 부분은
메뉴 구조를 만들면서 수정을 하기 때문에
간과하기 쉬운 부분이라 생각된다.
탄탄한 기획만큼 좋은 것은 없으니까!
그 다음 중요하다고 생각되는 부분은
잘 보이냐 안 보이냐이다.
푸터부분의 경우 명암이 상당히 낮아서 드래그해서 읽는 경우도 있다.
포털의 경우 당연히 지침을 따르고 있지만,
랜딩페이지나, 이벤트 페이지의 경우
가끔은 너무나 어둡게 표현된 페이지가 있다.
내가 어떤 부분을 클릭하고 있는지에 대한 내용은 상당히 중요하다
글씨 색깔이 바뀌는 부분은 그래도 많은 편이지만, 언더라인의 경우 없는 경우도 상당수이다.
색과 언더라인 말고도 다른 강조를 통해 명확한 구분이 가능하도록 하면 좋을듯 하다.
이 내용을 고른건 상당히 웃픈 일때문인데,
어릴때 안 좋은 마우스를 사서 제대로 작동하지 않을 때가 많았다.
항상 키보드는 고장이 안나서 링크 포커스를 확인하고 "탭" 키를 이용해
웹페이지를 사용할 때도 많았는데..
내가 만든 내용에도 키보드 포커스는 꼭 적용해야겠다
ㅠㅠ
나는 아직 초보라서 많은 것을 지킬 수는 없겠지만(노력해도)
점점 더 많이 지킬 수 있도록 해야겠다
[웹표준] 다음 웹표준 가이드
웹표준을 지켜서 코딩을 해야하는데
솔직히 제대로 찾아보지를 못해서
맞게 하는건지 의문이 들 때가 많다
오늘의 경우에도 PC버전 완성해서 모바일로 상태를 봤는데
완전 중구난방이었다
오늘도 웹표준을 검색하고 있는데
다음에서 웹표준 가이드를 제시했다는 내용을 확인하고
접속해보았다.
다음 웹표준 가이드
ui.daum.net
뭔가 메뉴가 많다.
HTML 가이드, CSS 가이드는 물론
네이밍이나 체크리스트 까지 제공하고 있다.
꼼꼼히 읽어보았는데, 나에게는 naming 규칙이 상당히
흥미로운 내용이었다.
어떤 사람도 자신만의 규칙을 가져야 하는데
나의 경우 가르치는 사람에게서 영향을 많이 받는 편이라
이제껏 전 회사의 개발팀장님의 방식을 따랐었다
이젠 가이드대로 하면 헷갈릴 필요가 없을것 같다
체크리스트 내용을 클릭해 보면
아래의 세부 내용으로 이동한다.
음..
아직 나에게는 필요 없는 내용인 듯 하다
너무도 멀고 먼 ..
CSS 가이드 쪽에서
이부분이 가장 흥미로운 내용이었다.
이미지 대체 텍스트에 관한 부분인데
권장하는 첫번째 방법이 상당히 인상적이었다
-9999px 이라니
이거 웹페이지로 말고 책이나 pdf 로 정리해줬으면 좋겠다
책장에 꽂아두고싶다
처음 보는 사람들도 쉽게 공부할 수 있는
CSS Property 내용도 제공을 하기 때문에
나같은 초보에게는 딱 좋을거 같다
오늘도 프론트엔드 개발자를 위해 화이팅!
(오늘따라 오글거린다)
'매일매일 공부 > 유용한 자료' 카테고리의 다른 글
브라우저 기능검사 / 브라우저 호환성 / SVG 지원 불가일 때 대체 이미지 띄우기 (0) | 2017.11.27 |
---|---|
웹 코더 JS Bin / HTML 코드 작성하기 / 실시간 코딩하기 (0) | 2017.11.16 |
웹디자이너 포트폴리오 참고자료 / 웹디자인 포트폴리오 / 웹사이트 디자인 사이트 (0) | 2017.11.03 |
그라디언트 쉽게 사용하기 / webgradients / 그라디언트 CSS 코드 생성기 / 그라데이션 (0) | 2017.11.02 |
포토샵 플러그인 / 쉽게 포토샵 사용하기 / Assistor PS (0) | 2017.11.01 |
웹디자이너 포트폴리오 참고자료 / 웹디자인 포트폴리오 / 웹사이트 디자인 사이트
창작은 힘들다
이제껏 웹과 관련해서는 창작을 해 본적이 없다
전부 이미 있는 사이트들을 베낀 것들 뿐
포트폴리오 준비를 위해 필요한
"잘 된" 웹디자인 혹은 사이트를 모아놓은 사이트를 소개한다.
1. DBcut
웹디자인 평가나 우수한 사이트를 모아 놓았다.
접속하면 오픈/리뉴얼 된 사이트들을 확인할 수 있다.
아무래도 등록일 순으로 조회하면 최신 트렌드를 읽을 수 있다
기존에 사용하던 Behance나 Github의 경우
영어 기반이라 참고하기 쉽지 않았는데
디비컷의 경우 다 우리나라 사이트라서 좋다.
아래로 내려보면 이렇게 카테고리화가 되어 있어서
만들고 싶은 사이트 분류를 확인할 수 있다.
물론 나의 경우 일단 다 훑어보고 카테고리를 정할 듯...
2. WordPress Themes
항상 워드프레스는 디자인이 좋았다
물론 사용이 어려워서 많이 안 만져봤지만...(내 기준)
웹에이전시에 따라 워드프레스로만 제작하는 곳이 있다고 해서
슬슬 공부를 시작해볼까 싶다. (사실 뭘 공부해야하는지 잘 모른다)
이것도 영어권이긴 하지만...
강사님이 추천해주셔서..일단 넣는 것으로...ㅋㅋㅋㅋ
일단 dbcut만 봐도
우리나라 웹디자인 트렌드를 읽을 수 있다
반응형 웹.. 언제 제작하지...
솔직히 베껴오는거 말고는 아무 생각이 안 떠올라서 큰일이다
진짜 창작자가 되고 싶다.
'매일매일 공부 > 유용한 자료' 카테고리의 다른 글
웹 코더 JS Bin / HTML 코드 작성하기 / 실시간 코딩하기 (0) | 2017.11.16 |
---|---|
[웹표준] 다음 웹표준 가이드 (0) | 2017.11.09 |
그라디언트 쉽게 사용하기 / webgradients / 그라디언트 CSS 코드 생성기 / 그라데이션 (0) | 2017.11.02 |
포토샵 플러그인 / 쉽게 포토샵 사용하기 / Assistor PS (0) | 2017.11.01 |
CCA / Color Contrast Analyzer / 웹표준 지키기 / 명도대비 확인하기 (0) | 2017.11.01 |