태스크 플로우 작성하기 사이트 맵은 웹사이트의 특정 영역을 대표하는 페이지들을 시각적으로 보여주는 것을 의미한다. 회사 조직도처럼 생겼으며 사이트의 수직적인 구조를 보여준다. 회사 조직도처럼 생겼으며 사이트의 수직적인 구조를 보여준다. 테스크 플로우는 사용자들이 웹사이트를 항해하는 중 취하는 경로나 과정을 보여준다. 사용자의 옵션이나 경로를 상세히 보여주기 위해 제작된다. 시나리오 기반의 태스크 분석 정의 사용자의 니즈와 요구사항을 기반으로 사용자가 우리 서비스를 이용하여 어떤 작업을 수행하도록 할 것인가 정해야 하는데 이를 태스크(과업)이라고 한다 이 태스크(과업)을 누가 어떤 상황에서 어떻게 수행하는가를 그리는 과정이 시나리오 작업이다. 태스크(과업) 분석은 이 서비스를 통하여 앞에서 정의한 페르소나..
접근성의 미래 웹 접근성의 올바른 발전 방향 접근성이 웹을 넘어 모바일 웹, 소프트웨어, 제품등 다양한 영역에서 접근성을 확인하고 향후 서비스 영역 전체에 접근성을 적용할 수 있는 미래에 대해서도 이해해야 합니다. 웹접근성의 문제점의 해결 웹 접근성의 문제점은 마크업 기술 중심으로 움직인다는 것 = 사용자 입장이나 다른 기술 영역 등 다양한 측면에서의 접근성이 아닌 오직 HTML중심으로 보여진다는 점 : 이것은 HTML과 CSS 중심의 굴레를 벗어나지 못하는 모양과 같음 웹 접근성 국제표준은 2008년에 신기술을 고려하고 HTML중심의 WCAG 1.0에서 신기술을 고려한 WCAG 2.0으로 변화가 있었고 국내에서도 2010년에 KWCAG 2.0으로 개정, 2015년에 KWCAG 2.1로 개정하였고 주요 ..
견고성 견고성의 사전전 의미는 굳고 단단한 성질로 웹 사이트를 만들때 다양한 기술이나 환경에서도 문제 없이 잘 동작하고 오류 없이 정보를 잘 전달할 수 있도록 만들자는 원칙 문서의 뼈대라고 할 수 있는 마크업 언어를 문법적 오류가 없도록 제작하는 것이 가장 기본 문법적 오류가 있다면 사용하는 브라우저나 보조기기에 따라 오류를 해석하는 방법이나 정보 전달 기능에서 차이가 발생할 수 있고 이러한 차이로 인하여 사용자는 웹 콘텐츠 인식 및 이해에 영향을 받을 수 있다. 검사항목 23 : 마크업 오류 방지(문법 준수) 1. 마크업 오류의 개념 웹 페이지의 기본이 되는 HTML이나 XHTML과 같은 마크업 언어에서 정한 문법에 맞지 않게 구현한 경우 발생되는 것 ==> W3C 유효성 검사기를 통해 확인가능 문법에..
이해의 용이성 검사항목 19 : 콘텐츠 선형구조 1. 콘텐츠 선형구조의 개념 콘텐츠는 논리적인 순서로 제공해야 합니다. 웹 문서를 제작할 때 뼈대가 되는 HTML 마크업 언어로 먼저 논리적인 순서에 맞게 개발하고 여기에 대한 레이아웃이나 장식등의 표현를 위해 CSS를 적용하여 주게 되는데 CSS 제거 시, 콘텐츠가 상식적인 순서로 제공되고 있는가에 대한 개념 2. 콘텐츠 선형구조의 검사항목 해설 3. 콘텐츠 선형구조 제공방법 콘텐츠 순서가 논리적으로 선형화되어 제공시 준수한 것으로 인정 ★ 오류 유형 계층 구조가 명백하게 필요한 콘텐츠를 중첩 마크업을 이용하여 표현하지 않은 경우 '제목-내용'으로 구성된 콘텐츠 목록의 배치가 분리되어 내용을 직관적으로 이해할 수 없는 경우 ★ 주의 사항 탭 메뉴에서 탭1..
이해의 용이성(1) 검사항목 17 : 기본 언어 표시 1. 기본 언어 표시의 개념 웹사이트에서 주로 사용하는 언어를 명시해야 함으로써 화면낭독기나 음성지원 소프트웨어로 해당 언어의 정확한 발음으로 콘텐트 이해에 도울 수 있다 2. 기본 언어 표시의 목적 다양한 언어를 공부하거나 이용하는 사용자에게 중요한 지표 3. 기본 언어 표시의 검사항목 해설 주로 사용하는 언어를 명시해야 하며 이를 오류없이 제시하면 준수한 것으로 인정 중간에 언어가 바뀌는 경우 lang 속성을 통해 언어를 바꿔주면 더 이해하기 좋은 사이트가 됨 기본 언어표시는 화면낭독 프로그램과 같은 보조기기에서 기본 언어에 맞는 TTS(Text To Speech)엔진을 가동시키는 역할을 함 4. 기본언어 표시 제공 방법 웹 페이지에서 주로 사용하..
와이어프레임 비주얼 디자인이 시작되기 전에 흑백으로 제작되어 UX/UI 디자인의 방향을 잡는 역할을 하며 페이지나 화면에 보여지는 요소들을 정하기 위해 그려지는 일종의 ‘프로토타입’이라고 할 수 있다. 피드백과 함께 이루어지는 작업이기 때문에 한번에 완성도를 높이기보다 반복적 작업을 진행하는 것을 염두 해 두고 작성해야 한다. 정의 대략적인 스크린 디자인을 일컫는 것으로, 각 페이지와 기능 간의 관계와 구조를 제안하고 시각화하는 것이다. 이러한 와이어프레임은 인터페이스 디자인에서 기본 안내서로 사용한다. 즉, 와이어프레임은 인터페이스의 기본 요소를 담은 레이아웃을 그림 등으로 표현한 것으로, 기획서나 스토리보드 등의 UI 디자인을 의미한다. 가벼운 스케치와 인터랙티브 프로토타입 사이에 위치한다고 본다 개..
운용의 용이성(2) 검사항목 13 : 깜박임과 번쩍임 사용 제한 1. 깜빡임과 번쩍임 사용의 개념 초당 3~50회 주기로 깜빢이거나 번쩍이는 콘텐츠를 제공하지 않아야 함 대상 - 초당 3~50회 주기로 깜짝이는 콘텐츠 유의점 - 광과민성 박작을 일으킬 수 있음 대안 - 사전에 경고, 제작하지 않게 해야 함 2. 깜빡임과 번쩍임 사용제한의 목적 어린이 또는 광과민성 발작 증세가 있는 사용자를 위함 3. 깜빡임과 전쩍임 사용 검사항목 해설 초당 3~50회 주기로 깜빡이거나 번쩍이는 영상 콘텐츠는 제공하지 않거나 사전에 경고해야 하고 이를 오류 없이 제공한 경우 준수한 것으로 인정 오류 유형 사전 경고 없이 초당 3~50회 깜빡이는 콘텐츠가 존재할 경우 4. 깜빡임과 번쩍임 사용 제한 제공 방법 오류 유형 깜..
운용의 용이성(1) 운용의 용이성이란 어떤 사용자나 환경에서도 키보드만으로도 자유롭게 웹사이트에서 제공하는 모든 콘텐츠의 기능을 이용할 수 있게 하는 것 운용의 용이성 관련 지침 및 검사항목 지침(4개) 검사항목(8개) 2.1(입력장치 접근성) 콘텐츠는 키보드로 접근할 수 있어야 한다. 2.1.1 (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다. 2.1.2 (초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다. 2.1.3 (조작 가능) 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다. 2.2(충분한 시간 제공) 콘텐츠를 읽고 사용하는 데 충분한 시간을 제공해야 한다. 2.2.1(응답시간 조절) 시간제한이 있는 콘텐츠는 응답시간을 조..