PD_02_김미현 님의 블로그

오늘은 오즈코딩스쿨 프로덕트 디자이너 부트캠프 2기 51일차입니다.51일차에는 좋은 웹사이트 디자인에 대해 배우는 시간이었습니다!🍑 1) 좋은 웹사이트 디자인이란?“여러분이 최근에 가장 인상 깊었던 웹사이트는 어떤 사이트였나요?” 무엇이 좋았나요? (예: 보기 편하다, 간결하다, 깔끔하다 등)그 웹사이트는 왜 그렇게 느껴졌을까요?👀 여기서 “디자인”이라는 것은 겉모습뿐만 아니라 구조, 흐름, 인터랙션의 총합이라는 것을 강조합니다.좋은 디자인의 핵심 3요소정보 구조의 명확함 (시멘틱 구조)디자인 시스템의 일관성 (클래스 활용)사용자 중심의 레이아웃과 타이포그래피예제 1: 좋은 디자인 구조 분석👀 예시 분석 실습CSS Zen Garden하나의 HTML로 다양한 디자인 적용 → 구조는 유지, 스타일만 다..

오늘은 오즈코딩스쿨 프로덕트 디자이너 부트캠프 2기 50일차입니다.50일차에는 어제에 이어 CSS에 대해 배우는 시간이었습니다! 벌써 50일이라는 시간이 흘렀네요! 이번 CSS를 마지막으로 이론은 마무리 후 프로젝트에 들어갑니다!😊조금만 더 힘내면 금방 캠프 수료식이 다가올 것 같아요🥹 1) 클래스 활용법 & 그룹 스타일링클래스 선택자HTML에서 여러 요소에 같은 스타일을 반복해서 적용하고 싶을 때 사용하는 게 바로 클래스 선택자(.class)입니다.📌 기본 사용법html내용css.card {  background: #fff;  padding: 20px;  border-radius: 12px;}✅ 클래스의 특징장점설명✅ 재사용 가능한 번 정의한 스타일을 여러 요소에 반복 적용✅ 코드 분리 가능HTM..

오늘은 오즈코딩스쿨 프로덕트 디자이너 부트캠프 2기 49일차입니다.49일차에는 CSS 기본 문법 & 주요 속성 소개에 대해 배우는 시간이었습니다! 1) CSS란 무엇인가?✅ CSS란?CSS는 Cascading Style Sheets의 약자로, 우리말로 번역하면 ‘겹쳐지는 스타일 시트’, 혹은 ‘계단식 스타일 시트’ 정도로 해석할 수 있어요.하지만 너무 어려운 말처럼 들릴 필요는 없습니다. 우리가 실무에서 이해해야 할 건 아주 간단합니다:HTML이 웹페이지의 뼈대라면, CSS는 그 위에 입히는 디자인입니다. ex) 병원에 갔는데 구조만 있는 건물이라고 생각해보세요.벽도 흰색, 간판도 없음, 복도마다 똑같은 문만 달랑… 아무런 정보가 없어요.그럼 어떤 느낌이 들까요?어디가 입구인지도 모르겠고,어디로 가야 할..

오늘은 오즈코딩스쿨 프로덕트 디자이너 부트캠프 2기 48일차입니다.48일차에는 어제에 이어 HTML에 대해 배우는 시간이었습니다!1) 시멘틱 태그 & 웹페이지 구조 설계✅ 시멘틱 태그란?HTML을 처음 배울 때 로 모든 구역을 나눴던 기억 있으시죠? 예를 들어 이런 코드입니다✅ 시멘틱 태그란?HTML을 처음 배울 때 로 모든 구역을 나눴던 기억 있으시죠? 예를 들어 이런 코드입니다:로고메뉴본문푸터이렇게 div만 쓰면 컴퓨터 입장에서는 이게 무슨 영역인지 알 수 없어요. “디자인은 잘 보이지만, 의미는 알 수 없는 구조”가 되는 거죠.이 문제를 해결하기 위해 등장한 것이 시멘틱(Semantic) 태그입니다. Semantic은 ‘의미 있는’이라는 뜻이죠.✅ 시멘틱 태그란? 단순히 보이는 구조가 아니라, 각 ..

오늘은 오즈코딩스쿨 프로덕트 디자이너 부트캠프 2기 47일차입니다.47일차에는 HTML에 대해 배우는 시간이었습니다! 1) HTML이란? 디자이너가 알아야 하는 이유- HTML이란?: 먼저, HTML은 "HyperText Markup Language"의 약자입니다.단어만 들으면 어려워 보이지만, 간단히 말하면 웹페이지를 만들기 위한 기본 구조 언어.- HTML의 특징HTML은 웹 페이지를 만들 때 사용하는 마크업 언어로, 태그를 사용해 문서나 데이터의 구조를 명시합니다 HTML을 사용하면 텍스트, 이미지 등을 특정한 방식으로 표시할 수 있습니다 HTML 요소는 시작 태그(opening tag), 글자, 내용, 종료 태그(closing tag)로 이루어져 있습니다 HTML 요소의 속성은 시작 태그 안에 위..

