티스토리에는 이론, 실습 위주의 글을 올립니다. 🤧
프로덕트 디자이너는 기획자, 개발자와 협업이 필수적이다.
아래 리스트를 참고하여 위풍당당한 프로덕트 디자이너가 되보자!
프로덕트 디자이너가 알아두면 좋을 개발 상식 01. HTML 기본 개념
프로덕트 디자이너가 알아두면 좋을 개발 상식 02. HTML 기본 요소
프로덕트 디자이너가 알아두면 좋을 개발 상식 03. HTML으로 웹페이지 기본 구조 작성해보기
프로덕트 디자이너가 알아두면 좋을 개발 상식 04. Figma에서 UX/UI 디자이너가 개발자와 소통 잘하는 법 (컴포넌트 네이밍)
프로덕트 디자이너가 알아두면 좋을 개발 상식 05. CSS 기본 개념과 문법 이해하기
프로덕트 디자이너가 알아두면 좋을 개발 상식 06. CSS : 박스모델
프로덕트 디자이너가 알아두면 좋을 개발 상식 07. CSS 실습
브런치에서는 좀 더 쉽게 풀어쓰고 있어요. 위 내용들이 어렵다면 아래 브런치 글에서 편하게 읽어보세요. 🫅
01화 01. 동화로 이해하는 html
프로덕트 디자이너의 개발 공부 | 웹 세상에 첫 씨앗이 심어지다: HTML의 탄생과 성장 이야기 옛날 옛적, 컴퓨터와 인터넷이 처음 생겨났을 무렵, 사람들은 웹(Web)이라는 새로운 세상을 만들고 있
brunch.co.kr
02화 02. 동화로 이해하는 CSS
“웹 세상에 색을 입히는 마법사, CSS의 모험” 옛날 옛적, 컴퓨터와 인터넷이 생겨나고 사람들은 웹 페이지를 만들기 시작했어. 웹 세상에는 HTML이라는 친구가 먼저 나타나서, 페이지의 구조와
brunch.co.kr
JS와 React를 공부하고 있는데, 아직도 이해가 잘 안 돼서 하루가 순식간에 지나가 버린다. 예전에 주변의 비전공자 디자인 직군 사람들을 보며 ‘대단하다’고 생각했던 적이 있는데 (전공자인 본인이 그들과 무슨 차이점이 있는지 스스로와 비교해보기도 했다). 하지만 개발은 다르다는 걸 느끼고 있다. 기초 지식이 생각보다 훨씬 중요한 분야라는 걸 깨닫고 있다.
항상 데이터를 강조해왔던 만큼, 나도 그만한 자격이 있는지 되돌아보게 된다. 그래서 SQL도 공부해서 내년 초에 자격증 시험에 도전해보고 싶다. 며칠 전부터 SQL 강의를 듣기 시작했는데, 이것 역시 쉽지 않다. 🥸 여러 분야를 공부하는 본질의 목적을 잊지 말자! 🫠 기록도!
하루 공부를 마치고 거울에 비친 내 얼굴을 보면 컴퓨터만 바라본 탓인지 눈이 빨갛게 충혈돼 있다. ㅋㅋ
자. 그럼 사담은 제쳐두고.
요즘 실습의 반복이다. 디자인은 틀이 초반에 잡히고 생각으로 구체화시키는 경우가 많았는데, 개발은 그 반대다.
코드로 구현하는 것이기에 방향이 좀 다르다. 그래서 매일 블로그 목표였는데 방식을 좀 바꾸기로 했다.
클론 코딩하는 경우가 많아서 그것들은 제외하고
혼자 실습하며 공부했던 예제를 바탕으로 블로그에 써보려고 한다.
시작~ 💁♀️
공부해도 잘 이해가 안될 때 유독 흥미가 떨어지는 사람 있나? 그게 나다. 그래서 좋아하는 영화 중 하나인 헤어질 결심을 주제로 코드를 짰다. 정훈희-안개를 백그라운드에 넣어놓고 계속 들었다. 🥰 다시 재밌어졌다.
1. 헤어질 결심 소개글 -> 웹사이트로 만들기
1. 사용 목적
이 코드는 영화 “헤어질 결심”을 소개하는 웹 페이지를 구성하기 위해 작성되었다. 목표는 영화의 줄거리, 감독 정보, 주요 대사 및 등장인물 설명을 직관적으로 배치하여 사용자에게 전달하는 것이다. 또한, 사용자가 영화 분위기에 몰입할 수 있도록 배경 음악을 제공하고, 음악을 재생하거나 정지할 수 있는 재생/정지 버튼을 추가하여 상호작용성을 높였다.
2. 관련 개념
HTML 관련 개념
• <section> 태그: 페이지의 주요 콘텐츠, 예를 들어 영화 줄거리나 감독 정보를 담는 영역을 정의한다. <section>은 논리적으로 연관된 콘텐츠를 하나의 묶음으로 구성할 때 사용된다.
• <aside> 태그: 주요 콘텐츠와 관련 있는 부가 정보를 담는 영역이다. 여기서는 등장인물 정보를 보여주는 용도로 사용되며, 보조 콘텐츠를 표현할 때 자주 쓰인다.
• <audio> 태그: 배경 음악을 삽입하기 위해 사용한다. id 속성을 통해 JavaScript 코드에서 접근할 수 있도록 설정하고, loop 속성을 통해 반복 재생을 설정했다.
• <button> 태그: JavaScript 함수 호출을 위한 버튼을 정의한다. onclick 속성으로 버튼이 클릭될 때 특정 함수가 호출되도록 설정했다.
CSS 관련 개념
• Flexbox: 페이지의 레이아웃을 구성하는 데 사용된 CSS 기술이다. .container에 Flexbox를 적용하여 주요 콘텐츠 섹션과 피드 섹션을 가로로 정렬한다.
• max-width와 margin: 0 auto: .container의 최대 너비를 설정하고, 가운데 정렬하여 반응형으로 구현한다.
• box-shadow: .content와 .feed에 그림자 효과를 주어 입체감을 추가하고 콘텐츠 영역을 구분했다.
• 간격 (padding, margin): 각 요소에 여백을 주어 가독성을 높인다.
• 폰트 스타일링: <h1>, <h2>, <p> 태그에 크기와 여백을 설정해 텍스트를 일관되게 표현한다.
JavaScript 관련 개념
• 이벤트 처리: button 요소에 onclick 속성을 통해 toggleMusic() 함수를 호출함으로써, 사용자가 버튼을 클릭할 때 배경음악의 재생/정지가 이루어진다.
• audio 객체 제어: audio 태그에서 ID를 사용해 JavaScript로 접근하고, .play() 및 .pause() 메서드를 통해 오디오의 재생 상태를 제어했다.
3. 코드 상세 설명
HTML 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>헤어질 결심 - 영화 소개</title>
<link rel="stylesheet" href="style.css">
</head>
<body>• <!DOCTYPE html>: 문서 유형을 HTML5로 선언하여 최신 HTML 기능을 사용할 수 있게 한다.
• <html lang="ko">: 문서의 언어를 한국어로 설정하여 검색엔진 및 접근성 도구가 페이지를 한국어로 인식하도록 한다.
<audio id="background-music" loop>
<source src="soundtrack.mp3" type="audio/mpeg">
이 브라우저는 오디오 재생을 지원하지 않습니다.
</audio>
<div class="music-control">
<button onclick="toggleMusic()">🎵 음악 재생/정지</button>
</div>• <audio>: ID를 설정하여 JavaScript에서 이 요소를 제어할 수 있게 했다. loop 속성은 음악이 끝나면 자동으로 반복 재생되게 한다.
• button 요소와 onclick 속성: 재생/정지 버튼이 클릭되면 toggleMusic() 함수를 호출하여 음악의 상태를 제어한다.
<div class="container">
<section class="content">
<h1>헤어질 결심</h1>
<p>《헤어질 결심》은 2022년 대한민국에서 개봉한 미스터리 로맨스 영화...</p>
</section>
<aside class="feed">
<h2>등장인물</h2>
<div class="feed-item">
<h3>해준 (박해일)</h3>
<p>산에서 일어난 변사 사건을 조사하는 형사로...</p>
</div>
</aside>
</div>
</body>
</html>• <section class="content">와 <aside class="feed">: 주요 콘텐츠와 부가적인 정보를 구분하여, 영화의 줄거리와 등장인물 설명을 각각 담았다.
CSS 코드
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f5f5f5;
}• 글로벌 스타일 설정: margin과 padding을 0으로 초기화하여 기본 여백을 제거하고, 폰트와 배경색을 설정했다.
.container {
display: flex;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
gap: 20px;
}• display: flex: 좌측 콘텐츠 영역과 우측 피드 영역을 Flexbox로 배치하여 가로 정렬을 구현했다.
.content, .feed {
padding: 20px;
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}• box-shadow: 콘텐츠와 피드 섹션에 그림자를 추가하여 콘텐츠가 배경에서 떠 있는 효과를 줬다.
JavaScript 코드
<script>
const music = document.getElementById("background-music");
function toggleMusic() {
if (music.paused) {
music.play();
} else {
music.pause();
}
}
</script>• const music = document.getElementById("background-music"): audio 요소를 변수에 저장해 제어 가능하게 한다.
• toggleMusic 함수: music.paused 상태를 확인하여, 음악이 재생 중이 아니면 play()를 호출해 재생하고, 재생 중이면 pause()를 호출해 정지한다.
요점 정리 및 회고
요점 정리
• 목표: 영화 “헤어질 결심”의 내용을 소개하는 웹 페이지를 구성하고, 배경음악을 통해 분위기를 살렸다.
• HTML 구조: <section>과 <aside>를 사용해 콘텐츠와 부가 정보를 나눴으며, <audio>와 <button>으로 음악 재생 기능을 추가했다.
• CSS 레이아웃: Flexbox와 box-shadow를 사용해 콘텐츠를 시각적으로 구분하고 구조화했다.
• JavaScript 기능: toggleMusic 함수를 통해 배경음악의 재생/정지를 구현하여 사용자와의 상호작용을 높였다.
회고
이 프로젝트를 통해 HTML, CSS, JavaScript 각각의 역할을 명확히 이해할 수 있었다. (진짜? 😮)
Flexbox를 활용해 가로 정렬 레이아웃을 쉽게 구성할 수 있었으며, JavaScript로 간단한 인터랙티브 기능을 추가하여 페이지의 몰입감을 높였다. 아직 사용성을 생각할 실력은 전혀 안되기 때문에, 실습하며 실력을 키워볼 예정이다.
출처: https://namu.wiki/w/%ED%97%A4%EC%96%B4%EC%A7%88%20%EA%B2%B0%EC%8B%AC
'개발하는 디자이너 > 01. 디자이너가 알아두면 좋을 개발 상식' 카테고리의 다른 글
| 프로덕트 디자이너가 알아두면 좋을 개발 상식 08. CSS Animation (0) | 2024.11.20 |
|---|---|
| 프로덕트 디자이너가 알아두면 좋을 개발 상식 07. CSS Grid와 Media Query (2) | 2024.11.19 |
| 프로덕트 디자이너가 알아두면 좋을 개발 상식 05. CSS 기본 개념과 문법 이해하기 (0) | 2024.11.12 |
| 프로덕트 디자이너가 알아두면 좋을 개발 상식 04. Figma에서 UX/UI 디자이너가 개발자와 소통 잘하는 법 (컴포넌트 네이밍) (1) | 2024.11.11 |
| 프로덕트 디자이너가 알아두면 좋을 개발 상식 03. HTML으로 웹페이지 기본 구조 작성해보기 (1) | 2024.11.08 |