sohinggu study sohinggu

정보구조 설계하기 학습목표 - 결정된 콘텐츠와 기능에 따라서 정보 구조를 설계할 수 있다. - 사용자가 사용하는 언어를 고려하여 메뉴 및 UI 구성요소에 대하여 레이블링 (Labeling) 할 수 있다. - 사용자의 접근성, 사용성을 위하여 네비게이션(Navigation) 구조를 설계할 수 있다. 1. 정보구조 설계 (1) 정보구조 설계에서의 모호성 분류 시스템은 언어 기반 위에서 성립되는 것이며, 언어는 하나의 단어로 여러 가지 뜻을 나타내는 경우가 많다.‘배’라는 단어도 먹는 배와 타는 배 그리고 사람의 배와 같이 다양한 뜻이 있다. 이와 같이 단어의 모호함은 정보를 분류하는 시스템을 구축하는 데 불안정한 요소로 작용한다. 홈페이지에서 우리는 정보의 그룹을 설명할 때 대부분의 경우 단어를 사용해서 표..

콘텐츠 기획 학습목표 - 사용자의 니즈(needs)와 제공하는 콘텐츠 간의 갭(gap)을 분석할 수 있다. - 갭을 분석한 결과를 토대로 콘텐츠의 방향성을 결정할 수 있다. - 갭을 분석한 결과에 의해서 결정한 콘텐츠 방향성에 따라서 주요 콘텐츠 수급 계획을 수립할 수 있다. 어피니티 다이어그램(Affinity Diagram) 어피니티 다이어그램은 파편화되고 불명확한 방대한 정보를 논리적이고 응집력 있는 그룹으로 조직화하고 분류하는 기법이다. 이 기법의 결과물로는 제한된 그룹의 수이며, 기대하는 목적은 보다 더 좋은 아이디어를 발굴하거나 문제를 좀 더 이해하는 것이다. 1. 어피니티 다이어그램 활용 유형 아이디어 도출이 목적인 브레인스토밍 세션 문제 해결을 위한 세션 고객의 목소리를 경청하는 세션 2. ..

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

Blend Effect 사진에 마우스를 올려보세요 See the Pen Blend Effect by sohinggu (@sohinggu) on CodePen.

마우스 커서에 따라 움직이는 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.

NORMAL 사이트 사용자 리서치 올바른 성지식과 건강한 성관련 제품을 소개하는 성인 사이트 노멀의 사용자 리서치 자료입니다. 팀원 : ㅈㅅㅎ, ㄱㅈㅇ, ㅈㅅㅇ

웹 접근성의 미래 학습목표 1. 웹 접근성에서 파생된 다양한 영역의 접근성에 대해 이해할 수 있다. 2. 웹 접근성에 미래에 대해 이해할 수 있다. 웹 접근성의 올바른 발전 방향 접근성이 웹을 넘어 모바일 웹, 소프트웨어, 제품 등 다양한 영역에서 접근성을 확인하고, 향후 서비스 영역 전체에 접근성을 적용할 수 있는 미래에 대해 이해할 수 있어야 한다. 1. 문제점의 해결 웹 접근성의 문제점 마크업 기술 중심: 사용자 입장이나 다른 기술 영역 등 다양한 측면에서의 접근성이 아닌 오직 HTML 중심으로 보여진다 → 정보 접근성 측면에서, 웹의 영역(HTML, CSS 중심)의 굴레를 벗어나지 못한다. 접근성과 관련된 국제표준은 2008년에 신기술을 고려하고 HTML 중심의 WCAG 1.0에서 다양한 신기술을..

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

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

HTML - 외부문서 삽입: iframe

HTML - 모바일 지원

HTML - 웹 개발자 도구

HTML - 검색엔진 최적화 1 HTML - 검색엔진 최적화 2 HTML - 검색엔진 최적화 3 HTML - 검색엔진 최적화 4: 링크 HTML - 검색엔진 최적화 5: 이미지와 제목 HTML - 검색엔진 최적화 6: robotstxt&sitemap HTML - 검색엔진 최적화 7: 페이지 랭크

HTML - 의미론적인 태그