미니스토리

디자인 시 유의사항 다이나믹 컬러앨범 혹은 사진의 이미지 컬러를 불러와서 UI에 적용하는 다이나믹 컬러 컨텐츠 중심의 앱일 경우 primary컬러 사용을 자제primary 컬러를 사용하면 컨텐츠를 몰입하는데 방해되기 때문 목적이 분명한 경우 하나의 primary컬러를 사용사용자에게 행동 유도를 해야됨 제목의 행간 125~150% 권장 / 본문은 180% 이상 권장  배경색과 접근성을 고려한 색상 사용4.5:1 이상의 색상을 권장한다. (hex: 767676 이상 사용) 폰트는 12pt 이상한국어의 경우 자음+모음을 조합하여 11pt 이하로 사용시에 뭉개져 보일 수 있다고 한다.때문에 12pt 이상으로 작성하는것을 권장하는데, 실제 비교해보니 영어도 작게 보여서 웬만하면 12pt 이상으로 작성하는게 좋아 ..

css (Cascading Style Sheets)- 웹 페이지를 꾸밈- 색, 글꼴, 간격, 위치를 입힘 내부 css장점: 특정 페이지에만 스타일을 적용할 수 있어 관리가 용이단점: 여러 페이지에서 동일한 스타일을 사용해야 할 경우, 각 페이지마다 스타일을 반복해서 작성해야 하므로 비효율적외부 css장점: 여러 페이지(html)에서 동일한 스타일을 쉽게 적용할 수 있어 유지보수가 용이단점: 외부 파일을 로드해야 하므로 페이지 로딩 속도에 영향을 줄 수 있음  rule set 선택자(selector)HTML에서 꾸밀 요소를 선택ex) 요소를 꾸미려면 선택자로 p를 사용 선언(declaration)무엇을 어떻게 꾸밀지 적는 규칙ex) color red 는 글자 색을 빨간색으로 바꿈 속성(property)무..

웹개발사용자가 접하는 모든 웹사이트와 애플리케이션의 외형과 동작을 설계하고 구현 프론트엔드화면에 보이는 작업웹 개발의 사용자 인터페이스(UI)와 사용자 경험(UX)을 담당하며, 브라우저에서 실행되는 웹 기술(HTML, CSS, JavaScript)을 사용 백엔드- 화면 뒤에(서버)를 다루는 작업 리엑트- html, css, java로 이루어짐 HTML (HyperText Markup Language)- 콘텐츠의 구조를 정의하고, 브라우저가 이를 해석하여 화면에 출력웹 페이지의 뼈대를 만듬브라우저에게 지시하는 언어콘텐츠를 구조화 함: HTML5 문서를 선언.: 문서의 최상위 태그.: 문서 정보를 포함 (메타데이터, 스타일, 스크립트 등).: 실제로 화면에 표시되는 콘텐츠를 포함 HTML 태그의 구조시작 태..

개인과제 피드백을 받았다. 이틀만에 작업한 과제였고, 조금 부족했던거 같다. 필수 요소인 버튼 컴포넌트를 따로 만들지 않고 작업했다는걸 피드백 내용을 듣고 알았다. 버튼 컴포넌트를 만들지 않고 버튼 영역 컴포넌트를 만들었더라.. 기존 컴포넌트 요소들을 삭제하고 다시 재수정 하였다.해설영상과 함께 제공받은 피그마 파일을 하나씩 뜯어 보면서 어떻게 컴포넌트를 만들고 페이지를 작업하는지 이해했다.   가격과 '원'을 분리하여 디자인하기가격은 데이터를 불러오고 '원'은 고정적인 레이블이기 때문에 개발까지 고려하여 분리하여 디자인한다.ㄴ 사진은 가격과 원의 사이즈가 동일하지만, 디자인에 따라서 '원'을 더 작게 표현하기도 한다.  텍스트의 줄바꿈을 고려하여 오토레이아웃하기과제를 진행할 때 프레임에 뿌리듯 배치하며..

유저 리서치유저의 행동과 동기를 특정 맥락에서 조사하여 유용한 인사이트를 얻는 활동유저에 대한 이해도 강화, 효율적인 커뮤니케이션 도구 유저 리서치의 종류 애널리틱스: 데이터 또는 통계의 체계적인 계산전 분석 정성적 리서치목적: why에 대한 심층적 인사이트를 얻음한계: 모든 유저를 대표하지 않음- 유저의 생각, 의견, 견해 등 정량적 리서치목적: what, how에 대한 답을 얻음 (근거를 얻을 수 있음)한계: why에 대한 근본적 원인 파악이 어려움- 설문조사, a/b 테스트, 애널리틱스 등 마켓 리서치시장 규모 및 성장 동향: 특정 시장의 수요와 성장 가능성 예측수익구조: 유저가 가치를 느끼고 지불할 의사가 있는 부분 파악, 평가 개선법적 제약: 국제 시장 진입 시 발생 가능한 법적 문제 고려 경쟁..

