hohyeon99 님의 블로그

페이지네이션과 무한스크롤, 각각 어떤 의도를 가지고 있을까요? | 디자이너스 오늘의 디자인카타 주제는 페이지네이션과 무한스크롤의 디자인 의도에 대한 토론이다.페이지네이션은 항목을 제한적으로 보여주고 페이지버튼을 통해 다음 항목으로 넘어가게끔 한 디자인이고무한스크롤은 항목을 계속 스크롤하면서 사용자가 항목을 끝가지 볼 수 있도록 한 디자인이다. 각 디자인의 의도에 대해 나의 의견을 서술 하겠다. 페이지네이션페이지네이션은 항목을 넘기게 함으로서 사용자가 자신이 보는 정보를 제차 확인 할 수 있도록 하는 구조이다.하지만 휴대폰으로 보기에는 사용자가 항목을 넘기는데에 있어 불편함을 느낄 수 있다고 생각한다 무한스크롤다른 추가행동 없이 스크롤만 하면 새로운 항목을 볼 수가 있다. 그렇기에 사용자가 확인하기에 편리..

심리학법칙의 효과 정량적, 정성적 데이터가 없는 초기 제품에 대한 의사결정의 근거가 되어줌명확한 이론적 근거를 바탕으로 주장할 수 있고, 팀원들을 설득할 무기로 활용할 수 있음스스로 좋은 디자인을 할 수 있도록 도와주는 체크리스트가 되어줌사용자의 경험을 근원적으로 이해할 수 있도록 도와줌 UX/UI에 영향을 주는 심리학 법칙 제이콥의 법칙사용자는 새로운 제품을 사용할 때 이미 알고 있는 익숙한 방식으로 작동하길 원한다는 법칙누구나 새로운 제품을 처음 접하면 기존에 학습된 지식과 경험을 바탕으로 비슷하게 사용하려고 시도한다인터페이스를 익하는데 드는 정신적 에너지가 줄어들수록, 사용자가 목표 달성에 투자할 에너지가 늘어남멘탈모델이 큰 영향을 끼칩니다.*멘탈모델 : 자신이나 타인, 개념, 사물, 현상 등 다양..

디자인 원칙이란?인지심리학의 관점에서 디자인할 때 지켜야 할 규칙을 정해놓은 것* 인지심리학 : 인간이 어떻게 보고, 생각하고, 받아들이는 지를 연구하는 학문 게슈탈트 심리학사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는다는 이론 게슈탈트 심리학의 원리 유사성의 원리크기나 형태, 방향, 색 등의 특성이 비슷한 것끼리 묶어서 지각하려는 경향겉모습이 비슷하면 서로 더 관련성이 있다고 보고 그룹화하려는 모습을 보임  근접성의 원리가까운 것끼리 묶어서 지각하려는 경향사람들은 가까이 있는 요소들이 멀리 있는 요소들보다 더 관련성이 있다고 느 폐쇄성의 원리 공백이 있더라도 틈이나 간격을 메워서 닫힌 형태로 인식하려는 경향  연속성의 원리연속적으로 직선이나 곡선을 이루는 요소를 잘 인지하..

내일배움캠프 1주차 과정이 끝나게 되었다.한주동안 내가 내일배움캠프를 하면서 일어난 일을 말하겠다. 말 그래도  '스파르타' 캠프 1일차 수강생들이 컴퓨터 앞에서 얼굴을 비추여 모여 내일배움 캠프를 일정에 대한 OT를 받았다.수강생은 캠프에서 주는 온라인 강의를 듣고 개별로 공부하여 UXUI역량을 향상시키는 방향으로 하며캠프는 4~6명 인원으로 조를 편성해서 운영이 되며 중간에는 팀프로젝트가 있을 것이라고 했다그리고 정말 놀란건 정말 오전 9시부터 오후 9시까지 학습이 이뤄지는 것이다  시간 일정은 식사시간 외에는 계속 학습과 개인 혹은 팀 프로젝트를 수행하면 되는 것이다.이럴수가...이게 진짜 일줄이야...컴퓨터앞에서 담담하게 있었지만 머릿속은 하예졌다.그래도 하겠다는 거 끝까지 해야 하지 않겠나, 캠..

디자인 툴디지털로 이미지를 만들거나 편집할 수 있는 컴퓨터 프로그램 디자인툴 종류 인터페이스 디자인 툴디지털 제품의 화면 인터페이스를 그리기 위해 사용하는 툴EX.피그마, 스케치, XD  3D 그래픽 디자인 툴 3차원의 그래픽을 만들 때 사용하는 EX.시그마 4D, 블렌  모션 그래픽 디자인 툴 그래픽 리소스를 활용해서 영상을 만들거나 촬영한 영상을 편집할 때 사용하는 툴EX. 프리미어, 에프터이펙트  비트맵 비트 정보를 가진 픽셀이 모여 만들어진 이미지 벡터보다 정교하게 이미지를 표현할 수 있으나 이미지 안의 픽셀 수가 많을수록 품질이 좋아지지만, 용량도 함께 커지며이미지의 크기를 편집하면 원본 이미지의 픽셀 수가 변해 손상이 생긴다. 대표적인 파일 확장자는 .jpeg, .jpg, .png, .gif ..

