이 글은 'UX/UI의 10가지 심리학 법칙(존 야블론스키 지음)'을 바탕으로 글 하단에 있는 사이트들을 참고하여 작성한 글입니다. https://lawsofux.com 에서 각 법칙들을 살펴볼 수 있습니다. 인간의 경험은 전체의 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다. 개요 인간은 자신의 인생 경험을 포괄적인 타임라인이 아니라, 일련의 스냅사진처럼 기억한다. 감정적으로 가장 강렬한 순간과 마지막 순간의 느낌이 경험에 대한 평가의 평균값을 정할 뿐 아니라 다시 경험할 의향이 있는지 아니면 다른 사람에게 추천할 생각인지 정할 때도 지대한 영향을 미친다. 피크 엔드 법칙(peak-end rule)이라고 알려진 이러한 현상이 우리에게 강력히 시사..
이 글은 'UX/UI의 10가지 심리학 법칙(존 야블론스키 지음)'을 바탕으로 글 하단에 있는 사이트들을 참고하여 작성한 글입니다. https://lawsofux.com 에서 각 법칙들을 살펴볼 수 있습니다. 자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때는 너그럽게 개요 견고함의 원칙이라고도 부르는 포스텔의 법칙은 다양성과 복잡성에 잘 대처할 수 있는 인간 중심 경험을 디자인하는 데 도움이 되는 지침이다. 포스텔의 법칙 첫 문장은 "자신이 행하는 일은 엄격하게"이다. 이를 디자인에 적용하면 인터페이스든 포괄적인 시스템이든 안정성과 접근성을 보장해야 한다는 뜻으로 해석할 수 있다. 즉 기기의 크기나 기능, 입력 메커니즘, 보조 기술, 심지어 연결 속도까지도 누구에게나 정상 작동하는 인터페이스를 제공..
이 글은 'UX/UI의 10가지 심리학 법칙(존 야블론스키 지음)'을 바탕으로 글 하단에 있는 사이트들을 참고하여 작성한 글입니다. https://lawsofux.com 에서 각 법칙들을 살펴볼 수 있습니다. 보통 사람은 작업 기억에 7(±2) 개의 항목밖에 저장하지 못한다. 기원 밀러의 법칙은 1956년 인지심리학자 조지 밀러(George Miller)가 '마법의 숫자 7, 더하거나 빼기 2: 정보 처리 용량에 관한 몇 가지 한계'라는 제목으로 발표한 논문에서 제창했다. 이 논문에서 밀러는 일차원 절대 판다의 한계와 단기 기억의 한계 사이에서 발견되는 우연의 일치에 관해 논했다. 밀러는 자극에 포함되는 정보의 양에 큰차이를 줘도 청소년의 기억 범위는 대략 7 정도에 제한된다는 사실을 알아냈다. 또한 기..
이 글은 'UX/UI의 10가지 심리학 법칙(존 야블론스키 지음)'을 바탕으로 글 하단에 있는 사이트들을 참고하여 작성한 글입니다. https://lawsofux.com에서 각 법칙들을 살펴볼 수 있습니다. 의사결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다. 개요 중복과 과잉은 혼란을 초래하기 때문에 제품이나 서비스의 사용자가 부담을 느끼지 않도록 정보를 종합하고 정리해서 보여줘야 한다. 이때 사용자의 목표를 정확히 이해하고 이를 방해하는 요소를 줄이거나 없애는 것을 궁극적인 목표로 삼아야 한다. 인터페이스에 선택지가 너무 많으면 비효율적이고 간결하지도 않다. 복잡성이 사용자 인터페이스를 넘어 프로세스의 영역까지 침범할 때도 있다. 눈에 띄는 명확한 콜 투 액션(call to action..
이 글은 'UX/UI의 10가지 심리학 법칙(존 야블론스키 지음)'을 바탕으로 글 하단에 있는 사이트들을 참고하여 작성한 글입니다. https://lawsofux.com 에서 각 법칙들을 살펴볼 수 있습니다. 대상에 도달하는 시간은 대상까지의 거리와 대상의 크기와 함수 관계에 있다. 개요 사용성(usability)은 사용하기 편하다는 의미가 담겨있으며 인터페이스가 이해하기 쉬우며 탐색하기도 쉬워야 한다는 뜻이다. 인터랙션(interaction)은 최소한의 노력만으로 불편 없이 간단하게 이루어져야 한다. 사용자가 대상을 사용하기까지 걸리는시간이 대상의 크기와 대상까지의 거리와 연관이 있다고 명시한 피츠의 법칙을 다시 말하면 대상이 커지거나 대상 선택을 위해 움직이는 거리가 줄면 대상 선택에 드는 시간이 줄..
이 글은 'UX/UI의 10가지 심리학 법칙(존 야블론스키 지음)'을 바탕으로 글 하단에 있는 사이트들을 참고하여 작성한 글입니다. https://lawsofux.com에서 각 법칙들을 살펴볼 수 있습니다. 사용자는 여러 사이트에서 대부분의 시간을 보낸다. 그래서 여러분의 사이트도 자신이 이미 알고 있는 다른 사이트들과 같은 방식으로 작동하길 원한다. 기원 '인터넷 사용자 경험에 관한 제이콥의 법칙'이라고도 알려진 이 법칙은 사용성 전문가인 제이콥 닐슨이 2000년에 제창했다. 사용자는 다른 웹사이트를 통해 축적된 경험을 바탕으로 디자인 관례에 대한 기대치를 형성하는 경향을 보인다는 법칙이다. - 멘탈 모델 멘탈 모델이란 우리가 어떤 시스템에 관해, 특히 그 시스템의 작동방식에 관해 알고 있다고 생각하는..
프로젝트에서 사용하는 웹폰트 용량이 커서 화면 렌더링 속도가 지연되는 경우가 있다. 이를 최적화 하는 방법을 알아보자. 웹폰트란? 온라인상의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트로 방문자의 로컬 컴퓨터에 폰트 설치여부와는 관련 없이 동작한다. 웹 폰트는 font-family 속성을 사용하고, @font-face를 통해 웹 브라우저에게 해당 서체를 다운로드할 것임을 알리면서 사용할 수 있다. - font-family 사용할 웹 폰트의 이름을 지정한다. 이 이름은 폰트 파일의 이름과 일치하지 않아도 상관없지만 비슷하게 설정하는 것이 유지보수에 좋다. - src 폰트 파일의 경로와 폰트의 형식을 지정한다. url에 폰트 파일의 경로를 설정하고, format에 폰트 파일의..
해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 인터넷 익스플로러 관련 CSS문제 해결 인터넷 익스플로러의 초기 버전에서 CSS구현체는 버그 투성이었고 표준에 벗어난 방식으로 동작했으며 W3C 표준을 명백히 잘못 이해한 결과물이었다. 인터넷 익스플로러 6과 이후 버전에서는 이러한 '쿼크'를 대부분 수정했지만 웹 브라우저가 갑자기 표준 호환 쪽으로 바뀌면 기존 웹 사이트가 망가질 수 있다. 이에 대한 해결책은 독타입을 변환해 디자이너들이 기존 쿼크를 지원할지 표준을 지원할지 또는 둘 사이의 하이브리드 버전을 지원할지 지정하게 하는 것이었다. 이론상으로 모드를 설정하기 위해 할 일은 독타입을 선언하는 것밖에 없다. 쿼크 모드 페이지가 표준 호환 페이지가 아니거나 ..
해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 엘리먼트 변형 각 변형'값'은 그 자체로 속성이며 각자 괄호 값들을 가질 수 있다. 이런 변형 값들은 transform속성과 연관된다. 각도 (Angle) 각도(90 deg), 그래드(100 grad), 라디언(1.683rad)으로 정의할 수 있다. 음수 값 및 360 deg보다 큰 값을 사용할 수는 있지만 양수 값으로 변환된다. 숫자 (Number) 정수 또는 소수점 값으로 양수와 음수 모두 가능하다. 숫자는 주로 곱셈값으로 사용된다. 길이 상댓값(em, px, %)이나 절대 값(in, mm, cm)을 사용할 수 있다. 많은 변형 속성 값들은 콤마로 구분해 여러 괄호 값을 지정할 수 있다. 보통 둘 또는 세 값..
해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 창과 문서의 이해 웹 페이지(또는 문서)는 브라우저 창의 뷰포트 안에서 보인다. 물론 뷰포트보다 문서가 클 때는 스크롤이 사용되기는 하지만 사용자에게 보여주는 내용은 모두 이러한 뷰포트 영역에 들어간다. 물론(각각 자체 뷰포트를 통해 문서를 보여주는) 여러창을 열 수도 있고 화면에 보이는 창의 크기나 위치를 바꿀 수도 있고 iframe이라는 더 작은 뷰포트를 삽입할 수도 있다. 하지만 당신이 보여주는 내용은 모두 브라우저 창 내에서 문서의 일부로 보인다. 창에 포함된 엘리먼트와 마찬가지로 창도 너비, 높이, 상단, 하단, 좌측면,우측면을 가지고 있다. 실제로 브라우저 창은 웹디자인의 최종 엘리먼트이자 다른 모든 ..
