프로토타입 제작 학습목표 - 선정된 아이디어를 다양한 방법으로 프로토타입을 제작할 수 있다. - 제작된 프로토타입이 목적에 맞게 구성되었는지 분석하고 검증할 수 있다. 프로토타입의 구성요소와 특징에 대한 분석을 통해서 수정 사항을 도출하고 이슈를 보완할 수 있다. 프로토타입 (Prototype) 프로토타입은 상품/서비스가 출시되기 전 만들어진 원형(archetype)을 의미한다. 프로토타이핑(prototyping)은 사용자의 요구사항, 사용자리서치를 통해서 도출된 니즈, 아이디어 등의 개념(Concept)을 담은 모형을 만들어 이후 사용자와 상품/서비스가 제공하는 기능의 추가, 변경 및 삭제 등을 요구사항에 대해 소통하는 도구, 개발이 진행되는 동안 개발 참여자 간에 개념을 공유하는 도구를 만드는 설계과..
요구사항 분석, 콘셉트 아이디어 도출 학습목표 - UI/UX 개발 과제의 목표 충족을 위하여 사용자 리서치 결과를 토대로 Ui/UX 콘셉트 아이디어를 도출할 수 있다. 요구사항 분석(Requirement Analysis) 1. 요구사항(Requirement) 요구사항은 제품, 서비스 등의 개발의 결과물이 충족하여야 할 대상으로 아래와 같이 정의된다. 어떤 문제를 해결하거나 특정의 목정을 위하여 사용자가 필요로 하는 조건이나 능력 계약, 표준, 명세 또는 다른 형식으로 제시된 문서에 맞추어 시스템이나 시스템 구성 요소가 갖추어야 할 조건이나 능력. 요구 사항들은 시스템이나 시스템 구성 요소의 후속 개발 단계의 자료가 된다. (한국정보통신기술협회. IT용어사전) 2. 요구사항 분석(Requirement An..
견고성 학습목표 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 사용자에게 여러 개의 선택지를 선택해서 제출할 수 있도록 하는 기능 (다중 선택) : 같은..
HTML - form: 문자입력 사용자로부터 텍스트를 입력받을 수 있는 속성 : 사용자로부터 텍스트를 입력받음. ID: ID: - name 속성: 서버가 사용자가 입력한 값을 알아내게 하기 위해 부여하는 이름. (어떤 정보를 서버로 전송하려면 사용자가 입력한 값에 이름을 부여해야 서버가 그 값을 알아낼 수 있음 / 모든 form태그에서 필요) - value 속성: 사용자가 웹페이지를 열었을 때 기본적으로 보여지는 값. (기본값) :사용자로부터 password를 입력받음. Password: Password: 여러 줄의 텍스트를 입력받기 위한 입력창을 설정 : 사용자로부터 여러줄의 텍스트를 입력받음. 텍스트를 입력하세요. 텍스트를 입력하세요. - cols 속성 : 텍스트 영역이 보이는 너비값을 지정. 너비값..
HTML -표1: 기본 table 태그 표를 삽입해주는 태그 table 태그 td 태그 (table data) : 각각의 항목을 작성 항목 tr 태그 (table row) : 테이블의 행을 나타낸다. 같은 행에 속하는 td 태그들을 묶어준다. border : 테두리 지정 HTML - 표2: 구조 table 구조화 아래 태그들을 사용하지 않아도 시각적인 면에서 차이는 없지만 정보를 구조화하는 태그들을 사용하여 표현하므로써 가치있는 정보를 만들어낸다. thead 태그 : table의 제목 th 태그 : 데이터의 제목 (thead 안에 작성하는 항목) tbody 태그 : table의 본문 tfoot 태그 : table의 푸터 thead는 코딩 시 tbody보다 아래에 써도 브라우저 상의 표에서는 가장 상단에 ..