2025/02 22

[디자인부트캠프] DAY 24 | UX리서치 준비_1

UX리서치 준비_1  목차 강의 개요UX 리서치 대상 선정서베이 설계 및 실행인뎁스 인터뷰 개요 및 실습Q&A 및 사례 공유UX 리서치 준비 단계의 중요성 1. 목적에 맞지 않은 사용자를 모시면 인사이트를 얻지 못할 수 있다. 2. 조사의 목표를 달성하기 위해서는 타깃을 정밀히 조준해야 한다. 3. 질문지 준비가 완료되면 파일럿 테스트를 필수적으로 진행해야 한다.리서치 대상 선정이 제품/서비스 개선에 미치는 영향 -리서치 대상을 잘못 선정하면 제품과 서비스 개선에 부정적인 영향을 미칠 수 있다. -잘못된 대상 선정의 영향 리서치와 맞지 않는 대상자를 선정하면 질문이 이어지지 않거나 의미 없는 답변만 나올 수 있다. -리서치 대상을 잘못 선정하면 제품과 서비스의 개선 방향이 잘못 갈 수 있다.서베이와 인뎁..

[디자인부트캠프] DAY 23 | UX리서치 방법론

UX리서치 방법론 목차고급 정성적 리서치 기법고급 정량적 리서치 기법 혼합 방법론최신 UX 리서치 동향 및 도구실무 적용 전략 고급 정성적 리서치 기법 맥락적 탐구(Contextual Inquiry)개념 소개: 사용자의 실제 환경에서 관찰과 인터뷰를 결합하여 심층적인 인사이트를 도출하는 방법입니다.적용 방법: 현장 방문을 통해 사용자의 작업 흐름을 관찰하고, 동시에 인터뷰를 진행하여 사용자의 목표와 동기를 이해합니다.주의사항: 관찰 시 방해를 최소화하고, 인터뷰에서는 개방형 질문을 사용하여 사용자의 자연스러운 행동과 생각을 이끌어내야 합니다. 실제 사례: 소프트웨어 개발 회사에서 고객 지원 팀의 업무 환경을 분석하여 인터페이스 개선에 성공한 사례한 소프트웨어 회사에서 새로운 프로젝트 관리 도구를 개발하고..

[코딩 스터디] HTML, CSS 용어 사전

Html, CSS의 차이 1. HTML (HyperText Markup Language)HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다. 웹 페이지에 들어갈 내용(텍스트, 이미지, 비디오 등)을 나타내는 데 사용됩니다.HTML은 태그(Tag)로 구성되어 있으며, 이를 통해 다양한 웹 요소를 구조적으로 배치할 수 있습니다.예시: , , ,  등이 HTML 태그입니다.구성 요소:헤더(Head): 문서의 메타데이터를 정의합니다. , ,  등을 포함합니다.본문(Body): 실제 콘텐츠를 담는 부분으로, 텍스트, 이미지, 링크 등을 포함합니다. 2. CSS (Cascading Style Sheets)CSS는 웹 페이지의 스타일을 정의하는 언어입니다. HTML로 구조를 만들고 CSS로 이를 꾸미고 스타일을..

코딩 스터디 2025.02.27

[디자인부트캠프] DAY 22 | UX리서치 기본 개념과 유형_1

UX리서치 기본 개념과 유형 목차UX 리서치의 개요UX 리서치의 주요 유형데스크 리서치의 이해와 방법론문제 정의의 중요성과 접근 방법UX 리서치란?목적: 사용자 경험을 향상시키기 위해 사용자의 행동, 요구, 동기 등을 조사하는 과정.목표: 제품/서비스와 사용자 간의 상호작용을 이해하고 이를 개선하는 것이 주된 목표입니다.방법: 사용자 인터뷰, 설문조사, 사용성 평가 등 다양한 피드백 방법을 통해 사용자 행동을 이해하고 그에 따라 개선점을 도출합니다.1993년 애플 컴퓨터의 부사장으로 재직하던 도널드 노먼이 자신의 직함으로 'User Experience Architect(사용자 경험 건축가)'라는 호칭을 사용하면서부터 UX가 대중적으로 알려지게됨 정성적 리서치목적: 사용자의 행동과 태도를 심층적으로 이해하..

[디자인부트캠프] DAY 20 | UI 디자인 실전_2

UI 디자인 실전_2 목차반응형 랜딩페이지란?반응형 레이아웃 설계 원칙반응형 랜딩페이지의 주요 구성 요소디자인 스타일 가이드 적용실전 반응형 랜딩페이지 디자인반응형 디자인(Responsive Design):스마트폰, 태블릿, 데스크탑 등 다양한 화면 크기에 맞춰 디자인하는 것이 중요합니다.각 디바이스에 맞는 해상도 및 브레이크포인트 조정 (스마트폰: 320px, 태블릿: 768px–1024px, 데스크탑: 1024px 이상).모바일 우선 접근 방식(Mobile-first approach)을 적용하여 모든 기기에서 원활하고 명확한 사용자 경험을 보장합니다. 해상도 320px 이상 또는 768px 미만 -> 스마트폰해상도 768px 이상 또는 1024px 미만 -> 태블릿해상도 1024px 초과 -> PC레..

[디자인부트캠프] DAY 21 | UI 디자인 실전_2