오늘은 오즈코딩스쿨 프로덕트 디자이너 부트캠프 2기 46일차입니다.46일차에는 개발 지식에 대해 배우는 시간이었습니다! 1) 디자이너에게 개발 지식이 필요한 이유✅ 1. 협업을 위한 기본 소통 능력: “개발자와 일할 일이 없다”고 생각하는 디자이너는 거의 없습니다. 웹, 앱, 그리고 디지털 콘텐츠를 만드는 거의 모든 과정에는 개발자와의 협업이 포함됩니다.하지만 디자인을 아무리 잘해도, 개발자의 입장에서 이해할 수 없는 표현이나 설계가 들어가면 소통 오류가 발생하죠.예를 들어,디자이너가 “이 버튼은 hover 되면 물결 애니메이션으로 반짝이게 해주세요”개발자는 “이게 구현 가능하긴 한데... 성능에 부담되고 반응 속도도 떨어질 것 같은데요?”이런 상황에서 디자이너가 기본적인 개발 지식이 있다면?👉 "아,..

오늘은 오즈코딩스쿨 프로덕트 디자이너 부트캠프 2기 45일차입니다.45일차에는 AI기반 디자인프로세스 최적화 전략에 대해 배우는 시간이었습니다! STEP 1. 문제 정의 & UX 리서치- 북적북적 앱 소개 및 UX 이슈 예시: 귀여운 북적이와 쌓아보는 독서 기록- ChatGPT 프롬프트 시연: 북적북적 앱의 사용자 리뷰를 기반으로 피드 탐색 UX에서 자주 언급되는 불편한 점 3가지를 정리해줘. - GPT 이외의 ai들퍼플렉시티 : https://www.perplexity.ai/ 젠스파이크 : https://www.genspark.ai/뤼튼 : https://wrtn.ai/제미나이 : https://gemini.google.com/ ‎Gemini - 대화를 통해 아이디어를 강화하세요Bard가 Gemini로..

오늘은 오즈코딩스쿨 프로덕트 디자이너 부트캠프 2기 44일차입니다.44일차에는 AI를 활용한 디자인프로세스에 대해 배우는 시간이었습니다!1) 디자인 프로세스란?UX/UI 디자인은 단순히 화면을 예쁘게 만드는 것이 아니라, 사용자의 요구를 반영하고, 편리한 인터페이스를 제공하여 최적의 경험을 만드는 체계적인 과정이다.즉, 디자인을 통해 사용자의 문제를 해결하고, 제품이나 서비스가 더욱 효과적으로 작동하도록 만드는 것이다.1️⃣ 문제 정의 (Problem Definition)디자인을 시작하기 전에 먼저 해결해야 할 문제를 정의한다.사용자와 비즈니스의 요구 사항을 분석하여 디자인의 목표를 설정한다.예: "사용자들이 앱에서 원하는 제품을 쉽게 찾지 못하는 문제가 있다."2️⃣ UX 리서치 (UX Research..

오늘은 오즈코딩스쿨 프로덕트 디자이너 부트캠프 2기 43일차입니다.43일차에는 AI와 데이터 분석에 대해 배우는 시간이었습니다!1. 프롤로그: 직감만으로 UX 디자인을 결정할 수 있을까?서윤은 한 스타트업의 UX/UI 디자이너다. 최근 회사 앱의 이탈율이 높아지고, 사용자들의 불만이 늘어나면서 팀 내부에서 UX 개선이 필요하다는 논의가 시작됐다.팀 리더가 말했다. "우리 앱의 UX가 불편하다고 하는데, 정확히 뭐가 문제인지 데이터로 분석해볼 필요가 있어."하지만 서윤은 고민에 빠졌다. "나는 디자인을 잘할 줄 알지만, 데이터 분석은 익숙하지 않은데…" "UX/UI 디자이너가 데이터 분석을 꼭 해야 할까?"그런데 제품 매니저가 이런 질문을 던졌다. "서윤, 만약 사용자가 버튼을 찾기 어려워서 앱을 떠난다면..

오늘은 오즈코딩스쿨 프로덕트 디자이너 부트캠프 2기 42일차입니다.42일차에는 AI 기반 UX 리서치 방법에 대해 배우는 시간이었습니다! - AI를 활용한 UX 리서치의 힘1. 프롤로그: 신입 UX/UI 디자이너 민지의 고민민지는 스타트업에서 UX/UI 디자이너로 일하는 신입이다.첫 프로젝트로, 자사 모바일 앱의 사용자 경험(UX)을 개선하는 작업을 맡게 되었다."우리 앱을 더 사용자 친화적으로 만들려면 뭘 개선해야 하지?"민지는 UX 리서치를 시작하려 했지만, 어디서부터 시작해야 할지 막막했다.기존 방식의 UX 리서치를 떠올려 보니,✔ 사용자 설문조사를 직접 만들어야 하고,✔ 사용자 테스트를 진행하려면 참가자를 모집해야 하며,✔ 경쟁사 분석을 하려면 하나하나 앱을 사용해 보면서 정리해야 했다."이거 다..