오늘의 과제는 다음과 같다1.게슈탈트 심리학(유사성의 원리, 근접성의 원리, 페쇄성의 원리, 연속성의 원리, 공통성의 원리)에서 3가지를 골라   실제 사례를 찾아보기 2. UX 비주얼 디자인 원칙(스케일, 시각적 위계, 균형, 대비)에서 3가지를 골라 실제 사례를 찾아보기  우선 첫번쨰 과제로 찾은 사이트는 splice로 음악 오디오 샘플을 공유하며 가상악기를 구매하거나 구독을 통해 사용할 수 있게 해주는 사이트이다. 여기서 내가 찾은 게슈탈트의  심리학의 3가지 요소는 유사성의 원리, 근접성의 원리, 폐쇄의 원리 이다.   첫번째 사진은 splice에 로그인하면 들어와지는 화면이다 좌측에는 카테고리들이 나열되어 있고  중앙부에는 여러 사운드 샘플팩(샘플 묶음이라고 생각하면 편하다.) 이 가로로 나열되..

오늘의 과제는 프로토 타입만들기다 프로토 타입에 적용해야 할 기법을 서술 하겠다. 1.장바구니 화면의 Button/Menu 버튼을 클릭하면 메뉴 화면으로 이동하도록 제작하는데 메뉴 화면이 흐린 상태에서 진해지며 노출되도록 연출 해야 한다. 예사 1  2.메뉴 화면의 Button/Close 버튼을 클릭하면 장바구니 화면으로 이동하도록 만들어보는데장바구니 화면이 흐린 상태에서 진해지며 노출되도록 해야한다. 예시 2  3. 장바구니 화면의 List Item 3(바이올렛색상 창)을 클릭하면 상세 화면으로 이동하도록 만드는데상세 화면이 장바구니 화면 위로 밀어 들어오며 노출되도록 해야한다. 예시 3 4. 상세 화면의 Button/Back을 클릭하면 장바구니 화면으로 이동하도록 만드는데상세 화면이 밀려 나가며 아래..

오늘의 디자인 카타 주제는 윈도우 10과 11의 화면 디자인을 보고 어떤 것을 더 선호하는지 논의해보는 시간이다.윈도우 10은 하단 좌측에 메뉴 아이콘를 배치라고 그 다음에 컴색바를 배치하고 나머지 앱을 나열했으며원도우 11은 중안 하단에 앱을 몰아 넣은 배치를 했다. 이런 두 디자인 화면을 보고 내가 더 선호하는 화면은 윈도우 11이다그 이유를 설명하겠다. - 간소화앱들이 하단 중앙에 몰려 있어서 보기 편하다. 10 디자인 같은 경우 아이콘 버튼이 좌우로 펼쳐 있어 채워주는 느낌이 강하지만 오히려 불필요하게 공간을 차지한다는 생각한다. - 중앙이 좋아!평소에 무언갈 배치할 때 중앙에 배치하는걸 선호한다. 그래서 앱들이 중앙 하단에 배치된 11의 디자인을 더 선호하게 된다. 조원간 의견나를 제외한 조원분..

UXUI는 다른 직무인 사람과 협업하여 작업을 행한다 여기 같이 협헙하는 사람들을 소개하겠다. PMProduct Manager의 약자이며 과거에는 Project Manager도 PM으로 부르기도 했지만, 오늘날 제품팀에서 PM은 대부분 프로덕트 매니저를 뜻한다. 제품의 전략을 수립하고 아이디어의 우선순위를 정해 디자이너와 함께 솔루션을 설계해준다.. POPO는 Product Owner의 약자이며 제품팀을 이끌며 제품이 시장에 잘 전달될 수 있도록 관리한다.PM보다 더 많은 역할과 책임이 주어진다.프론트엔드 엔지니어 눈에 보이는 영역의 기능을 구현하는 사람 이며 앱이나 웹의 페이지, 화면 안의 각종 컴포넌트 를 코드로 구현한다.단순히 그래픽을 구현하는 것을 넘어서 화면 간의 이동, 컴포넌트의 모션, 사용자..

오늘의 과제는 테스트케이스 작성하고 디자인 QA로 발견한 이슈 공유이다.먼저 테스트케이스와 디자인QA가 뭔지 설명하겠다테스트 케이스는 특정 조건에서 요구 사항을 충족하는지 확인하기 위해 여러가지 케이스를 작성한 문서이며특정 조건 아래의 환경을 테스트하는 것이기 때문에 특정 조건, 테스트 범위, 케이스, 기댓값,  테스트 환경 등을 상세하게 적어야 한다. QA는 Quality Assurance의 약자로, 제품이 출시되기 전에 기능을 테스트하는 것을 말하며 제품이 처음 기획한 대로 잘 구현이 되었는지, 회사에서 생각하는 품질 기준이 충족되었는지를 확인하는 과정이다. 오늘은 뱅크셀러드 앱을 이용하여 위에 서술한 기법을 활용할 것이다. 먼저 앱 화면을 보자   로그인 과정을 살펴보면서 가이드라인에 맞게 정보을 ..