정보구조 설계하기 학습목표 - 결정된 콘텐츠와 기능에 따라서 정보 구조를 설계할 수 있다. - 사용자가 사용하는 언어를 고려하여 메뉴 및 UI 구성요소에 대하여 레이블링 (Labeling) 할 수 있다. - 사용자의 접근성, 사용성을 위하여 네비게이션(Navigation) 구조를 설계할 수 있다. 1. 정보구조 설계 (1) 정보구조 설계에서의 모호성 분류 시스템은 언어 기반 위에서 성립되는 것이며, 언어는 하나의 단어로 여러 가지 뜻을 나타내는 경우가 많다.‘배’라는 단어도 먹는 배와 타는 배 그리고 사람의 배와 같이 다양한 뜻이 있다. 이와 같이 단어의 모호함은 정보를 분류하는 시스템을 구축하는 데 불안정한 요소로 작용한다. 홈페이지에서 우리는 정보의 그룹을 설명할 때 대부분의 경우 단어를 사용해서 표..
기능(Feature) 리스트 도출 학습목표 - UI설계를 위하여 작성된 시나리오에 따라 기능을 도출할 수 있다. - 도출된 기능에 대해서 우선순위를 수립하여 주요 기능을 선별할 수 있다. 우선순위 기준에 의해서 선별된 주요 기능의 상세한 내역을 작성할 수 있다. 최소 기능 제품(Minimum Viable Product, MVP) MVP는 리스크나 투자 대비 최적의 성과를 창출할 수 있으면서, 사용자에게 핵심적인 기능을 최소화하여 제공할 수 있도록 정의하는 방식이다. 해당 용어는 프랭크 로빈슨(Frank Robinson)이 정의하였고, 스티브 블랭크(Steve Blank)와 에릭 리이스(Eric Ries)가 대중화시켰다. MVP는 무조건적으로 적은 기능만을 정의하는 것이 아니라, 사용자에게 가치를 제공할 ..
UI/UX 콘셉트 도출 학습목표 - 도출된 아이디에이션(ideation)의 프로토타입 검증 결과에 따라서 확정된 UI/UX 콘셉트를 결정할 수 있다. - 도출된 UI/UX 콘셉트를 반영하여 목표 고객인 페르소나(persona)를 추출할 수 있다. - UI설계를 위해서 UI/UX 콘셉트에 적합한 시나리오(scenario)를 작성할 수 있다. 페르소나 (Persona) 사용자의 목적(goals)과 행동(behaviors)을 대표하는 실제 타깃 사용자 그룹을 가상의 캐릭터(artificial person and archetypical users)로 형상화하는 목적 지향적인(goal-directed) 인터랙션 디자인의 방법이다. 핵심적인 캐릭터의 구성요소는 니즈(motivations and needs) 목적 환..
마우스 커서에 따라 움직이는 background effect 배경 위에서 마우스를 움직여 보세요 See the Pen Background Effect by sohinggu (@sohinggu) on CodePen. 3초마다 바뀌는 background-color See the Pen Background Effect 2 by sohinggu (@sohinggu) on CodePen. 랜덤으로 변하는 gradient-background-color See the Pen Random Gradient Background by sohinggu (@sohinggu) on CodePen. 랜덤으로 변하는 background-image See the Pen Random Image Background by sohinggu ..
Repeating-linear-gradient를 이용한 Background See the Pen Repeating-linear-gradient Background by sohinggu (@sohinggu) on CodePen. Radial-gradient를 이용한 Background See the Pen Background by sohinggu (@sohinggu) on CodePen. Radial-gradient를 이용한 Heart-Background See the Pen Heart-Background by sohinggu (@sohinggu) on CodePen.
웹 접근성의 미래 학습목표 1. 웹 접근성에서 파생된 다양한 영역의 접근성에 대해 이해할 수 있다. 2. 웹 접근성에 미래에 대해 이해할 수 있다. 웹 접근성의 올바른 발전 방향 접근성이 웹을 넘어 모바일 웹, 소프트웨어, 제품 등 다양한 영역에서 접근성을 확인하고, 향후 서비스 영역 전체에 접근성을 적용할 수 있는 미래에 대해 이해할 수 있어야 한다. 1. 문제점의 해결 웹 접근성의 문제점 마크업 기술 중심: 사용자 입장이나 다른 기술 영역 등 다양한 측면에서의 접근성이 아닌 오직 HTML 중심으로 보여진다 → 정보 접근성 측면에서, 웹의 영역(HTML, CSS 중심)의 굴레를 벗어나지 못한다. 접근성과 관련된 국제표준은 2008년에 신기술을 고려하고 HTML 중심의 WCAG 1.0에서 다양한 신기술을..
normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity Porperty Description normal 배경색의 기본 값을 정의합니다. multiply 더 어두운 색으로 변경됩니다. screen 더 밝은 색으로 변경됩니다. overlay 원래 색상의 농도와 밝기를 변경합니다. darken 어두운 색으로 변경됩니다. lighten 밝은 색으로 변경됩니다. color-dodge 기본 색상을 밝게 합니다. saturation 채도의 변화로 색상이 변경됩니다. color 색을 통해 색상을 변경합니다. luminosity 밝기를 통해 색상을 변경합니다. blend-mode origi..
Background Property Sample Description background background: #000 url(background.gif) no-repeat top center 배경 속성 단축형 background-image background-image: url(이미지 경로) 배경 이미지 설정 background-repeat background-repeat: no-repeat 배경 이미지 반복 여부 설정 background-attachment background-attachment: fixed 배경 고정 여부 설정 background-color background-color: #fff 배경색 설정 background-position background-position: top 배경 이미..
box-shadow: [h-shadow] [v-shadow] [blur] [spread] [color] [inset] / none; 속성 설명 h-shadow 그림자의 수평(x축) 거리를 나타냅니다. v-shadow 그림자의 수직(y축) 거리를 나타냅니다. blur 그림자의 흐림 정도를 나타냅니다. spread 그림자의 거리를 나타냅니다. color 그림자의 색을 나타냅니다. inset 그림자의 효과를 내부로 나타냅니다. box-shadow shadow01 shadow02 shadow03 shadow04 shadow05 shadow06 shadow07 shadow08 shadow09 shadow10 .shadow01 {box-shadow: 0px 0px 5px rgba(0,0,0.8);} .shadow0..
견고성 학습목표 1. 마크업 오류의 방지 방법을 알 수 있다. 2. 웹 어플리케이션 접근성 준수 제공 방법을 설명할 수 있다. 견고성(Ruggedness) 웹 사이트를 만들 때 다양한 기술이나 환경에서도 문제없이 잘 동작하고, 오류 없이 정보를 잘 전달할 수 있도록 만들자는 원칙 문서의 뻐대라고 할 수 있는 마크업 언어를 문법적으로 오류가 없도록 제작하는 것이 가장 기본이다. 문법적인 오류가 있다면 사용하는 브라우저 및 보조기기에 따라 오류를 해석하는 방법이나 정보를 전달하는 기능등에서 차이가 발생할 수 있고 이러한 차이로 인해서 사용자는 웹 콘텐츠의 인식, 이해, 사용에 영향을 받게 된다. 웹 접근성 검사항목 - 견고성 마크업 오류 방지: 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오..
이해의 용이성 (2) 학습목표 1. 콘텐츠 선형화를 이해하고 콘텐츠를 제공할 수 있습니다. 2. 표의 구성 항목을 이해하고 콘텐츠를 제공할 수 있습니다. 3. 레이블 제공 항목을 이해하고 콘텐츠를 제공할 수 있습니다. 4. 오류 정정 항목을 이해하고 콘텐츠를 제공할 수 있습니다. 웹 접근성 검사항목 - 이해의 용이성 콘텐츠의 선형 구조: 콘텐츠는 논리적인 순서로 제공해야 한다. 표의 구성: 표는 이해하기 쉽게 구성해야 한다. 레이블 제공: 입력 서식에 대응하는 레이블을 제공해야 한다. 오류 정정: 입력 오류를 정정할 수 있는 방법을 제공해야 한다. 콘텐츠 선형 구조 1. 콘텐츠 선형 구조의 개념 웹 문서를 제작할 때 뼈대가 되는 HTML 마크업 언어로 먼저 논리적인 순서에 맞게 개발하고 이에 CSS를 적..
HTML - form: method 데이터를 전송하는 방법: method 속성 method를 지정하지 않으면 get방식으로 동작 (기본값) get : url을 통해서 데이터를 전송 post : url이 아닌 다른 방싱으로 데이터를 숨겨서 전송 1. Get방식 URL을 통해서 데이터를 전송하는 방식 서버 쪽으로 데이터를 전송할 때 웹브라우저는 URL뒤에다가 ?id=egoine이라는 사용자가 입력한 데이터를 전송 → method.php.라는 것이 열릴 때 id=egoing이라는 url값을 인지해서 어떤 작업을 처리함 비밀번호가 url에 그대로 노출 → 정보가 어떤 경우에는 url로 전달하는 것이 필요할 때가 있 어떤 경우에는 감춰서 전달할 필요가 있음 2. Post방식 URL이 아닌 다른 방식으로 데이터를 ..
HTML - form: label label form의 입력창에 이름을 붙여주는 태그 누구의 label인지 정확하게 표현하기 위해 input의 id값과 label의 for값을 동일하게 연결시켜준다. → 시각적인 변화는 없지만 기능상 label을 클릭하면 해당 텍스트 필드로 커서가 이동한다. text : textarea : default value text : textarea : default value id를 쓰지 않는 방법으로는, label로 해당 input태그를 감싸주어도 같은 결과가 나온다. text : textarea : default value text : textarea : default value checkbox인 경우도 동일한 방법으로 텍스트를 클릭해도 체크박스가 체크되게 만들 수 있다. ..
HTML - form: hidden hidden field 서버로 데이터를 전송하는데 UI가 필요없거나 몰래 데이터를 전송해야 하는 겅우 이용하는 기능 hidden : UI는 없지만 서버로 데이터를 전송 type이 hidden인 input태그는 화면상 표시가 되지 않지만 hide라는 이름으로 egoing이라는 값을 가지고 있음 → 텍스트 필드에 아무 것도 입력하지 앉고 제출하면 "http://localhost/hidden.php"로 hide는 egoing이라는 값이 전송
HTML - form: buttom Button 버튼을 생성하는 속성 submit : 제출 버튼 생성 - value 속성: 제출 버튼에 나타내는 내용을 지정 (기본값: '제출') button : 버튼 생성(기본값이 없기 때문에 value값을 정해줘야 함) - submit은 누르면 새 창이 뜨지만 button은 아무 변화 없음. 즉, button은 submit과 다르게 버튼의 UI만 만들어지는 것. 기능을 주려면 자바 스크립트와 함께 활용해야함 reset : 재설정 버튼 생성 (reset이 속해있는 form태그 아래의 사용자가 입력한 모든 정보가 초기화)
HTML - form: 선택 Dropdown List 제한된 공간 안에서 여러 개의 선택지를 선택할 수 있도록 하는 기능 : option들을 묶어 dropdown list를 만듦 : 선택 항목 - value 속성 :실제로 컴퓨터에 전송되는 정보 붉은색 검은색 파란색 붉은색 검은색 파란색 HTML - form: radio, checkbox Radio button 사용자에게 한 개의 선택지를 선택해서 제출할 수 있도록 하는 기능 (단일 선택) : 라디오 버튼 생성 : 같은 name 값으로 묶인 radio 버튼 중 1개의 버튼만 선택 가능 붉은색 : 검은색 : 파란색 : 붉은색 : 검은색 : 파란색 : Check Box 사용자에게 여러 개의 선택지를 선택해서 제출할 수 있도록 하는 기능 (다중 선택) : 같은..