Box-Shadow box-shadow : [h-shadow] [v-shadow] [blur] [spread] [color] [inset] / none; Property Description 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 5p..
Wizard of OZ 참가자들이 실제로 작동하는 시스템 프로토타입을 사용하고 있다고 믿도록 설정하고, 실제로는 연구자가 배후에서 시스템 역할을 대신하는 방법이다. 이 방법의 목적은 사용자가 개발 예정인 제품이나 인터페이스를 프로토타입 제작에 비용을 투자하기 전 이용하도록 하는 것이다. 또한 새로운 제품에 대한 참가자의 개방성과 관심을 측정하고 혁식적인 기술에 대한 경계 조건을 탐구할 수 있는 프레임워크를 제공한다. 이 방법은 유연하고 반복 적용이 가능하여 탐색적이면서 개념적인 초기 단계에서 디자인을 유도하고 안내하기 위해서 뿐만 아니라 실험을 통해 도출한 결과는 디자인 과정 마지막까지 참고할 수 있는 중요한 참고 자료가 된다. Data Modeling 실세계를 모델화 하고 모델을 메타 모델화 하여 이를..
리서치 수행하기 교내외 리서치를 수행하기 위하여 목표 고객을 모집(recruiting)할 수 있다. 피험자 모집 : 사용자리서치에 참여하는 목표 고객(피험자)을 모집하는 방법은 직접 모집하거나 리서치 대행사에 의뢰를 하는 방법의 구분이 있을 수 있다 피험자 선별(Screening) : 피험자를 모집하는 단계에서 리서치의 기준에 적합하지 않은 대상을 식별하여 걸러내는 선별 작업을 수행한다. 사용자리서치 수행 기법 개별 인터뷰 :사용자와의 1:1 대화를 통해 조사를 수행하는 방법. 맥락 인터뷰 : 일상적이고 자연스러운 업무 환경에서 사용자를 관찰하면서 업무에 대해 이야기를 듣는 방식으로 진행하는 인터뷰 설문조사 : 대규모의 집단을 대상으로 패턴을 찾기 위한 방법으로 사용자리서치 목적에 맞게 설문지 를 설계하..
Font Awesome Font Awesome 5는 Script 또는 CSS로 연결할 수 있고, 각 방법에 대하여 CDN을 이용하거나 다운로드 받은 파일을 이용할 수 있습니다. 인라인 요소와 함께 사용하도록 설계되었습니다. the i>및 span> 요소는 아이콘에 널리 사용됩니다. 큰 아이콘 : fa-lg(33 % 증가), fa-2x, fa-3x, fa-4x또는 fa-5x클래스 아이콘들이 컨테이너 상대적인 크기 증가 시키는데 사용된다. 목록 아이콘 : fa-ul및 fa-li클래스는 정렬되지 않은 목록에 기본 총알을 대체하는 데 사용됩니다. 경계가 있고 당겨진 아이콘 : fa-border, fa-pull-right또는 fa-pull-left 클래스는 풀 따옴표 또는 문서 아이콘에 사용됩니다. 애니메이션..
사용자 리서치 계획하기 리서치 목적과 목표고객, 내용, 범위, 방법, 일정 들을 포함한 국내외 리서치 실행계획을 수립할 수 있다 조사목적과 얻고자 하는 자료의 특성 및 가용시간과 예산에 따라 자체 수행 또는 아웃소싱을 국내외 시장을 대상으로 선정할 수 있다. 선정된 국내외 목표 시장 내의 사용자를 대상으로 리서치 내용을 설계하고 리서치 수행을 위한 가이드를 작성할 수 있다. UX 리서치의 필요성 사용자 없이는 사용자 경험이 존재할 수 없습니다. 또한, 사용자 경험을 생성하려면 어렵고 까다로운 질문에 대한 많은 문제 해결하여야합니다. 모든 사람들이 제품 / 서비스를 다르게 사용하기 때문에이 질문에 대한 대답이 중요합니다. 마찬가지로 우리는 자신의 방식이 옳다는 것을 일반화하고 생각하는 경향이 있습니다. 우..
UI/ UX 계획수립 1.1 환경 분석 결과를 토대로 UI/UX 개발을 수행하고자 하는 목적 및 목표를 정의하고 목표에 따라서 수행하고자 하는 범위를 수립할 수 있다. 1.2 수행 작업 및 작업 산출물의 속성을 근거로 소요 공수(MM, Man Month), 비용을 산정 할수있다. 1.3 UI/UX 개발에 필요한 작업, 작업 산출물에 따라서 해당 작업의 소요 기간을 바탕으로 일정을 계획할 수 있다. 1.4 프로젝트 수행 시 발생할 수 있는 위험요소를 식별하고 이를 관리하기 위한 계획을 수립할 수 있다. 폭포식(Waterfall Model) 접근 프로세스 순차적인 소프트웨어 개발 프로세스(소프트웨어를 만들기 위한 프로세스)로, 개발의 흐름이 마치 폭포수처럼 지속적으로 아래로 향하는 것처럼 보이는 데서 이름이..
파비콘 웹페이지에 접속했을때, 상단 탭에 보여지는 아이콘을 일컫습니다. 파비콘(favicon) 실전 정리 적어도 아래의 ICO 파일은 준비합니다./p> 크기 파일명 용도 16x16 & 32x32 favicon.ico IE를 위해 필요한 기본입니다. 조금 느려지더라도 iOS와 Android를 고려하겠다면 아래와 같은 PNG 파일을 준비합니다. 크기 파일명 용도 152x152 favicon-152.png 일반적으로 iOS와 Android에서 사용하는 아이콘, 기기에 따라 자동으로 크기가 줄여집니다. 좀 더 완벽한 파비콘을 설정하기 원한다면 아래의 표를 참고하여 PNG 파일을 준비하도록 합니다. 크기 파일명 용도 32x32 favicon-32.png 일부 오래된 하지만 너무 오래된 Chrome은 ICO를 제대..
경쟁 분석하기 2.1 UI/UX 경쟁 분석을 위하여 국내외 경쟁사의 제품을 분석할 수 있다. 2.2 경쟁력 있는 UI/UX 서비스를 개발하기 위하여 경쟁사의 서비스를 분석할 수 있다. 2.3 경쟁력 있는 UI/UX 요소기술을 개발하기 위하여 경쟁사의 요소 기술을 분석할 수 있다. 3C 분석 동일한 고객을 대상으로 경쟁하고 있는 자사와 경쟁사를 비교, 분석함으로써 자사의 차별화와 경쟁 승리/우위확보 전략을 찾는 것입니다. 고객(Customer) 분석 : 고객의 범위를 정의하여 대상시장을 명확히 하여, 고객이 원하는 것에 대한 정확하고 객관적인 파악을 통해 새로운 서비스 방안을 예측 자사(Company) 분석 : SWOT 분석 등을 활용하여 자사의 시장에서의 강/약점을 분석 경쟁사(Competitor) 분석..