Web's study wjsdud159

어피니티 다이어그램(affinity diagram) 학습목표 • 사용자의 니즈(needs)와 제공하는 콘텐츠 간의 갭(gap)을 분석할 수 있다. • 갭 분석한 결과를 토대로 콘텐츠의 방향성을 결정할 수 있다 • 갭 분석한 결과에 의해서 결정한 콘텐츠 방향성에 따라서 주요 콘텐츠 수급 계획을 수립할 수 있다. 어피니티 다이어그램(affinity diagram) 어피니티 다이어그램은 파편화되고 불명확한 방대한 정보를 논리적이고 응집력 있는 그룹 으로 조직화하고 분류하는 기법이다. 이 기법의 결과물로는 제한된 그룹의 수이며, 기대하 는 목적은 보다 더 좋은 아이디어를 발굴하거나 문제를 좀 더 이해하는 것이다. 어피니티 다이어그램 활용 유형 (크게 3가지 유형에서 어피니티 다이어그램을 활용한다.) 아이디어 도..

기능(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), 목적, ..

UI 아키텍처 설계 결정된 콘텐츠와 기능에 따라서 정보 구조를 설계할 수 있다. 정보구조 설계에서의 모호성 정보구조 설계에서의 모호성분류 시스템은 언어 기반 위에서 성립되는 것이며, 언어는 하나의 단어로 여러 가지 뜻을 나타내는 경우가 많다.‘배’라는 단어도 먹는 배와 타는 배 그리고 사람의 배와 같이 다양한뜻이 있다. 이와 같이 단어의 모호함은 정보를 분류하는 시스템을 구축하는 데 불안정한 요소로 작용한다 홈페이지에서 우리는 정보의 그룹을 설명할 때 대부분의 경우 단어를 사용해서 표현을 하는데, 이런 언어의 모호함으로 이용자에게 혼돈을 줄 수 있으며 이런 문제들이홈페이지 전체에서 일어난다면 심각한 문제가 될 수도 있다. 정보를 분류할 때는 이런 모호 성을 충분히 염두에 두고, 되도록이면 이용자들이 한번..

사용자 리서치 조별 발표 PPT자료 입니다. 팀원: 정 소희 고 정윤 주 선영

비디오 - video 비디오를 웹페이지에 삽입할떄 쓰는 태그는 비디오태그 동영상 마다 지원하는 브라우저 동영상 포맷이 다르다.

CSS 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 배..

normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity Porperty Description normal 배경색의 기본 값을 정의합니다. multiply 더 어두운 색으로 변경됩니다. screen 더 밝은 색으로 변경됩니다. overlay 원래 색상의 농도와 밝기를 변경합니다. darken 어두운 색으로 변경됩니다. lighten 밝은 색으로 변경됩니다. color-dodge 기본 색상을 밝게 합니다. saturation 채도의 변화로 색상이 변경됩니다. color 색을 통해 색상을 변경합니다. luminosity 밝기를/ 통해 색상을 변경합니다. original multip..

border-radius : [border-top-left-radius] [border-top-right-radius] [border-bottom-right-radius] [border-bottom-left-radius] border-radius border01 border02 border03 border04 border05 border06 border07 border08 border09 border10 .border01 {border-radius: 0;} .border02 {border-radius: 5px;} .border03 {border-radius: 10px;} .border04 {border-radius: 15px;} .border05 {border-radius: 20px;} .border06..

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,0.8);} .shad..

접근성의 미래 현재 가장 큰 웹 전근성의 문제점 중 하나는 마크업 기술 중심으로 움직인다는 점입니다. 접근성과 관련된 국제표준은 이미 2008년에 신기술을 고려하고 HTML중심의 웹WCAG 1.0에서 다양한 신기술을 고려한 WCAG 2.0으로 변화가 있었습니다. 모바일 접근성 해당 영역에 따라 조금씩 특성에 맞추어 줄 때 실제 실무자들에게 가이드가 될 수 있습니다. 최근에는 각광을 받고 있는 스마크워크센터에 대한 스마트워크 접근성을 위해 2012년 7월 방송통신위원회에서 ‘장애인 스마트워크 접근성 가이드북’을 발표했습니다. 2009년 아이폰의 도입을 계기로 국내는 물론 전세계 스마트폰 보급률이 급증했습니다. 스마트폰 예상 출하량은 그림과 같이 2007년 0.99억대에서 2016년 8.5억대로 약 9.5배..

웹개발자도구 웹 개발자 도구란 웹게발에 있어서 필요한 여러가지 분석작업 실시간으로 수정해서 테스팅하는것을 도와주는 도구이다. 웹페이지에 html코드가 보고싶을땐 오른쪽 마우스를 클릭하여 검사라는 것을 눌러 코드를 본다. 페이지 소스보기도 html코드를 볼수있다. 페이지에서 검사를 눌러 페이지 소스를 볼떄 화살표 모양 옆에 toggle Device mode라는 것이있는데 toggle 라는것은 스위치를 누르면 켜지고 누르면 꺼지는 스위치를 뜻한다. 디바이스는 장치라는 뜻이다. toggle을 누르게 되면 데스크탑에서 웹페이지를 만들기 좋은 크기들을 시뮬레이션해주는 도구다.

외부문서삽입 - iframe 어떤 문서안에 다른문서의 내용을 가져오는 기법 아이프라임은 외부의 어떤 컨텐츠를 가져올떄 쓴다. 아이프라임은 보안에 취약하다.