UX (User experience, 사용자 경험)- 제품, 서비스등에 상호작용하여 얻는 경험 UI (User Interface, 사용자 인터페이스)- 제품, 서비스를 사용할 때 맞닻는 시각적 구성 요소 더블 다이아몬드 모형발견(Discover): 무엇이 문제인지? - 유저 리서치정의(Define): 문제의 집중 - 어피니티 다이어그램, 페르소나발전(Develop): 문제 해결 아이디어 발산(브레인 스토밍) - I.A, 와이어 프레임전달(Deliver): 제작 및 테스트 MVP (Minimum Viable Product)- 최소 기능을 갖춘 제품ㄴ프로토타입과는 다른 느낌이다. 아래에서 비교해보았다. 프로토타입목적: 초기 아이디어나 컨셉의 구체화시점: 개발 초기범위: 주로 디자인, 기능, 사용자 경험을 시..

투썸하트 UI프로젝트를 마무리하는 날이다. 이번주가 금방 지나갔는데, 어떻게 시간이 흘러간지 모르겠다. 이번 프로젝트를 마무리하면서 배운것은 소통이다. 설득과 문제 제시, 의견을 나누거나 조율하는 등 모든 일에 소통이 들어간다. 나는 소통이 부족했던것 같다. 팀원들과 이야기 할 때 말 수가 적었고 의사표현도 확실하게 하지 않았다. 내가 맞다고 생각하는 부분도 확실하게 설득할 자신이 없으면 입 밖으로 꺼내지 않고 머릿속에 맴돌다가 흘려보낸다. 나중에 가서야 내가 생각한게 맞는데? 하더라도 이미 진행된 상황이 있기에 쉽게 말하지 못했다. 이건 나만이 아닌 팀원 전체에게 피해를 줄 수 있다. 의견을 제시하지 않으면 진행이 안되고 그대로 썩는 시간은 누가 보상해주지 않는다. 일단 던져보면 팀원들이 해결해 줄 수..

투썸하트 UI 개선 프로젝트 선정 이유높은 사용자 리뷰: 팀원 전원이 사용해본 경험을 바탕으로, 다운로드 수 100만 이상, 다양한 경쟁 앱들과의 비교 가능성, 그리고 UI 개선 필요성이 두드러져 투썸하트를 선정하게 되었다.- 경쟁이 치열한 커피 시장에서 투썸하트의 디저트, 케이크와 같은 제품 판매 중심의 UI 개선을 통해 사용자 경험을 향상시키고, 고객 충성도를 높이려고 한다.서비스 조사주요 서비스: 투썸하트는 다양한 커피와 디저트 메뉴를 제공하며, 배달 서비스와 매장 내 식사 옵션을 포함한다. 앱을 통해 주문 및 결제가 가능하며,회원제 혜택과 프로모션도 운영하고 있다.특징: 시즌 한정 메뉴와 다양한 이벤트를 통해 고객의 관심을 끌고 있다.  문제: 투썸 하트 어플의 주문하기 메뉴에서 원하는 메뉴가 품..

오늘은 디자인 캠프 3주차가 진행된 날이다. uiux에 잘 몰랐지만, 조금은 발을 딛는 느낌이다. 이번 주는 정말 바쁘게 지나갔다. 개인적인 사정으로 월요일에 참석하지 못하고, 화요일 오후부터 뒤늦게 합류하여 개인 과제를 진행했다. 늦게 시작한 만큼 제출 기한을 맞추기 위해 최소한으로 작업을 진행했는데, 개인 과제의 목표가 피그마 툴에 익숙해지는 것이었기 때문에 디자인적 창의성은 배제하고 툴 다루기에 집중했다. 쿠팡의 메인 홈페이지와 상세 목록, 구매하기까지의 플로우에 약간의 변화를 주어 작업을 진행했는데, 폰트와 컬러, 컴포넌트 등 전체적인 가이드만 잡아두니 금방 완성할 수 있었다.결과적으로는 디테일이 부족했다. 예를 들어, 폰트와 폰트 사이의 간격, 크기, 프로토타입 등에서 아직 많은 개선이 필요했지..

홈 화면, 목록 화면카테고리 별 목록 정리 - 텍스트 프로퍼티 적용유제품 터치 영역 확보 - 프레임 씌우기컨템츠 영역 크기별 배리언츠 제작상단 바 인스턴트 스왑 프로포티 적용텍스트, 불리언 프로퍼티 적용탭 목록 on/off 활용네비게이션 바 스크롤 고정텍스트 간 오토레이아웃 간격은 4, 8배수 디자인에서 유동적으로 적용해도 된다고 함숫자와 텍스트 분리 제작(가격, 퍼센트 등) > 숫자는 데이터로 불러오기 때문, 숫자와 글자 간격을 주기 위함 UI 키트마스터 컴포넌트 별 이름 정리( / 기준으로 정렬)상태 별 배리언츠 제작아이콘 시각 보정텍스트는 14px 이상으로 제작 권장아이콘은 24px 이상 프로토타입화면 전환 시 slide in을 제일 많이 활용 (300ms) > curve - ease out뒤로 ..