그림으로 이해하는 인지과학

어려운 인지 심리학을 쉽게 이해할 수 있지만 가볍지만은 않은 좋은 책입니다. 사람이 정보를 어떻게 처리하는지 처음부터 끝까지 훑어볼 수 있습니다. UX에 관심이 있다면 꼭 읽어야 하는 입문서.

정보

기타하라 요시노리 저/조태호 역 | 길벗 | 2022년 03월 25일 | 원서 : イラストで?ぶ 認知科?

목차

1장 인지과학 개론

  • 1.1 인지과학
  • 1.2 인지과학이 걸어온 길
  • 1.3 인지과학의 연구 방법
  • 1.4 모델
  • 1.5 인간의 정보 처리 모델과 인지과학의 범위

2장 감각

  • 2.1 감각의 종류와 특성
  • 2.2 감각 신호의 전달
  • 2.3 시각
  • 2.4 청각
  • 2.5 체성 감각
  • 2.6 감각의 상호작용
  • 2.7 컴퓨터에 의한 이미지·음성의 특징 추출

3장 지각·인지

  • 3.1 하향 처리
  • 3.2 게슈탈트 특성
  • 3.3 형상 지각·인지
  • 3.4 음성 지각·인지
  • 3.5 공간 지각
  • 3.6 인지 지도
  • 3.7 시간 지각
  • 3.8 컴퓨터에 의한 음성 인식

4장 기억

  • 4.1 기억의 구조
  • 4.2 단기 기억에서 작업 기억으로
  • 4.3 장기 기억
  • 4.4 서술적 기억과 절차적 기억
  • 4.5 망각
  • 4.6 컴퓨터의 기억 장치

5장 주의

  • 5.1 선택적 주의
  • 5.2 집중적 주의와 분할적 주의
  • 5.3 시각적 주의
  • 5.4 청각적 주의
  • 5.5 컴퓨터에 의한 음원 방향 추정

6장 지식

  • 6.1 지식의 표현과 구조
  • 6.2 의미
  • 6.3 개념 및 카테고리화
  • 6.4 프로덕션 룰을 이용한 지식 처리

7장 문제 해결

  • 7.1 문제 공간과 전략
  • 7.2 명료한 문제를 해결하는 과정
  • 7.3 추론
  • 7.4 웨이슨의 선택 과제
  • 7.5 컴퓨터에 의한 게임 전략

8장 의사 결정

  • 8.1 효용과 문맥
  • 8.2 전망 이론
  • 8.3 선호 모델
  • 8.4 갈등 상태에서의 의사 결정

9장 창조

  • 9.1 재생적 사고와 생산적 사고
  • 9.2 통찰
  • 9.3 유추를 이용한 발상
  • 9.4 발상 지원 방법

10장 언어 이해

  • 10.1 자연 언어와 인공 언어
  • 10.2 언어의 다층 구조와 심적 어휘
  • 10.3 단어 인지
  • 10.4 통사론적 언어 산출 및 이해 모델
  • 10.5 의미론적 언어 산출 및 이해 모델
  • 10.6 튜링 머신과 오토마톤
  • 10.7 형식 문법
  • 10.8 컴퓨터를 통한 자연어 처리

11장 정동

  • 11.1 정동과 인지
  • 11.2 정동에 의한 신체적 변화와 측정 지표
  • 11.3 정동 모델
  • 11.4 표정 인지

12장 사회적 인지

  • 12.1 대인 인지
  • 12.2 얼굴의 기억과 인지
  • 12.3 사회적 추론
  • 12.4 태도의 변화
  • 12.5 집단의 영향

13장 커뮤니케이션

  • 13.1 커뮤니케이션의 비언어적 채널
  • 13.2 설득적 커뮤니케이션
  • 13.3 커뮤니케이션의 변용
  • 13.4 인터넷 커뮤니케이션

14장 착각

  • 14.1 모양의 착시
  • 14.2 밝기·색상의 착시
  • 14.3 운동 착시
  • 14.4 착청
  • 14.5 체성 감각의 착각

