메가박스 사이트 만들기 동영상 보며 코딩하기 - 사이트 만들기 web's 동영상 바로가기 두번째 강의 : 헤더영역 영화 큐레이션 영화관 특별관 스토어 이벤트 로그인 @charset "utf-8"; /*레이아웃*/ #header {width: 100%; height: 63px; border-bottom: 1px solid #c6c6c6;} /*가운데 영역*/ .container {position: relative; width: 1280px; margin: 0 auto; } /*로우 영역*/ .row {padding: 0 24px;} /*헤더 영역*/ .header {} .header h1 {float: left;} .header h1 em {padding: 15px 8px 5px 0; display: in..
디자인 가이드 구성 서비스, 제작물의 통합적인 아이덴티티를 고려하여 디자인 가이드를 조합할 수 있다. 콘셉트와 트랜드 디자인 리서치(Design Research) 디자인을 기획하기 전에 과학적 연구의 방법과 도구를 기반으로 자료를 수집하고 분석하는 활동이다. 영국 왕립예술대학의 크리스토퍼 프레이링(Sir Christopher Fryling) 경은 디 자인 리서치를 3가지의 중요 분류로 제안하였다. 디자인에 투입되는 리서치 디자인을 통한 리서치 디자인을 위한 리서치 비주얼 콘셉트(Visual Concept) 디자인 리서치를 한 후 디자이너가 전달하고자하는 주제인 잘 표현될 수 있도록 여러 가지 시각적인 표현 방법 및 접근 방법을 비주얼을 정하여 나타내는 것을 비주얼 콘셉트라고 한다. 웹 사이트의 성격에 따..
웹 디자인의 정보 정보디자인(Information Design), 유저 인터페이스 디자인(User Interface Design), 그래픽 디 자인(Graphic Design), 컴퓨터그래픽(Computer Design) 운영 등 필요 지식을 기반으로 정보 를 계층화하고 설계해야한다. 웹 디자인의 정보 종류 구체적 사실(Facts): 실제의 사실을 말하며, 특별한 설명이 없어도 이해할 수 있는 구체 적인 정보 개념(Concept): 대상을 이해하기 쉽도록 나타내는 정의 절차(Procedures): 순차적으로 진행되어야하는 과정에 대한 정보 과정(Process): 특정한 주제를 전달되는 원리에 대한 정보 웹 디자인의 정보 구조화 체계화된 정보 체계를 연결시키는 작업으로, 일반적으로 웹사이트 구조에서는 하향..
센스리더 설치와 활용 화면 낭독기 센스리더가 주요 마크업 요소를 음성으로 출력하는 방식이 왜 중요한가 : 센스리더로 웹을 어떻게 탐색하는지 사용자평가에서 어떤 결과로 나올 수 있을지 대략적으로 예상할 수 있기 때문에 기본적인 음성출력 방식을 이해하는 것이 중요하다. 이미지의 대체 텍스트 이미지에 대체텍스트를 제공했을 때 센스리더기가 음성을 출력하는 법 alt 값이 정리되어 있지 않은 경우 ==> X로만 표시, 파일명을 그대로 읽어줌 alt 값이 '홍길동'으로 제공된 경우 ==> X 홍길동 표시, '홍길동'이라고 읽어줌 alt 값이 '홍길동', 그리고 타이틀에 '남자'라는 정보가 제공되어 있는 경우 ==> X 홍길동 표시, 타이틀 정보 음성 출력하지 않고 alt값만 음성출력 alt 값에 공백처리를 한 경우..
사용자 평가 도구의 이해 화면낭독기(스크린리더) 화면낭독기는 웹에 제공된 정보를 시각장애인이 귀로 들을 수 있도록 음성으로 전화해주는 프로그램으로 눈에 보이는 정보를 소리로 전환하는 것이 아니라, 웹 개발자가 제공한 텍스트 정보, 윈도우 컨트롤, 응용프로그램, 웹에 제공된 정보를 음성으로 전환하기 때문에 웹 접근성 준수를 통해 제공된 정보만 음성으로 전환할 수 있다. 현재 요소가 무엇인지 알려주는 what, 현재 요소의 구조적, 논리적인 정보인 where에 대한 정보를 제공했을 때 화면낭독기가 시각장애인이 웹을 이해하고 이용할 수 있도록 음성으로 전환하는 동작을 한다. 스크린리더로 웹을 정상적으로 탐색하고 이용하려면 웹페이지를 제작할때 웹 접근성을 준수하는 것이 매우 중요하다. 스크린리더는 제품마다 최신..
전문가 평가 도구의 이해 1. 웹 접근성 평가 도구 소개 웹 전문성 평가 도구는 HTML 코드를 분석하여 기계적으로 추출 가능한 웹 콘텐츠 접근성 지침 일부 항목을 자동 점검해줌으로써 평가시간을 절약해주고 편의성을 도모해준다. 웹 전문성 평가 도구의 웹 접근성 자동 점검 결과가 높게 나왔다고 해서 웹 접근성을 만족한다는 의미는 아님 : 도구에서 점검하는 것은 최소한의 코딩기준 만족. 평가도구에서 코딩기준을 만족하여 오류가 발생하지 않는 경우에도 지침 항목에 대한 정확성, 의미 전달 여부등의 사항을 확인해야한다. 웹 접근성에 관한 정밀한 평가를 위해서는 도구에 의한 자동평가와 사람에 의한 수동평가가 병행되어야 한다. 2. 웹 접근성 평가 도구 소개 및 설치 방법 평가도구의 종류에는 K-WAH, OpenWA..
디자인 가이드를 위한 스토리보드 스토리보드(Storyboard)란 본래 영화나 애니메이션, 광고와 같은 영상매체를 만들기 전, 주 요 장면을 사진 혹은 일러스트와 같은 시각적 형태로 정리해 놓은 문서를 의미하며, 영상 매체를 제작하는 과정에서 스텝들 간의 원활한 의사소통을 하기 위해 제작된 문서이다. 스토리보드의 구성 스토리보드는 표지, 개정 이력, 화면 설계, 서비스 흐름도의 구성으로 하며, 프레임의 사 용 여부와 메뉴의 구성 위치, 콘텐츠의 위치 등 전체적인 화면 구성을 보여 주어야 한 다. 이 때 메뉴 구성을 포함한 페이지의 구성은 디자인 요소 중 아주 중요한 부분을 차 지하게 된다. 각 페이지의 정보를 요약하며, 저장될 디렉터리, 파일 이름, 페이지 타이틀 등을 메모하 듯이 작성한 후 링크 정보를..