Jung Yoon's study 고정윤

프로포 타입 제작 학습목표 • 선정된 아이디어를 다양한 방법으로 프로토타입을 제작할 수 있다. • 제작된 프로토타입이 목적에 맞게 구성되었는지 분석하고 검증할 수 있다. • 프로토타입의 구성요소와 특징에 대한 분석을 통해서 수정 사항을 도출하고 이슈를 보완할 수 있다. 프로토타입 (Prototype) 프로토타입은 상품/서비스가 출시되기 전 만들어진 원형(archetype)을 의미한다. 프로토타 이핑(prototyping)은 사용자의 요구사항, 사용자리서치를 통해서 도출된 니즈, 아이디어 등 의 개념(Concept)을 담은 모형을 만들어 이후 사용자와 상품/서비스가 제공하는 기능의 추 가, 변경 및 삭제 등을 요구사항에 대해 소통하는 도구, 개발이 진행되는 동안 개발 참여 자간에 개념을 공유하는 도구를 만..

요구사항 분석, 콘셉트 아이디어 도출 학습목표 UI/UX 개발 과제의 목표 충족을 위하여 사용자 리서치 결과를 토대로 UI/UX 콘셉트 아이디어를 도출할 수 있다. 요구사항분석(requirement analysis) 1. 요구사항(Requirement) 요구사항은 제품, 서비스 등의 개발의 결과물이 충족하여야 할 대상으로 아래와 같이 정의 된다. - 어떤 문제를 해결하거나 특정의 목적을 위하여 사용자가 필요로 하는 조건이나 능력. - 계약, 표준, 명세 또는 다른 형식으로 제시된 문서에 맞추어 시스템이나 시스템 구성 요 소가 갖추어야 할 조건이나 능력. 요구 사항들은 시스템이나 시스템 구성 요소의 후속 개발 단계의 자료가 된다. (한국정보통신기술협회. IT용어사전) 2. 요구사항분석(Requirement..

선택(Drop down List) 드롭다운박스 or 콤보박스를 만들어 주는 에 대해 알아 봅시다. 동영상 코딩 동영상 코딩_구조 나눠 보기 단인 선택, 다중선택 단일선택 : radio / 다중선택 : checkbox 라디오 버튼 체크박스 라디오/체크박스 코딩

입력양식 - form: 문자 입력 : name라는 속성은 모든 form태그에 필요한 속성입니다. : value는 사용자가 사이트에 들어왔을 때 해당 텍스트필드에 보이는 기본 값 : 여러줄을 입력할 수 있는 텍스트 필드 : cols은 colum(뜻 : 행)의 줄임말 입니다. 50글자가 입력될 수 있을 만큼 폭이 커집니다. : 문자 10줄을 입력할 수 있을 만큼 폭이 커집니다. 기본값 입력 : 기본값은 그 텍스트 사이에 입력할 수 있습니다. 출처 : 생활코딩

입력양식-form 기본 사용자가 입력한 정보를 서버로 전송할 때 사용하는 것들 : 설정을 하고 제출 버튼을 누루면 url 이 "주소" 로 바뀝니다. : 텍스트를 입력하는 상자가 생김(텍스트 필드 생성) : 이름을 지정해 줬기 때문에 각각의 "이름의 값" 으로 데이터가 전송 됩니다. : 비밀번호를 점으로(...)나오게 하기/ 어떤 글자로 했는지는 감춰지는 효과 : 이름을 지정해 줬기 때문에 각각의 "이름의 값" 으로 데이터가 전송 됩니다. : 이름을 지정해 줬기 때문에 각각의 "이름의 값" 으로 데이터가 전송 됩니다. : 제출 이라는 "버튼" 이 생성된다. input type : 필수속성입니다. 다음은 타입속성에서 사용할 수 있는 값입니다. text : 단일행 텍스트 입력필드 password : 비밀번호 ..

학습목표 - 이해의 용이성에 속한 검사항목 중 콘텐츠 선형화를 이해하고 콘텐츠를 제공할 수 있습니다. - 표의 구성 항목을 이해하고 콘텐츠를 제공할 수 있습니다. - 레이블 제공 항목을 이해하고 콘텐츠를 제공할 수 있습니다. - 오류 정정 항목을 이해하고 콘텐츠를 제공할 수 있습니다. 학습내용 - 콘텐츠 선형구조 - 표의 구성 - 레이블 제공 - 오류 정정 1. 콘텐츠 선형화 가. 콘텐츠 선형구조의 이해 콘텐츠 선형구조는 웹 문서를 제작할 때 뼈대가 되는 HTML 마크업 언어로 먼저 논리적인 순서에 맞게 개발을 하고 여기에 대한 레이아웃이나 장식 등의 표현을 위해 CSS를 적용하여 주게 되는데 CSS를 통해 꾸며진 상태의 순서가 아닌 CSS가 제거된 상태에서의 콘텐츠 순서가 우리가 콘텐츠를 읽어나갈 때 ..

사용자리서치 수행 학습목표 리서치 실행계획의 방법론에 따라서 리서치를 수행할 수 있다. 사용자리서치 수행 기법 다음은 사용자리서치 수행에는 적용하는 대표적인 기법들의 예이다. 목표한 사용자리서치 결과를 도출하기 위해 여러 기법이 혼용되기도 하며, 사용자리서치 를 수행한 조직과 제품/서비스의 특성에 따라 고유의 기법을 개발하고 사용하기도 한다. 경우에 따라서는 사용자리서치의 진행에 따라 계획한 기법 외에 보다 적합할 것으로 예상 되는 기법을 적용하면서 계획을 수정해 진행하거나, 이를 반영하여 반복/점진적 프로세스 에 따라 추가적인 사용자 리서치를 수행하기도 한다. 1. 개별 인터뷰 사용자와의 1:1 대화를 통해 조사를 수행하는 방법. 대화는 직접대면 또는 유선상의 대화 일수도 있으며 사용자의 업무, 일상생..

표1 : 기본 표를 영어로 하면 'table'입니다. 1. 태그 - table data의 약자 입니다. 즉 표의 각각의 실제 데이터들을 의미 합니다. - 항목 하나하나를 태그 안에 넣어 줍니다. 2. 태그 - tr은 tabler row의 약자 입니다. - 로 만든 항목을 태그로 묶어 행을 만들어 줍니다. ( 웹 브라우저는 안에 있는 들을 같은 행으로 묶어 줍니다.) 3. 태그 - 태그들 모두를 로 묶어 줍니다. 4. boder 속성을 이용해서 "테두리" 주기 Information 실제로 table을 꾸미기 위해서는"css"를 이용해야 더욱 보기 좋게 만들 수 있다. 과거에는 웹사이트를 만들떄 테이블로 레이아웃을 만들었지만(표는 원래 레이아웃을 만드는 태그가 아님), 코드가 복잡하고 실용성이 없어 W3C에..

주요태그 3.이미지 - img 이미지 - img img : image의 줄임말 입니다./ 문서에 이미지를 포함 합니다. 1. 태그라는 문법을 만든 컴퓨터 공학자 들은 태그의 이름만으로 태그의 정보가 부족하다는 것을 인식합니다. 그래서 새로운 문법을 추가합니다. 그것은 바로 source입니다. 이 단어가 너무 길기 때문에 'src'로 하기로 합니다. 여기에 우리가 원하는 이미지의 주소를 넣습니다. 이렇게 하면 웹브라우져는해당 주소를 이미지로서 표현해 줍니다. 2. 이미지에 사이즈를 조정하고 싶을때 사용합니다. 3. 이미지에 사이즈를 준 후 속성alt(alternative text) 을 줍니다. 이미지가 깨지거나 사용할 수 없을 때 대안으로 사용할 수 있는 대체재 라는 뜻 입니다. 4. 이미지에 마우스를 올..

태그의 설명 - 추천 검색어 : html new line tag - 줄바꿈이라는 시각적 의미만을 가지고 있기 때문에 무엇인가를 감쌀 필요가 없습니다. 따라서 닫지 않습니다. 새로운 행에서부터 입력이 시작되도록 합니다. A forced line-break의 줄임말입니다. 태그는 void element(보이드 엘리먼트) 입니다 : 내용이 없는 태그, 즉 그저 줄바꿈 태그 이기때문에 열리는 태그만 존재합니다(닫히는 태그 없음!!) 태그는 줄바꿈 태그이고 단락을 나타내는 태그이기 때문에 의미에 맞는 태그를 잘 사용해야 합니다. 허나 ,태그를 쓰는 것이 '정보'로써 좀 더 가치있는 html이 됩니다. 출처 : 생활코딩

주요태그 : 단락-P 태그의 설명 - 추천 검색어 : html paragraph tag - paragraph는 단락 이라는 뜻입니다. 열리는 태그와 닫히는 태그가 존재 합니다. 1. 태그는(단락간의 간격의 값이) 정해져 있습니다. 따라서 이때 그 거리를 조정할 수 있는 방법이 2가지 있습니다. ① 태그로 사용자가 줄바꿈을 많이 원할 때 여러번 사용하여 간격간의 넓이를 줄 수 있습니다. ② css를 이용하여 여백을 줄 수 있습니다. 2. 태그는 줄바꿈 태그이고 단락을 나타내는 태그이기 때문에 의미에 맞는 태그를 잘 사용해야 합니다. 허나 ,태그를 쓰는 것이 '정보'로써 좀 더 가치있는 html이 됩니다. ps. css 방법 : 이렇게 하면 여백과 여백사이가 40px 정도 떨어 지게 됩니다. 출처 : 생활코딩

HTML의 변천사와 통계 HTML의 연대기 클릭 : martinrinehart HTML의 변화와 역사를 알 수 있습니다.(최초의 HTML 태그를 알 수 있습니다.) 사이트에 들어가면 권장하지 않는 것과 절대 사용하면 안되는 것을 확인 할 수 있습니다. HTML5까지 여전히 살아 있는 태그는 상당히 중요한 태그 입니다. 각각의 태그들이 언제 출현 했는지 알면 학습자에게 도움이 됩니다. HTML의 통계 클릭 : advancedwebranking 웹 페이지 통계 페이지 입니다. 큰 웹사이트는 태그를 1000여개 정도 사용하는 사이트들도 있습니다. 중복되는 태그를 제거하면 약 19개 정도의 서로 다른 태그가 있습니다. 해당 태그에 쓰는 속성의 빈도수도 알 수 있습니다. 느낀점 태그의 통계를 알 수 있기때문에 제..

사용자 리서치 계획수립 학습목표 - 리서치의 목적과 목표 고객, 내용, 범위, 방법, 일정 등을 포함한 리서치 실행계획을 수립할 수 있다. - 조사목적과 얻고자 하는 자료의 특성 및 가용시간과 예산에 따라 자체 수행 또는 아웃소싱을 선정할 수 있다. 사용자 리서치 사용자리서치는 사용자와의 직/간접적인 접촉을 통해 사용자의 식별을 포함하여 사용자에 대한 정보, 사용자가 갖는 정보를 조사하는 활동이다. 일반적인 마케팅 차원의 사용자리서 치와 UI/UX와 관련한 사용자 리서치는 다음과 같은 특성을 갖는다. (Tulathimutte, Tony and Nate Bolt) 1. 마케팅리서치 통계분석이나 설문조사를 통하여 현상적인 정보를 조사한다. 사람들의 의견, 선호도를 알수 있다. (1) 마케팅 리서치의 주안점 ..

개발도구 개발도구 추천 atom (추천 확장기능 emmet) sublime text (추천 확장기능 emmet) bracket 출처 : 생활코딩

학습목표 - 이해의 용이성을 높이기 위한 검사항목 중 기본 언어 표시를 이해하고 콘텐츠를 제공할 수 있다. - 사용자 요구에 따른 실행 항목을 이해하고 콘텐츠를 제공 할 수 있다. 1.기본언어 표시 기본언어의 개념 주로 사용하는 언어를 명시함 기본언어(웹사이트에서 주로 사용하는 언어)_명시 화면 낭독기 : 해당언어의 정확한 발음으로 콘텐츠 이해에 도움 음성 지원 소프트 웨어 : 해당언어의 정확한 발음으로 콘텐츠 이해에 도움 기본언어 표시의 필요성 목적 다양한 언어 공부를 공부하거나 이용하는 사용자에세 중요한 지표 기본언어 표시의 검사항목 해설 검사항목17(기본 언어 표시) 주로 사용하는 언어를 명시해야 한다. 중간에 언어가 바뀌는 경우 lang 속석을 통해 언어를 바꿔주면 더 이해하기 좋은 사이트가 됨 ..

학습목표 - 깜빡임과 번쩍임 사용제한을 이해하고 콘텐츠를 제공할 수 있다. - 반복영역 건너뛰기 항목을 이해하고 콘텐츠를 제공할 수 있다. - 제목 제공 항목을 이해하고 콘텐츠를 제공할 수 있다. - 적절한 링크 텍스트 항목을 이해하고 콘텐츠를 제공할 수 있다. 가. 깜빡임과 번쩍임 사용 제한 가. 깜박임과 번쩍임 사용의 이해 깜박임과 번쩍임 사용 제한의 개념 초당 3~50회 주기로 깜빡이거나 뻔쩍이는 콘텐츠를 제공하지 않아야 함 당 3~50회 주기로 깜빡이는 콘텐츠는 광과민성 발작일으킬 수 당 3~50회 주기로 깜빡이는 콘텐츠는 광과민성 발작일으킬 수 나. 깜박임과 번쩍임 사용 제한의 필요성 목적 어린이 또는 광과민성 발작 증세가 있는 사용자를 위함 다. 깜박임과 번쩍임 사용 검사항목 해설 검사 항목 ..

웹사이트 만들기 웹 사이트 만들기 순서 index.html 파일 만들기 링크를 먼저 만들기 (이유 : 우리는 각각의 링크들은 각각의 페이지들 마다 똑같이 들어갈 것이기 때문에 파일을 먼저 만들고 링크를 추가하면 중복되는 현상이 생김 링크를 다 완성한 다음에 그것을 복제하면 더 효율적으로 일을 할 수 있습니다.) 문서에 각각의 링크를 먼저 완성해 주세요. 이제 링크에 맞는 파일을 생성해 주세요. 링크에 맞게 문서를 작성해 주세요.(너무 꼼꼼히 할 필요 없어요..ㅎㅎ 실습이니까요.) 모두 작성및 생성을 했으면 잘 적용이 되었는지 주소를 바꿔가며 확인하세요.

DOCTYPE DOCTYOE _ 위키백과 "문서 형식 선언"(Document Type Declaration) 또는 DOCTYPE이란 어떤 SGML이나 XML 기반 문서 내에 그 문서가 특정 문서 형식 정의(DTD)를 따름을 지정하는 것이다. 본래 DTD에 기반한 SGML 도구를 이용해 문서 해석 가능성과 유효성을 검사하기 위한 목적으로 문서 내에 삽입되었다. HTML 문서의 규격 판 번호를 명시하는 데서 흔히 볼 수 있다. 웹 브라우저는 문서 형식 선언이 없는 HTML 문서를 쿼크 모드로 렌더링하지만 문서 형식 선언이 있는 HTML 문서를 표준 모드로 렌더링하기 때문에, 문서 형식 선언을 이용해서 어떤 웹 페이지가 모든 웹 브라우저에서 같은 레이아웃으로 제공되도록 할 수 있다. 한편 HTML5은 구조적으..