15장 뇌

  • 15.1 뇌의 구조
  • 15.2 감각과 뇌
  • 15.3 기억과 뇌
  • 15.4 사고와 뇌
  • 15.5 정동과 뇌
  • 15.6 뇌의 신호 전달
  • 15.7 뇌신경 활동 측정
  • 15.8 딥러닝

2022 최고의 디자인 툴: 전세계 디자이너 4000명 설문 조사

UX tools에서 디자인 툴을 조사하는데 2022년 디자인 툴 서베이 결과를 공개했습니다. 4260명이 참여했다고 합니다.

응답자는 프로덕트, UX/UI, UX 디자이너가 많았고 풀타임 근무자로 회사는 11~100명, 디자이너는 2~10명 규모가 가장 많습니다. 10년 이상 경험이 있는 분들이 많이 참여하셨습니다.

©UX Tools

UI 디자인 툴은 피그마가 압도적인 1위입니다.

©UX Tools

기본적인 프로토타이핑도 91%라는 압도적인 숫자로 피그마가 1위입니다.

©UX Tools

프로토파이가 프로토타이핑에서는 직접 코딩하는 것과 비슷한 수치를 보여줍니다.

©UX Tools

사용자 테스트 툴은 Maze가 1위입니다.

이번 조사에서는 포트폴리오 빌더도 조사했습니다. 역시 메이커답게 직접 코딩하는 비율이 높습니다. 디자인 시스템은 피그마가 압도적입니다. 디지털 화이트보드는 미로가 여전히 강세입니다. 피그잼이 많이 따라잡았네요. 어느 순간 스케치에서 피그마로 전환됐듯이 어떤 영역에서 새로운 툴이 약진할지 궁금하네요. 풍성한 조사 결과가 가득하니 아래 링크를 방문해 자세한 데이터를 확인해보세요.

더 보기 및 출처

비슷한 글

최근 글

세상에서 가장 아름다운 서점들

새로운 도시를 여행할 때면 가장 먼저 서점을 찾습니다. 서점은 그 곳에 사는 사람들이 무엇에 관심을 갖고 소중하게 여기는지 알 수 있다고 생각하기 때문입니다. 그 중에서도 오랜 시간 특별한 개성을 간직하며 한 자리를 지킨 서점을 찾는 편이죠.

서점을 방문할 때면 새로운 발견을 할 수 있다는 기대로 가득 찹니다. 숙소에서 서점까지 찾아가는 거리의 분위기가 공기, 문을 열었을 때 확 퍼지는 서점 특유의 종이향이 떠오릅니다. 누군가의 단단한 관점으로 정돈된 책장에서 우연히 멋진 책을 발견합니다. 잠깐 서서 책장을 넘길 때의 질감과 소리. 이런 경험은 다른 어떤 종류에서도 얻기 힘든 경험입니다.

‘세상에서 가장 아름다운 서점들’은 전 세계 서점 100여 곳 이상을 취재한 시미즈 레이나가 쓴 책입니다. 가장 아름다운 서점 20 곳을 소개합니다. 아름다운 사진과 서점 직원의 인터뷰가 마치 그 곳을 방문하는 느낌을 전합니다. 그리스 산토리니 섬의 아틀란티스 북스, 조앤 롤링에게 영감을 준 포르투갈 포르투의 렐루 서점, 다양한 콘텐츠 제작자에게 영감을 준 일본의 츠타야 서점 등 개성 넘치는 서점을 소개합니다. 책을 살 때 “사는 사람이 없다면 자신이 가지려고 했는데 아쉽네요”라는 말이 묘한 승리감을 키워줬네요. 여행을 떠나기 전에 꼭 읽어보세요.

세상에서 가장 아름다운 서점

시미즈 레이나 저 / 박수지 역 / Stefano Candito, Laetitia Benat 등 사진 | 학산문화사(단행본) |  2013년 10월 25일 | 원서 : 世界で最も美しい書店

닥터 나우: 집에서 진료 받고 약 받고

아플 땐 닥터나우 병원과 약국이 찾아갑니다.

