전체 글 74

[UXUI입문과정 챕터 2] 디자인 씽킹을 활용한 앱 분석

UXUI입문과정 2주차 과제는 여행앱인 Skycanner를 디자인 씽킹 기법을 활용하여 분석해 보는 것이다.그럼 오늘의 앱인 Skycanner를 살펴보자확실히 UXUI를 공부하다 보니 화면에서 아쉬운점이 눈에 띄었다.무었보다 상단 바의 색깔이 너무 진하다. 조금 눈이 피고하게 느껴질 정도였다.그리고 앱 배치간격이 너무 멀리 떨어지게 배치한 것 같다. 같은 단에 존재하는 버튼끼리도 서로 떨어져 있어 시선이 분산되어 시각적으로 불편함을 받았다.   스크롤를 하면서 느꼈던건카드 화면이 필요이상으로 큰 것 같다.정보가 크게 중요하거나 큰 이슈거리도 아닌데 저 화면이 하단에 4개가 배치되어불필요한 스크롤를 하고 있었다.이 외에도 다른 리뷰를 살펴보니 기능적으로 아쉬움을 남기고 있었다.이러한 내 관점과 유저의 입장..

UXUI 입문과정 2025.01.23

[TIL 1주차 목요일 1] 제품팀과 UXUI 실무 프로세스

제품팀제품을 만들기 위해 각자 다른 전문적인 능력을 갖춘 사람들이 모인 팀 보통 1명의 제품관리자 (PO나 PM), 1명의 디자이너, 2명의 엔지니어가 제품팀을 구성하는 최소 조건이며 회사에 따라 제품팀에 데이터 애널리스트, 마케터, BO(Business Operator) 등이 포함될 수 있다. 목적조직특정한 목적을 달성하기 위해 여러 직무의 사람들이 모인 팀 (핀테크 회사일시 EX) 도메인별로 대출팀, 카드팀, 예/적금팀 ) 스쿼드나 사일로라고 부르기도 함제품의 목표를 달성하기 위해 다양한 직무의 사람이 모여있는 팀이기 때문에 속도가 빠르고 효율적이다기능조직유사한 직무끼리 구성된 팀 ( EX ) 획팀, 디자인팀, 개발팀 등 )챕터라고 불리기도 함비슷한 일을 하는 사람들끼리 모여있기 때문에 전문 분야에 ..

TIL(Today I Learn) 2025.01.23

[디자인카타 1주차 목요일]보기 좋은 가이드 라인 배치(CTA 버튼, 가이드 영역 별도 표)

가이드 텍스트 위치 어디에 노출하는 것이 더 유용할까요? | 디자이너스 가이드 텍스트 위치 어디에 노출하는 것이 더 유용할까요? | 디자이너스가이드 텍스트 위치 어디에 노출하는 것이 더 유용할까요?designus.io 오늘의 디자인카타는 두 안건 중 가이드 텍스트 위치를 어디에 노출하는 것이 더 유용한지 논의해보는 시간이다.  나의 생각나의 가이드 별도 표기인 B안을 선택했다. 그 이유를 설명하겠다. - 세분화된 화면 정보처리를 빠르게 하는 사용자라면 가이드 영역에 별도 표기를 해야 가이드 기능 효과가 더 있다고 생각한다.처리 과정 중 잘못된 부분이 있어도 급하게 사용하다 보면 해당영역마다 잘못된 처리과정을 했을 경우별도로 가이드 라인을 표기해야 사용자가 눈에 보기 더 편할 것 같다고 생각이 든다.A안의..

디자인카타 2025.01.23

[TIL 1주차 수요일 3] 디자인씽킹 과 데이터 트리븐

디자인씽킹사용자에 대한 이해를 기반으로 문제를 찾고 제품을 만들어 검증하는 프로세스 디자인씽킹의 구성공감하기 > 문제정하기 > 아이디어 발산하기 > 프로토타입 만들기 > 테스트하기 순이다 공감하기(Empathy) 사용자를 이해하는 과정, 공감대를 형성한 후 사용자의 충족되지 않은 욕구와 불편한 점들을 파악할 수 있다. 사용기법 A-E-I-O-U 관찰법 활동( Activities ), 환경( Environments ), 상호작용( Interactions ), 사물( Objects ), 사용자(Uuer) 의 약자이며 정보를 체계적으로 수집할 수 있도록 5가지의 분류로 수집하는 관찰기법 공감지도 6개의 도표를 채우며 사용자의 숨겨진 어려움과 욕구를 유추할 수 있도록 도와주는 시각화 도구 인터뷰 사용자 파악하는..

TIL(Today I Learn) 2025.01.22

[TIL 1주차 수요일 1] UXUI란?

UX/UI 란? UI User Interface의 약자로, 제품과 사용자 사이에서 소통할 수 있도록 하는 실체적인 수단이나 매개체를 뜻함 UI 디자인 화면의 전체적인 구조와 시각적인 요소들을 디자인 하는 것을 뜻함 (ex.버튼,아이콘) UX User eXperience의 약자로 사용자가 어떤 제품이나 서비스를 이용하면서 느끼는 총체적인 경험을 말함 UX 디자인 제품에서 어떠한 감정을 일으키거나 특별한 경험을 할 수 있도록 이끄는 것을 말함   * 그외에 용어 HCIHuman Computer Interaction의 약자이며 인간과 컴퓨터 간의 상호작용에 대해 연구하는 분야를 말한다.대학원에서는 주로 UX/UI보다는 HCI라는 용어를 더 많이 사용한다.연구의 주된 목적은 사람이 컴퓨터를 더 쉽게 사용하고, ..

