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 되면 물결 애니메이션으로 반짝이게 해주세요”개발자는 “이게 구현 가능하긴 한데... 성능에 부담되고 반응 속도도 떨어질 것 같은데요?”이런 상황에서 디자이너가 기본적인 개발 지식이 있다면?👉 "아,..