닥터나우는 비대면 진료와 처방약 배달 서비스를 제공하는 원격 의료 플랫폼입니다. 배송비가 유료며 1만원을 닥터나우와 소비자가 반씩 부담합니다. 건강을 관리하고 각종 질환 예방하는 등 헬스 케어 전반을 아우르는 서비스로 성장하는 것을 목표로 합니다. 2020년 11월 출시했으며 iOS와 안드로이드 플랫폼에서 제품을 제공합니다.

환자가 병원에 가지 않고 전화나 화상으로 진료 받고 처방전을 받을 수 있습니다. 처방 받은 약을 약국에서 수령하거나 닥터 나우와 계약한 배송 드라이버를 통해 퀵이나 택배로 배송받습니다. 24시간 전문 의료진과 실시간으로 상담할 수도 있습니다. 질문을 올리면 5분 이내로 의사나 간호사가 답글을 답니다.

진료 신청 경험

실시간 무료 상담

키 비주얼

더 보기 및 출처

Find in page: 피그마에서 레이어와 텍스트 검색하기

피그마를 사용하다보면 수없이 많은 레이어나 컴포넌트 중에서 원하는 것을 찾아 이동하기 쉽지 않을 때가 있습니다. 피그마로 처리할 수 있는 것이 많아질수록 파일이 크고 복잡해지는데, 이 때 어디에 내가 찾는 그래픽 요소가 있는지 찾기 어려워집니다. 파인드 인 페이지 Find in page는 이런 상황에 유용한 피그마 플러그인입니다.

기능

  • 프레임 이름 검색
  • 텍스트 검색
  • 찾은 프레임, 텍스트로 이동
  • 텍스트 바꾸기

파인드 인 페이지 Find in page를 이용해 피그마 파일에 포함된 프레임, 레이어를 검색할 수 있습니다.

플러그인을 실행하면 내가 검색하고 싶은 범위를 정합니다. 찾고싶은 키워드를 입력하고 레이어나 텍스트 중 어떤 것을 검색할 것인지 정합니다. 만약 레이어를 검색할 경우 어떤 타입만 검색할지도 선택할 수 있습니다.

검색 결과를 눌러 뷰를 이동할 수 있고 기존 키워드를 다른 키워드로 한번에 대체할 수도 있습니다.

더 보기 및 출처

비슷한 글

figma-finder-thumbnail

Find in page: 피그마에서 레이어와 텍스트 검색하기

피그마를 사용하다보면 수없이 많은 레이어나 컴포넌트 중에서 원하는 것을 찾아 이동하기 쉽지…

TinyImage Compressor: 최강의 이미지 압축 플러그인

TinyImage Compressor: 최강의 이미지 압축 플러그인

TinyImage는 이미지 압축 프로그램입니다. Tinypng.com이라는 유명한 이미지 압축 웹사이트로 피그마 플러그인도 지원합니다.…

프레이머-로고-섬네일

Framer: 접속되는 웹사이트 5분만에 만들 수 있는 툴

요즘 여러 회사가 웹 기반 서비스를 이용해 흥미로운 설문 조사나 미니 게임을…

Figmotion: 가볍게 모션 만져보기

Figmotion: 가볍게 모션 만져보기

살아있는 인상을 전하는 모션은 이제 디지털 프로덕트에서 필수 요소가 되었습니다. 하지만 모션을…

BrandFetch: 전세계 브랜드 에셋 받기 플러그인

BrandFetch: 전세계 브랜드 에셋 받기 플러그인

BrandFetch는 각종 전세계 브랜드의 로고, 심볼을 사용할 수 있는 플러그인입니다. 내가 원하는…

Image Tracer: 비트맵을 벡터로 바꿔주는 피그마 플러그인

Image Tracer: 비트맵을 벡터로 바꿔주는 피그마 플러그인

가끔 로고나 단순한 이미지의 벡터가 필요할 때가 있는데요. 피그마로 작업하다 다른 툴을…

피그마 플러그인

피그마 플러그인

유용하게 사용하고 있는 피그마 플러그인입니다. 3707

다른 방식으로 보기 Ways of seeing