TIL(Today I Learn) 2025.01.22

[UXUI입문과정 챕터 1] 내가 선정한 앱 화면 분석

UXUI입문 1주차를 듣게 되었다. 1주차의 과제인 앱 화면 분석을 해보기로 한다.어떤 앱을 분석해 볼까 하다 우연찮게 신발이 필요한 나는 ABC-ㅡMART 앱을 선정하게 되었다.화면을 봤을때 큰 베너 아래로 10개 카테고리 아이콘 버튼으로 구성 되었다. 전반적으로 각진 디자인의 화면에 카테고리 버튼을 원으로 설정하여 다체로운 느낌을 받았다. 하단에 있는 앱바는 5개로 구성되어 있으며 왼쪽으로 부터 홈, 최근 본 상품, 마이페이지, 검색, 메뉴 로 구성되어 있다. 앱을 스크롤도 해봤는데 이런 변화를 발견했다.  가만히 있을 때는 위에 사진처럼 보이지만 화면을 스크롤 하게 되면 아래 사진 처럼 하단 앱바가 사라지고 3개의 컨테이너 아이콘 버튼이 Fade in 애니메이션으로 나타난다. 각 아이콘 버튼은  위..

UXUI 입문과정 2025.01.22

[디자인 카타 1주차 수요일] CTA 버튼과 자동 확인 및 섹션 이동

오늘의 디자인 카타는 CTA버튼과 자동 확인 및 섹션 이동 의 비교이다화면에서 보았을땐 자동화면 및 섹션 이동이 화면이 넓게 느껴저 시각적인 편안함을 주지만 주민번호입력란이 자동확인 및 섹션 이동이라면 정보를 잘못기입 했을 때 오는 정보처리의 문제를 우려했다.CTA버트는 상대적으로 자동 확인 보단 갑갑한 느낌이 들지만 앞서 말한 개인정보를 제대로 입력해야 하는 상황에선사용자가 한번 검토하고 넘길 수 있다는 장점이 있는 것 같다.조원분들은 나와 비슷한 생각으로 CTA 버튼을 선호한 조원 한분이 계셨지만 오히려 빠른 처러과정을 원하는 조원분께선 자동 확인 및 섹션 이동을 선호하게 되었다.

디자인카타 2025.01.22

[디자인 카타 1주차 화요일] 슬라이드 컴포넌트와 라디오 컴포넌트

우리의 첫 디자인카타는 슬라이드 컴포넌트와 라디오 컴포넌트이다.슬라이더 컴포넌트는 연표를 연상하듯 밀고 당기를 하여 점수를 기업하는 방식이고라디오 버튼 컴포넌트는 항목에 버튼을 누르는것을 활용하여 점수를 기입하는 방식이다우리조원은 전부 슬라이더를 기입하였다 점수가 2의 배수로 진행된다는 점이 라이도 버튼  형식의 컴포넌트와어울리지 않는다는 의견이 많았다. 하지만 라이오 버튼의 직관적인 번호가 오히려 보기 편하다는 의견을 냈다나의 의견은 라디오 버튼이 눈에 잘 띄긴 하지만 2의 배수로 진행되여 점수를 표현하기 보단 수를 나열하는 것 처럼 보이며버튼을 눌렀을 때 자신이 누른 번호가 무었인지 다시 확인해야 한다는 번거로움이 있을 것  같다수가 작게 표기되어 보기에는 조금 불편함이 있을 수 있으나 슬라이더 방식..

디자인카타 2025.01.22

[TIL 1주차 수요일 1] 파운데이션, 컬러스타일, 폰트 스타일

피그마를 통해 만들고자 하는 건 UI이다. UI는 버튼, 체크박스나 라디오, 탭 등 우리가 화면에서 볼 수 있는 모든 요소들을 뜻하며 기초 재료인 파운데이션과, 이 파운데이션을 조합해 만드는 컴포넌트로 나눌 수 있다 파운데이션의 구성은 다음과 같다 색상(Color)서체(Font, Typography)간격, 여백(Spacing, Gap)곡률(Radius)그리드(Grid)고도(Elevation) 아이콘(Icon) 오늘은 파운데이션의 구성중 컬러와 서체를 다룰 것이다.Color디스플레이는 빛의 3원색으로 구현되는 화면이다 그렇기에 빛의 농도와 명암을 조절해 여러가지 색으로 만들어요빛은 3원색의 구성은 빨강, 바랑, 초록이다 각 색의 영어단어의 앞글자를 따와 RGB라고 불린다.빛을 더해가며 다른 색을 만들기 때..

TIL(Today I Learn) 2025.01.22

[TIL 1주차 화요일 3] 오토레이아웃

우리가 보는 화면의 디자인들은 모두 코드 블록으로 이루어져 있다. 이 코드 블록은 피그마에선 프레임으로 만들 수 있다.프레임은 컨테이너라고 불리며 아래는 해당 관련 용어이다 패딩(Padding)은 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백을 말하며 보더(Border)는 코드 블록 내부 공간 바로 바깥의 가장자리. 실제 코드 블록의 테두리를 밀한다. 마지막으로 마진(Margin)은 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격를 말한다.  오토레이아웃은 개체를 패딩으로 감싸 컨테이너를 만들 때 사용한다.                                            한마디로 우리가 만드는 UI의 크기는 개체의 크기 + 패딩을 뜻한다. 컨스트레인트란?컨스트레인..

TIL(Today I Learn) 2025.01.21