웹(Web) 기본 개념 & HTML 태그 정리 | 뱃지 UI 디자인 | UI TIP 정리 | 프로덕트 디자이너 부트캠프 46일차 회고록
product_designer
오늘은 웹을 배우는 첫 시간이었다 !
오늘은 기초개념+정~~~말 기초 실습 부분을 배웠다.
프로덕트 디자이너도 웹을 배워야 하는 이유는 ‼️‼️
디자이너라도 웹의 기본 구조를 이해하면 협업이 훨씬 쉬워지고,
프로젝트를 보는 시야도 넓어지기 때문이다 !!
그럼 고고씽~
🌐 웹(Web)이란?
: 전 세계에 분산된 수많은 문서와 리소스들이 서로 연결된 거대한 정보 네트워크
우리가 브라우저에서 어떤 주소(URL)를 입력하는 순간,
웹 브라우저가 서버로 요청을 보내고,
서버는 해당 페이지와 필요한 데이터를 다시 브라우저에 보내주는 방식으로 작동한다.
웹 구성 요소 기본 정리
- 프론트엔드(Frontend): 사용자가 직접 눈으로 보고 상호작용하는 영역
- 백엔드(Backend): 서버, 로직, 데이터 처리
- 데이터베이스(DB): 실제 데이터가 저장되는 공간
웹을 구성하는 3대 언어
1. HTML (HyperText Markup Language)
웹페이지의 구조를 만드는 뼈대
프로그래밍 언어가 아닌 마크업 언어로, 태그(tag)를 통해 콘텐츠 구조를 설명하는 역할이다.
2. CSS (Cascading Style Sheets)
웹페이지의 디자인과 스타일을 담당
색상, 폰트, 레이아웃, 애니메이션 등 “겉모습”을 만드는 언어
3. JavaScript
웹페이지의 기능과 동작을 담당.
버튼 클릭, 데이터 처리, 애니메이션 등 인터랙션을 만들 수 있다.
💬 강사님 TMI:
면접에서 Java와 JavaScript 차이, HTML은 프로그래밍 언어인가?
같은 개념 질문이 꽤 자주 나온다고 한다..!
기본 개념을 알고 있으면 확실히 면접에서 득점 포인트가 된다 :)
웹 브라우저는 어떻게 동작할까?
- 사용자가 주소(URL)를 입력
- 웹 브라우저가 서버에 해당 페이지를 요청
- 서버는 HTML·CSS·JS와 필요한 데이터를 전달
- 브라우저가 이를 해석해 화면에 렌더링(rendering)
➡️ “클라이언트(Client) — 서버(Server) — 데이터베이스(DB)” 구조로 연결되어 있다.
프로그래밍 언어의종류
C, Python, Java, HTML, PHP, Node.js, React, Swift, C# 등
다양한 언어들이 있다 !
오늘 실습은 VS CODE와 프론트엔드 코딩을 도와주는 플러그인 설치를 하고,
간단한 태그들을 써보는 것을 하였다~
그래서 배운 태그들을 정리해보았다 !_!
HTML 태그 정리
구조 관련 태그 (HTML)
| 태그 | 설명 |
|---|---|
| <html> | HTML 문서 전체를 감싸는 루트 요소 |
| <head> | 문서 정보(메타데이터, CSS, 스크립트 등) |
| <body> | 실제 화면에 보이는 콘텐츠 영역 |
| <header> | 상단 영역 (로고, 메뉴 등) |
| <footer> | 하단 영역 (저작권, 링크 등) |
| <section> | 콘텐츠 구획(큰 단락) |
| <div> | 구조 분할을 위한 기본 블록 요소 |
텍스트 관련 태그
| 태그 | 설명 |
|---|---|
| <h1>~<h6> | 제목 태그 (중요도 1~6) |
| <p> | 문단(Paragraph) |
| <br> | 줄바꿈 태그 |
| <strong> | 강조(굵게) |
| <em> | 강조(기울임) |
링크 & 미디어 태그
| 태그 | 설명 |
|---|---|
| <a href=""> | 하이퍼링크 |
| <img src=""> | 이미지 삽입 |
| <video> | 비디오 삽입 |
| <audio> | 오디오 삽입 |
리스트 & 표 태그
| 태그 | 설명 |
|---|---|
| <ul> | 순서 없는 리스트 |
| <ol> | 순서 있는 리스트 |
| <li> | 리스트 항목 |
| <table> | 표(table) |
| <tr> | 표의 행(Row) |
| <td> | 표의 셀(Cell) |
과제
오늘 과제는 뱃지 디자인과 UI TIP 정리 중 하나를 선택해서 진행하는 것이었다 :)
배지 디자인을 하고 시간이 조금 남아서, UI TIP 정리를 위한 피그마 툴 하나를 제작하였다 ~,~
시간 날 때마다 하나씩 채워봐야겠다 ㅎ_ㅎ
배지(Badge) UI Design
과제목표:
배지는 사용자가 플랫폼에서 활동한 연수, 달성한 업적 등 다양한 기준으로 부여될 수 있습니다.
배지는 재미 요소가 될 수도 있고, 유용한 정보를 제공할 수도 있습니다.
작업 과정
우선 레퍼런스를 찾았다.
오로지 피그마로만 작업 할 것이었기 때문에, 육각형 안에 모양이 들어가 있는 형태로 채택했다.
또 다른 주제의 뱃지보다 하나의 세트처럼 작업하고 싶어서,
통일하기에 편한 랭크 뱃지 스타일을 선택하였다 :>
도형툴 & 이펙트를 사용하여 랭크별 뱃지를 디자인 했다.
레퍼런스의 색감을 참고하였으며, 높아질수록 디자인이 화려하고 복잡해지는 방향으로 디자인했다!
완성!!
간단한 문구를 통해서 꼭 랭크가 아니더라도
목표 50달성, 100달성, 200달성 등의 방법으로도 사용할 수 있겠다고 생각했다 ㅎ_ㅎ
워낙 게임 내의 경쟁 시스템을 좋아하는터라 재미있게 작업할 수 있었다 !
UI TIP 정리
https://www.uidesign.tips/ui-tips
이 사이트의 내용을 스스로 정리하면서 내 것으로 체화하라고 하셨다 :)
그래서 피그마로 이렇게 정리해보려구 한다 !ㅅ!
추가적 설명은 제미나이를 통해 더 공부할 수 있었다 ㅎ_ㅎ
회고
웹 공부가 시작되었다 !
컴공 복전 때 프론트엔드 개발자 또는 웹 디자이너/퍼블리서를 목표로 공부했기 때문에
내가 했던 내용들을 복습할 수 있어서 좋았다.
솔직히 졸업 이후 마케팅~브랜딩으로 다시 취업목표를 잡으며
컴퓨터와 멀어졌는데, 다시금 내 경험과 지식을 활용할 수 있는 목표를 잡게되어
뿌듯한 것 같다 😝
코딩도 디자인도 AI가 다 해주는 시대에도 분명 ‘웹의 기본’은 변하지 않고, 아는 만큼 더 잘 활용할 수 있다고 생각한다. 그렇기 때문에 이런 토대가 잘 잡혀 있을수록 더 효율적으로 협업하고, 더 나은 제품을 만들 수 있을 것이다!
공부 열심히 할거야 >_<
#협업에도 좋고 발전에도 좋은 웹공부 열심히 해보자고