존 버거 지음 | 최민 옮김 | 열화당 | 2019년 06월 01일 출간 (1쇄 2012년 08월 01일)

말 이전에 보는 행위가 있다.

“다른 방식으로 보기 (Ways of Seeing)”는 1972년 텔레비전 연속 강의를 엮은 책입니다. 존 버거는 미술 작품을 감상하는 법에 대해 비판적으로 접근했습니다. 당시 전통 미술계에서 작품을 감상하는 법이 있다는 태도가 있었는데 이는 맥락을 이해하지 못한 편협한 방식일 수 있다 생각했습니다. 이 책은 미술을 바라볼 때 계급, 인종, 성별, 소유, 정치, 경제 차원의 미술을 보는 방식에 대해 알기 쉽게 설명합니다.

책은 크게 글로 풀어 쓴 챕터와 이미지를 나열한 챕터로 나뉩니다.

첫 번째 글에서는 신비한 비밀에서 복제 가능한 언어로 변화한 과정을 설명합니다. 누군가가 자신의 집 안을 장식하기 위해 제작하던 고급 사치품이었던 미술이 사진의 발명으로 복제 가능해지면서 생겼던 의미의 변화를 설명합니다.

두 번째 글에서는 이미지에 등장하는 인물이 누군가에게 보인다는 사실을 인지한다는 것을 자세하게 파고듭니다. 특히 ‘누드’ 상태의 여성이 남성에게 보여지기 위해 그려진 다양한 그림에 대해 설명합니다.

세 번째 글에서는 ‘유화’를 바탕으로 당시 시대의 미술을 향유하던 사람들의 태도와 생각을 설명합니다. 마치 현대의 인스타그램처럼 자신을 드러내기 위한 그림으로써 ‘자랑’하던 문화를 알기 쉽게 설명합니다.

마지막으로 현대에 큰 영향을 끼치는 ‘광고’에 대해 설명합니다. 지금까지의 미술은 현재 존재하는 것을 전달하는 것이었다면 광고는 존재하지 않는 미래의 환상을 전하는 용도라 설명합니다. 달성할 수 없는 미래의 꿈을 전하고 그것이 보는 이의 환상과 일치하느냐 아니냐를 목적으로 한다는 사실을 날카롭게 지적합니다.

학습된 지식과 제한된 맥락을 벗어나 내가 보는 대상의 본질을 꿰뚫기 위한 관점을 제시하는 책입니다. 본다라는 행위와 관련한 깊이 있는 미술 담론을 정말 쉽게 풀어냈습니다. 대중을 대상으로 한 텔레비전 연속 강의를 엮은 책이라 그런지 술술 읽혔습니다. 어려운 단어보다는 실제 예시와 이미지를 활용해 이해하기 쉽습니다. 새로운 방식으로 대상을 보는 법, 즉 창의적인 접근에 대해 고민이 있다면 꼭 읽어야 할 책입니다.

*이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

iOS 16 UI kit

Joey가 만든 iOS 16 UI Kit입니다. 애플의 HIG (Human Interface Guideline)에서 가져온 색, 서체 스타일와 직접 피그마로 만든 컴포넌트, 템플릿으로 구성됩니다. 이번 업데이트에서 가장 변화가 큰 상태창, 홈 인디케이터, 노티피케이션을 상태별로 자세하게 나눠 표현했습니다. 홈, 잠금화면, 애플페이 등 플로우도 간단하게 확인할 수 있습니다. 피그마 커뮤니티에 공개되어 있습니다. 4만 5천회 카피가 될 정도로 인기가 대단합니다. 49달러를 지불하면 이메일을 통해 iOS 16 UI Kit의 변경 내역과 업데이트 소식을 받을 수 있습니다.

