텍스트 그라디언트 애니메이션입니다.text의 배경을 360%로 설정하고 3가지 배경이 좌우 반복 이동하는 방식입니다. 예제  See the Pen 텍스트 그라디언트 by Kim Ui Hyun (@uihyunKimm) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스코드.text { -webkit-background-clip: text; -webkit-text-fill-color: transparent; }-webkit-background-clip : 배경 영역에 대한 설정으로 border-box, padding-box, content-box, text 등의 형태로 삽입이 가능합니다. -webkit-text-fill-color: trans..

앞서 다룬 글에서 리서치의 기본 개념과 프로세스에 대해 다뤘기 때문에 기법에 대해 설명하려고 합니다.우선 사용할 기법을 계획하는 법을 먼저 정리해보겠습니다.첫번 째 다이아몬드에서 세부적으로 기획할 수 있는 방법이라고 생각해주시면 될 것 같습니다. 앞서 정리한 더블다이아몬드 글을 참고 부탁드립니다.https://uihkk.tistory.com/12 디자인 리서치란?디자인 리서치의 정의디자인 프로세스에서 리서치의 중요성은 계속 대두되고 있습니다. 설계가 이루어 지기 전 단계인 조사, 기획 단계를 디자인 리서치라고 할 수 있습니다.  앞서 리서치에uihkk.tistory.com 디자인 리서치 계획 대상 선정내용 설계방법 계획일정 계획내용사용자 분류사용자 대상 선정이슈 정의질의 내용 설계리서치 가이드 작성리서치..

디자인 리서치의 정의디자인 프로세스에서 리서치의 중요성은 계속 대두되고 있습니다. 설계가 이루어 지기 전 단계인 조사, 기획 단계를 디자인 리서치라고 할 수 있습니다.  앞서 리서치에 대해 더 이해하자면 크게 두 가지의 정성적, 정량적 방식으로 나뉩니다.두 방식의 차이에 대해 정리하면 아래와 같습니다.정성적 리서치정량적 리서치기초적 원인과 동기에 대한 질적인 이해내용에 대한 분석대표성 있는 소규모비구조화, 유동적비통계적FGI, 심층 면접, 관찰 면접초기 이해의 전개, 발견, 진단자료의 계량화, 결과의 일반화수치에 대한 분석대표성 있는 대규모구조화, 방식 변경 불가통계적설문 조사, 스캐너 데이터최종 단계 측정, 예측, 추정*FGI(focus Group Interview) : 표적집단 인터뷰, 전문가가 특정..

우리는 일상 속에서 그 본연의 목적을 충분히 달성함으로써 인생의 의미를 풍요롭게하고 시작과 끝을 선명하게 구분할 수 있는 어떤 경험들을 하곤 한다. 이처럼 우리의 삶에 필수적인 요소로서 ‘참 좋은 경험이었어.’하고 자연스럽게 회상할 수 있는 바로 그 경험이 ‘진정한 경험’이다.   경험학습 이론을 대표하는 미국의 교육학자이자 철학자였던 John Dewey (존 듀이)는진정한 경험에 대해 위와 같이 정의하였습니다. 그렇다면, 사용자에게 ‘참 좋은 경험’을 제공하는 것이 UX의 본질이란 사실을 염두에 두고 그가 제시한 3가지 경험의 원리 중 상호작용의 원리를 살펴보자.   상호작용의 원리경험의 주체와 경험의 객체인 환경이 서로 주고 받는 상호작용. 인간이 행하는 행동과 그 행동의 결과로 환경이 인간에게 되돌..

UXUser experience, 사용자 경험 사용 경험의 전반적인 느낌 유래 사람과 컴퓨터의 상호작용에 관한 다양한 주제를 연구하는 학문인 HCI(Human computer interaction)에서 사용자 중심 디자인(User centered design)을 설명할 때 종종 언급되곤 했습니다.도널드 노먼이 1993년 애플 컴퓨터의 부사장으로 재직하던 때, 자신의 직함을 ‘User experience architect’로 사용함으로써 UX라는 단어가 점차 세상에 알려지기 시작했습니다. 도널드 노먼은 휴먼 인터페이스나 사용성(Usability) 같은 표현이 지나치게 제한적이었기 때문에 UX라는 용어를 만들었는데 디자인 뿐 아니라 인터페이스, 물리적 상호작용, 매뉴얼 등 사용자가 시스템을 경험하는 과정에 ..

# Tailwind CSS는?부트스트랩과 비슷하게flex pt-4 text-center rotate-90 이런식으로마크업에서 클래스 명을 바꾸는 것만으로 CSS를 적용할 수 있도록 보조하는 프레임워크 입니다. 1. Tailwind CSS설치하기npm install -D tailwindcss@latestnpx tailwindcss init tailwindcssnpm을 통해 설치 하고 tailwind.config.js 파일을 생성합니다.  2. 템플릿 경로 구성tailwind.config.js/** @type {import('tailwindcss').Config} */module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { ..

프로젝트를 새로 시작할 일이 빈번하지 않아서 가끔씩 까먹기 때문에시작하는 방법을 쭉 정리 해보겠습니다! 전부 다 노드 명령어로 "VScode의 터미널" 에서 실행하면 됩니다.터미널을 여는 법은 작업영역의 하단에 마우스를 올렸을 때의 파란선을 마우스로 드래그해서 올리거나  좌측상단 터미널 메뉴에서 새 터미널을 선택해 열어줍니다.   프로젝트 생성(노드 명령어)프로젝트  이름  : example$ npx create-react-app example  아래와 같은 문구가 나오면 프로젝트를 만드는데 성공한 것입니다. Success! Created music at C:\Users\*파일경로*\example Inside that directory, you can run several commands:npm star..

CSS filter 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다. 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰입니다. SVG 필터 요소를 가리키는 URL 참조를 사용하여 SVG 필터를 적용할 수도 있습니다.   필터 기능(filter-function)의 종류  blur( ): 가우시안 블러를 적용 적용값: [length] 0 ~ n pxfilter: blur(5px);     brightness( ): 선형 배수를 적용해 이미지를 밝거나 어둡게적용값: [amount] 0%, 0(검은색) ~ 100%, 1(그대로 유지) 100%이상 값 가능filter: brightness(0.5);     contract( ): 대비 조정적용값: [amount] 0%, 0(완전 회색)..

예제 See the Pen hide Scrollbar by Kim Ui Hyun (@uihyunKimm) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스  코드.scroll::-webkit-scrollbar { display: none;}-webkit-scrollbar : 스크롤바 영역에 대한 설정으로 display: none 속성으로 스크롤바를 없앨 수 있습니다.  .scroll { -ms-overflow-style: none; //인터넷 익스플로러 scrollbar-width: none; //파이어폭스} 익스플로러, 파이어폭스는 -webkit-scrollbar 코드로 동작이 되지 않으며, 스크롤바를 숨기기 위해서는 다음과 같은 코드를 작성해야 합..

Error처리에 강점이 있다. import { Effect, pipe} from "effect";class BadError extends Error { Show usages}function js() : boolean { Show usages const num: number = Math.random(); if (num > 0.66) { return true; //1/3확률로 true return }else if (num > 0.33){ throw new Error(); //1/3 Error return }else{ throw new BadError(); //1/3 BadError return }}//js()의 타입이 boolean으로만 조회됨function par..