jiho__1010 jiho__1010

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

Animation - Roket See the Pen Animation - Roket by 김지호 (@jiho1010) on CodePen.

컨텐츠 요소를 가운데 정렬하는 방법 인라인 구조를 가운데 정렬하는 방법(text-align: center) 블록 요소를 가운데 정렬하는 방법(margin: 0 auto) 테이블을 이용한 가운데 정렬하는 방법(vertical-align: middle) 포지션을 이용한 가운데 정렬하는 방법(margin) 포지션을 이용한 가운데 정렬하는 방법(translate) 포지션을 이용한 가운데 정렬하는 방법(margin:auto) 플랙스를 이용한 가운데 정렬하는 방법(display:flex) 인라인 구조를 가운데 정렬하는 방법(text-align: center) See the Pen Center Type1 by 김지호 (@jiho1010) on CodePen. 블록 요소를 가운데 정렬하는 방법(margin: 0 aut..

UI/UX 콘셉트 도출하기 도출된 아이디에이션(Ideation)의 프로토타입 검증 결과에 따라서 확정된 UI/UX 콘셉트 를 결정할 수 있다. 도출된 UI/UX 콘셉트를 반영하여 목표 고객인 페르소나(persona)를 추출할 수 있다. UI 설계를 위해서 UI/UX 콘셉트에 적합한 시나리오(scenario)를 작성할 수 있다. User Story 디자인을 개발할 특징 및 태스크를 설명하는 방법이다. 프로젝트의 특징을 사용하는 주체, 기능, 목적을 정의합니다. 프로젝트에 연관된 실무자들을 위한 커뮤니케이션 도구 역할을 합니다. 애자일 방법론에서 많이 사용합니다. User Story는 사용자 목표를 기준으로 작업합니다. User story Method As (사용자) I Want You (기능) In Ord..

페이퍼프로토타입 페이퍼 프로토타입 동영상입니다.

Animation animation: {name} {duration} {timing-fuction} {delay} {iteration} {direction} {fill-mode} {play-state} Property Description animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션이 키프레임 움직임을 설정합니다. animation-iteration 애니메이션이 반복 횟수를 설정합니다. animation-direction 애니메이션이 방향를 설정합니다. animation-fill-mode 애니메이션이 시작되기 전이나 끝나고 어떤 값을 적용할 지 ..

TRANSFORM Transform 변환은 엘리먼트의 좌표를 조작하여 위치나 크기, 회적 각도 등을 변경하는 기법입니다. 변환함수는 이동(translate), 확대(scale), 회전(rotate), 기울이기(skew) 등의 주용 4가지 함수와 행렬변환, 원근변환이 있습니다. 이동(translate) 확대(scale) 회전(rotate) 기울이기(skew) 2d변환 translate(x,y) scale(x,y) rotate(angle) skew(x-angle,y-angle) 3d변환 translate3d(x,y,z) scale3d(x,y,z) rotate3d(ax,y,z,angle) x축 변환 translateX(x) scaleX(x) rotateX(angle) skewX(angle) y축 변환 tran..