잠금 화면에서 올웨이즈 온 기능을 염두에 둔 위젯 디자인을 컴포넌트로 만들었습니다. 알림이 표시되었을 때, 알림을 눌렀을 때, 알림의 다양한 기능을 수행할 때의 화면도 자세하게 나뉘었습니다. 홈 화면의 위젯 레이아웃, 탭 바 등도 상세하게 정리됐습니다. 그리고 아직 한국에서는 사용할 수 없는 애플 페이의 페이지도 살펴볼 수 있습니다. 지갑 화면, 카드 상세, 애플 페이를 사용할 때 화면을 상태별로 확인할 수 있습니다. iPhone 14에서만 제공하는 상태창도 컴포넌트로 제공합니다. 14/14 Pro, Light/Dark 모드로 나눴고 다이내믹 아일랜드의 상태에 따라 컴포넌트를 나눴습니다. 시간과 배터리를 컴포넌트로 제공하며 light, Dark 모드에 따라 달라지는 색과 형태를 구분했습니다. 다이내믹 아일랜드 Dynamic Isaland는 크기별로 제공합니다.

iOS 16 UI Kit 스크린샷

더 보기 및 출처

비슷한 글

iOS16-ui-kit-thumbnail

iOS 16 UI kit

Joey가 만든 iOS 16 UI Kit입니다. 애플의 HIG (Human Interface Guideline)에서 가져온…

iOS16 thumnail

디자이너가 해석한 iOS 16의 주목할만한 UX

iOS 16을 업데이트했습니다. WWDC22에서 공개된 iOS 15의 차세대 버전으로 한국 표준시 KST 기준 2022년 6월 7일 오전 2시에…

2022 애플 휴먼 인터페이스 가이드 업데이트

2022 애플 휴먼 인터페이스 가이드 업데이트

지난 7일 애플에서 휴먼 인터페이스 가이드 Human Interface Guide (HIG)를 업데이트했습니다. 애플의…

녹아 내리는 얼굴, 하트손 등 새롭게 추가된 37개의 새로운 이모지

녹아 내리는 얼굴, 하트손 등 새롭게 추가된 37개의 새로운 이모지

iOS 15.4를 출시하면서 37개 새로운 이모지도 추가되었어요. 7개의 얼굴 이모지와 여러 오브젝트가…

TinyImage Compressor: 최강의 이미지 압축 플러그인

TinyImage는 이미지 압축 프로그램입니다. Tinypng.com이라는 유명한 이미지 압축 웹사이트로 피그마 플러그인도 지원합니다. TinyImage는 PNG, JPG, PDF, WebP 등 디지털 환경에서 자주 쓰이는 이미지 파일을 퀄리티 손상 없이 드라마틱하게 압축합니다.

포토샵이나 일러스트레이터로 이미지를 작업할 때는 TinyImage의 웹사이트에 직접 방문해 이미지를 압축합니다. 브라우저를 켜는 것 자체가 귀찮을 때는 피그마를 사용하면 더 빠르게 작업할 수 있습니다. 피그마 안에서 이미지를 제작하고 이미지를 내보낼 때 TinyImage 플러그인을 사용하면 압축된 이미지를 바로 내보낼 수 있습니다. 한달에 사용에 제한이 있지만 개인이 사용하기에는 충분한 양입니다. 여러 장을 압축할 경우 금액을 지불하고 시리얼 넘버를 받을 수 있습니다.

더 보기 및 출처

비슷한 글

figma-finder-thumbnail

Find in page: 피그마에서 레이어와 텍스트 검색하기

피그마를 사용하다보면 수없이 많은 레이어나 컴포넌트 중에서 원하는 것을 찾아 이동하기 쉽지…

TinyImage Compressor: 최강의 이미지 압축 플러그인

TinyImage Compressor: 최강의 이미지 압축 플러그인

TinyImage는 이미지 압축 프로그램입니다. Tinypng.com이라는 유명한 이미지 압축 웹사이트로 피그마 플러그인도 지원합니다.…

프레이머-로고-섬네일

Framer: 접속되는 웹사이트 5분만에 만들 수 있는 툴

요즘 여러 회사가 웹 기반 서비스를 이용해 흥미로운 설문 조사나 미니 게임을…

Figmotion: 가볍게 모션 만져보기

Figmotion: 가볍게 모션 만져보기

살아있는 인상을 전하는 모션은 이제 디지털 프로덕트에서 필수 요소가 되었습니다. 하지만 모션을…

