미니스토리

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

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

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

그리드 및 키라인그리드: 시각적으로 일관성과 질서를 잡아주는 그래픽 시스템키라인: 시각적 비율을 유지할 수 있게 해주는 가이드 라인아이콘은 반드시 정수로 제작 세이프에어리어(Safe Area)화면의 가장자리에서 콘텐츠가 잘리거나 가려지지 않도록 보장하는 영역사용자 경험 개선: 콘텐츠가 잘리는 문제 방지디바이스 호환성: 다양한 화면 크기에서 일관된 디자인 유지시각적 안정성: 안정적인 레이아웃 제공시각 보정같은 영역 안에서의 아이콘 혹은 요소들은 측정 크기가 같아도 시각적으로 보정을 해야함아이콘의 요소가 사각형과 원형이 있다면 px크기가 아닌 실제 넓이에 대응배경색이 있는 문단에서 배경색이 밝다면 나머지 텍스트와 동일어두운 배경색 > 텍스트와 문단 넓이를 같게모바일 앱접근성: 기기에 설치 필요, 앱 스토어에..

Atomic design화학적 관점에서 영감을 얻은 디자인 시스템원자(atom): 가장 작은 단위 컴포넌트(도형, 텍스트, 색상, 아이콘 등) / 파운데이션분자(molecules): 2개 이상의 원자를 합친 컴포넌트(input, 내비게이션, 카드, 등) / 컨테이너유기체(organism): 분자 혹은 분자와 원자를 결합함(헤더, 카드를 담고있는 전체 프레임 등)템플릿(Templetes): 여러 유기체의 집합으로 여러 카드, 그리드를 묶는 컴포넌트(헤더, 메인, 푸터)페이지(Page): 완성된 하나의 페이지atom, molecules, organism 의 예시ㄴ 유기체와 템플릿의 차이는 모호한듯 합성 컴포넌트: 대부분 버튼 컴포넌트에 파운데이션 혹은 컴포넌트가 합쳐진 형태(다이얼로그, 리스트, 카드 등)..

분기점데스크탑 화면: 가로 1024px 이상태블릿 화면: 가로 768px이상, 1024px 미만모바일 화면: 가로 768미만그리드그리드 잡기 피그마 단축키 shift + G이 부분은 한번 더 복습오토레이아웃: 프레임 정렬에 대학 핵심 기능 / 패딩, 마진값은 자동으로 적용패딩(Padding): 내부 여백보더(Border): 프레임 테두리마진(Margin): 외부 여백 - 오토레이아웃의 복제 요소는 레이어가 밑으로 추가됨 / ctrl+d로 복제 했을 때 프레임과 오토레이아웃 비교 컨스트레인트: 오토레이아웃 안 요소 움직임 제한ㄴ 오토레이아웃, 컨스트레인트, 리사이징은 다시 학습해야될듯 폰트 스타일: 일정한 규칙에 따라 정렬된 세트 폰트 스타일의 구성패밀리: 폰트의 종류굵기: 디자이너는 굵기로, 개발자는 1..

의사상태: 컴포넌트의 가상의 상태 배리언츠(Variants): 컴포넌트 의사상태를 여러개 만듦 프로퍼티: 구조가 바뀌지 않을 시 요소 변경에 사용Boolean: 특정 요소를 y/n 형식으로 보이거나 안보이게 함Instance swap: 인스턴스 요소(보통 아이콘) 교체Text: 텍스트 수정파운데이션이 변경되면 배리언츠, 그렇지 않으면 프로퍼티ㄴ 오른쪽 사진의 경우 아이콘은 변하였지만, 아이콘의 속성값은 변하지 않아 프로퍼티 적용ㄴ 버튼의 길이는 상관 없는듯(오토레이아웃) / 아이콘의 색이 변해도 프로퍼티인지? 합성 컴포넌트: 바텀시트, 다이얼로그, 리스트, 카드, 탭 등 네스티드 인스턴스: 상위 컴포넌트에서 하위 컴포넌트의 프로퍼티를 바로 조작하기 위함on/off 기능의 컴포넌트 만들기복제하여 인스턴스 ..

컨트롤 컴포넌트의 개념다른 선택지를 특정할 수 있도록 하는 요소여러 선택지 중 사용자가 원하는 것을 고를 수 있도록 도움컨트롤 컴포넌트의 종류체크박스: 중복 선택 가능라디오 버튼: 한가지만 선택스위치(토글)슬라이더 - 컨트롤 요소의 터치 영역은 그 주변의 최소 크기로 만들어야 됨- 또한 라벨(텍스트)와 같이 쓰이므로 라벨과 같이 컨트롤 요소를 묶어서 사용- 간격을 충분히 줘야됨컨트롤 요소와 라벨의 높이값을 같게 해야됨 - 24px 추천라벨(텍스트) = 폰트값x행간ㄴ 폰트 16px, 행간 150% = 24px 체크박스체크 박스를 24px로 하기로 했다면 실제 클릭 범위는 24px, 체크박스의 이미지 크기는 20px로 시각적 보정을 해야함ㄴ 라벨(텍스트)과 시각적 크기 차이가 나기 때문 / 라벨(텍스트)의 ..