UI 디자인 실전_2 목차UI 디자인 프로세스 개요서비스 기획 및 아이디어 발상디자인 시스템의 이해와 구축와이어프레임 작성 및 레이아웃 설계화면 디자인 및 프로토타이핑피드백 및 개선 방안 논의UI와 UX의 관계사용자 인터페이스(UI)와 사용자 경험(UX)의 상호작용을 중시하며, UI는 UX를 보완하고 그 경험을 쉽게 사용할 수 있도록 돕는 역할을 한다.UI 디자인은 서비스를 구조화하고, 내용을 전달하며, 사용자와의 상호작용을 디자인한다.사용자 경험(UX: User Experience)이란 사용자가 기업, 서비스, 기업의 제품과 상호작용하면서 얻는 모든 측면의 경험을 의미한다.정말 훌륭한 사용자 경험을 제공하려면 고객이 직접 필요하다고 말하는 것 이상을 제공해야 하며, 체크리스트에 나열된 기능을 제공하는 ..

2주차 | 피그마 컴포넌트 및 배리언츠 완벽 가이드!

컴포넌트와 배리언츠  컴포넌트의 장점일관성 유지:한 번 정의한 컴포넌트를 여러 곳에서 재사용하면, 디자인의 스타일과 동작이 전체 프로젝트에 걸쳐 일관되게 유지됩니다.생산성 향상:동일한 요소를 반복해서 만들 필요 없이 미리 만들어둔 컴포넌트를 활용함으로써 디자인 작업의 속도를 크게 높일 수 있습니다.유지보수 용이:마스터 컴포넌트를 수정하면, 해당 컴포넌트를 사용하고 있는 모든 인스턴스가 자동으로 업데이트되어, 변경 사항 관리가 용이합니다.협업 효율성:팀원들이 동일한 컴포넌트를 공유함으로써, 디자인 파일의 통일성을 유지하고, 개발자와의 협업 시에도 명확한 기준을 제공할 수 있습니다.모듈화 및 확장성:복잡한 UI를 작은 단위의 컴포넌트로 분할하여 관리할 수 있으므로, 전체 시스템의 확장이나 변경이 필요할 때도..

1주차 | 디자인 시스템 총정리!

디자인 시스템 총정리  1. 본인 간단한 소개안녕하세요. 저는 산업디자인 전공자로, 제품 디자인, UX/UI, 브랜딩 등 다양한 분야에서 실무 경험을 쌓아왔습니다. 프리랜서로 활동하며 로고, 웹사이트, PPT 디자인 등 브랜드 아이덴티티 구축 작업을 진행했고, 회사에서는 전자제품 기획, 리서치, 모델링, 렌더링 등 제품 개발의 전 과정을 경험했습니다. 이러한 경험을 바탕으로, 사용자 중심의 디자인과 체계적인 프로세스의 중요성을 깊이 깨달았으며, 앞으로 더 전문적인 프로덕트 디자이너로 성장하고자 합니다. 미래 UX/UI 디자이너 비전 및 나의 방향미래의 비전:사용자 중심의 혁신:디지털 환경이 점점 복잡해짐에 따라, 사용자가 직면하는 문제를 심도 있게 이해하고 이를 혁신적인 디자인 솔루션으로 해결하는 것이 ..

1주차 | 스터디 목표 및 개인 작업 정리

스터디 목표 및 개인 작업 정리1. 간단한 자기소개안녕하세요 :) 저는 산업디자인을 전공하며 제품, 가구, UX 등 다양한 디자인 분야에서 경험을 쌓아온 디자이너입니다.프리랜서로 활동하면서 브랜딩, 로고 제작, 웹사이트 및 PPT 디자인 등 여러 프로젝트를 진행했으며,제품디자인 에이전시에서 전자제품 디자인부터 기획, 리서치, 모델링, 렌더링까지 제품 개발의 전 과정을 경험하였고,최근 회사에서는 리브랜딩, 디자인 시스템 구축, 웹사이트 랜딩페이지 및 앱 디자인 등 비즈니스와 연계된다양한 프로젝트를 통해 넓은 시각과 체계적인 접근법을 배울 수 있었습니다.이러한 경험을 바탕으로 앞으로는 개발자와의 원활한 소통을 위해 코딩과 UX/UI를 심화 학습하여실제 구현 가능한 디자인을 완성해 나가고자 합니다.  2. 스..

2주차 | 포트폴리오 방향성 수립 및 인사이트

https://www.dousanmiao.com  장점 : 미니멀한 깔끔한 스타일과 포인트 색상, 보기 좋은 흐름, 셀프 브랜딩로고 삽입특징 :상단 네비게이션 바 : work, about, coaching, contact상단 디자이너 소개 텍스트 마우스 호버 인터렉션다운로드 CV사진업무 영역디자인 철학코칭 및 후기  https://williamle.design  장점 : 내용이 집중되는 레이아웃 및 컬러, 쉽게 이해되는 흐름, 셀프 브랜딩로고 삽입특징 : 상단 네이게이션 바 : work, about me, play스크롤 내리며 프로젝트 이미지 카드 한눈에 확인프로젝트 별 상세 설명이 잘되있음 : 프로세스 설명 네이게이션 바 마우스 호버 인터렉션play창에서 한눈에 보이는 영상모음 적용할 부분 1. 전체적..