BrandFetch: 전세계 브랜드 에셋 받기 플러그인

BrandFetch: 전세계 브랜드 에셋 받기 플러그인

BrandFetch는 각종 전세계 브랜드의 로고, 심볼을 사용할 수 있는 플러그인입니다. 내가 원하는…

Image Tracer: 비트맵을 벡터로 바꿔주는 피그마 플러그인

Image Tracer: 비트맵을 벡터로 바꿔주는 피그마 플러그인

가끔 로고나 단순한 이미지의 벡터가 필요할 때가 있는데요. 피그마로 작업하다 다른 툴을…

피그마 플러그인

피그마 플러그인

유용하게 사용하고 있는 피그마 플러그인입니다. 3707

Framer: 접속되는 웹사이트 5분만에 만들 수 있는 툴

요즘 여러 회사가 웹 기반 서비스를 이용해 흥미로운 설문 조사나 미니 게임을 만들어 배포합니다. 이전보다 기술이 발달하고 웹 환경이 좋아지면서 여러 웹 제품을 만들어 소통하는 것이 자연스러워졌는데요, 웹과 앱으로 제공하는 본 서비스와 독립적으로 작동하는 웹사이트를 만드는 경우도 늘었습니다.

프레이머 Framer 는 이런 상황에 요긴한 툴입니다. 크리에이터를 위한 웹 빌더로 디자인한 그대로 웹사이트를 손 쉽게 만들 수 있습니다. 웹을 디자인하고 버튼 한번만 누르면 웹사이트가 만들어지죠. 프레이머 웹에 접속해 피그마에서 하듯이 GUI를 설계하고, 웹 배포를 위한 몇가지를 설정하고 배포를 누르면 누구나 접속할 수 있는 웹사이트가 만들어집니다.

모바일 디자인 툴의 패러다임 변화는 극적이었습니다. 포토샵을 이용해 모바일 화면을 디자인하다 더 가벼운 GUI 툴인 스케치로 옮겼고, 온라인 협업 기반의 디자인 툴인 피그마로 넘어갔습니다. 프레이머는 그래픽 디자인 결과물이 실제 동작하는 웹으로 전환하는 과정에 집중한 툴입니다. 과연 프레이머는 새로운 패러다임이 될 수 있을지 기대되네요.

더 보기 및 출처

비슷한 글

figma-finder-thumbnail

Find in page: 피그마에서 레이어와 텍스트 검색하기

피그마를 사용하다보면 수없이 많은 레이어나 컴포넌트 중에서 원하는 것을 찾아 이동하기 쉽지…

TinyImage Compressor: 최강의 이미지 압축 플러그인

TinyImage Compressor: 최강의 이미지 압축 플러그인

TinyImage는 이미지 압축 프로그램입니다. Tinypng.com이라는 유명한 이미지 압축 웹사이트로 피그마 플러그인도 지원합니다.…

프레이머-로고-섬네일

Framer: 접속되는 웹사이트 5분만에 만들 수 있는 툴

요즘 여러 회사가 웹 기반 서비스를 이용해 흥미로운 설문 조사나 미니 게임을…

Figmotion: 가볍게 모션 만져보기

Figmotion: 가볍게 모션 만져보기

살아있는 인상을 전하는 모션은 이제 디지털 프로덕트에서 필수 요소가 되었습니다. 하지만 모션을…

BrandFetch: 전세계 브랜드 에셋 받기 플러그인

BrandFetch: 전세계 브랜드 에셋 받기 플러그인

BrandFetch는 각종 전세계 브랜드의 로고, 심볼을 사용할 수 있는 플러그인입니다. 내가 원하는…

Image Tracer: 비트맵을 벡터로 바꿔주는 피그마 플러그인

Image Tracer: 비트맵을 벡터로 바꿔주는 피그마 플러그인

가끔 로고나 단순한 이미지의 벡터가 필요할 때가 있는데요. 피그마로 작업하다 다른 툴을…

피그마 플러그인

피그마 플러그인

유용하게 사용하고 있는 피그마 플러그인입니다. 3707