본문 바로가기

전체 글223

[TIL] 0812 1. 오늘 학습 키워드와이어프레임UI 디자인(스타일, 컬러, 텍스트)개인 과제 크리틱디자인 카타 참여 X 2. 오늘 학습한 내용을 나만의 언어로 정리하기개인과제 진행 현황: 4단계_UI 디자인 및 컴포넌트화 진행중 CH2. 디자인 입문 주차 개인과제 크리틱 진행함그룹화목적에 맞게 꼭 필요한 항목만 그룹화하기목적에 맞지 않거나 핵심이 아닌 내용은 과감히 드랍하기무리하게 모든 내용을 넣으려 하지 말 것문제 정의여러 문제를 분산하지 말 것탐색 과정에서 어려움을 느낀다 를 중심으로 문제를 하나로 집중해 통합하기해결 방안추천 태그 처럼 모호한 표현 대신 '필터 정렬에 ~추가하기'처럼 구체적인 문구로 변경할 것리서치 방법실무 리서치는 내부 데이터가 이미 있는 상태에서 진행현재 과제는 실제 데이터가 아닌 외부 서치 .. 2025. 8. 12.
[TIL] 0811 1. 오늘 학습 키워드사용자 흐름 정의주요 목표 설정정보 구조화면 기획 2. 오늘 학습한 내용을 나만의 언어로 정리하기 행동을 설계하는 3가지 중심 요소목표(Goal): 사용자가 이루고자 하는 목적행동(Task): 목적을 이루기 위한 단계별 액션흐름(Flow): 액션을 연결하는 정보 구조 진짜 문제 정의 예시“왜 이 앱을 다시 쓰지 않지?”“이 화면에서 사용자가 어떤 어려움을 겪었을까?”“정보가 많은데, 왜 선택을 하지 않았을까?” 와이어프레임 그리는 기본 순서 사용자 목적과 화면의 역할 정의: 이 화면은 어떤 행동 플로우의 일부인가요? 필요한 정보와 우선순위 정하기: 각 화면에서 반드시 보여줘야 하는 정보 메모하기 사용자 흐름과 행동 유도 점검: 이 화면에서 어떤 행동을 하게 되는지, 그 흐름.. 2025. 8. 11.
[TIL] 0808 1. 오늘 학습 키워드ch2: 정보 구조화, 클러스터링, 시각적 흐름, 플로우 차트ch3: 컴포넌트, 네이밍, 배리언츠, 프로퍼티ch4: 프로토타입 2. 오늘 학습한 내용을 나만의 언어로 정리하기 클러스터링 Clustering정보에도 친한 정도가 존재(중복/인접/상하 관계)클러스터링게슈탈트 원리의 근접성의 원리와 유사함정보를 구조화하는 것 ▶️ 가까운 관계끼리 묶어서 덩어리를 만들고, 또 더 큰 덩어리를 만드는 것이런 덩어리 짓기를 정보 클러스터링, 콘텐츠 블록화 라고 부름💡 클러스터링이 중요한 이유시선의 자연스러운 이동을 만든다더 쉽게 읽히게 한다요소들을 정리정돈하면서 여백, 간격, 비례 등을 연습할 수 있다정보 클러스터링카드는 크게 3개의 덩어리로 나눌 수 있음각 영역의 세부 영역(이미지, 제목과 .. 2025. 8. 8.
[실전 UI 디자인] CH4: 사용자 흐름을 설계하는 프로토타입 사고 4-1) 프로토타입과 제품 설계 프로토타입의 목적사용자의 목적에 맞는 흐름을 잘 만들었는지를 검증하는 것프로토타입을 만드는 이유기획서에 있는 플로우를 화면으로 구체화하고 싶어서개발자에게 전달하기 위해디자인 팀 내부에서 구조를 리뷰받기 위해유저 테스트를 준비하기 위해 북극성 지표와 프로토타입 북극성 지표는 우리 제품이 성공시켜야 하는 가장 중요한 사용자 행동 혹은 수치를 의미그 지표를 높이려면? ▶️ 사용자의 행동을 설계하고, 적합한 UI로 화면을 설계해야 함마지막으로 그 행동이 실제로 자연스럽게 연결되는지를 흐름으로 확인해야 함프로토타입은 그 흐름을 확인하게 해주는 효과적인 방법 중 하나 사용자 흐름을 검증하는 도구 내가 디자인한 제품이 실제로 사용자의 목적에 부합하는 지 확인하는 실험 도구 피그마 프로.. 2025. 8. 8.
[실전 UI 디자인] CH3: 컴포넌트 설계의 목적 3-1) 컴포넌트 설계의 목적 컴포넌트로 설계될 수 있는 것버튼, 인풋 필드, 카드 처럼 독립적인 기능을 가진 디자인 요소검색창, 탭바처럼 인터랙션을 포함한 복합적인 UI 구조배너, 상품 리스트, 게시물 피드처럼 반복 가능한 실제 디자인 패턴▶️ 우리가 다루는 모든 UI 요소는 컴포넌트고, 의도적으로 사용되어야 함컴포넌트 설계에서 중요한 것왜 이 구조를 컴포넌트화하는 것이 효율적인가 판단할 수 있는 사고력 좋은 컴포넌트의 기준사용성과 활용성을 고려해서 설계하는 게 핵심기준재사용성: 다양한 페이지와 맥락에서 같은 의미로 사용될 수 있어야 함 (e.g. 버튼)유연성: 상황에 따라 상태나 데이터, 구조가 바뀌어도 무너지지 않아야 함 (e.g. 카드 UI에 이미지가 없는 경우에도 레이아웃이 깨지지 않도록)확장.. 2025. 8. 8.
[실전 UI 디자인] CH2: 정보 구조와 시각 흐름을 통한 UI 설계 2-1) UI 설계와 정보 구조 정보 구조화의 개념디자인을 시작할 때는? ▶️ 사용자에게 보여줄 정보의 순서를 먼저 고민해야 함UI 디자인: 정보들을 시각적으로 정리해서 사용자에게 차근차근 전달하는 일 ▶️ 화면 안의 정보를 분류해서 사용자가 자연스럽게 따라올 수 있도록 함 정보 구조화와 UI의 관계사용자는? ▶️ 자신이 필요한 정보를 찾고, 필요한 기능을 쓰기 위해서 앱을 사용정보가 분류 없이 놓여있다면?체계나 분류, 기준 없이 디자인되어 있으면 어디를 봐야 할지 알 수 없음▶️ 그래서 정보를 목적에 따라 정리하는 '정보 구조화'가 필요함 정보 구조를 짜기 위한 UI 설계중고 거래 서비스의 정보 구조 예시사용자 주요 행동: 구매, 문의, 찜하기행동을 유도하려면 어느 보를 먼저 보여줘야 할까? ▶️ .. 2025. 8. 8.

티스토리툴바