웹(Web)이란?

World Wide Web: 인터넷에 연결된 사용자들이 서로의 정보를 주고받을 수 있는 공간

웹의 세 가지 발전 단계

웹 1.0 : 정보 제공 중심

정적(Static) HTML 페이지로 구성
사용자가 콘텐츠를 읽기만 가능
정보 흐름이 일방향적

웹 2.0 : 참여와 소통 중심

사용자들이 직접 콘텐츠를 생산하고 공유
블로그, SNS, 유튜브 등 양방향 소통이 핵심
동적(Dynamic) 콘텐츠와 상호작용 강화

웹 3.0 : 분산화와 개인 중심

블록체인 기반 데이터 분산화, 탈중앙화
AI와 머신러닝을 활용한 의미 기반 웹(Semantic Web)
사용자의 데이터 주권 강조

---

웹 기초 용어

GNB (Global Navigation Bar)

웹사이트 전체에 공통적으로 보이는 네비게이션 바
보통 최상단에 위치 (홈, 서비스, 문의 등)

LNB (Local Navigation Bar)

GNB의 메뉴 클릭/호버 시 노출되는 하위 메뉴
특정 영역이나 서비스 안에서만 사용되는 내비게이션

SNB (Side Navigation Bar)

화면의 좌/우측 사이드에 위치한 메뉴
필터, 카테고리, 대시보드 메뉴 등

FNB (Foot Navigation Bar)

사이트 하단(푸터)에 공통으로 들어가는 메뉴
기업 정보, 사이트 이용약관, 개인정보 처리방침 등

---

웹의 기본 구성

헤더(Header) → 로고, 검색창, GNB 등 위치

메인 콘텐츠(Body) → 페이지의 핵심 콘텐츠 영역

브레드크럼(Breadcrumb) → 현재 사용자가 웹 내에서 어디에 있는지 알려줌 (예: 홈 > 서비스 > 상세)

푸터(Footer) → FNB, 기업정보, 저작권 정보 등

---

웹 제작 과정

기획 → 목적 정의, 정보 구조 설계(IA), 유저 시나리오 작성
디자인 → 와이어프레임, UI 컴포넌트, 프로토타입 제작

개발

• 프론트엔드 (화면/UI 개발)
• 백엔드 (서버, DB 개발)
• 데브옵스 (개발/배포 환경 자동화)

---

느낀 점
컴공에서 배웠던 html css 부분이 나와서 반가웠다!
프로덕트 디자이너는 기획부터 디자인까지 제품 설계 전반에 관여하기 때문에, 웹의 구조를 이해하는 것이 중요할 것 같다. 또한 커뮤니케이션 할 때에도 유용할 것이다. 웹이라는 하나의 제품에 대해서 잘 이해하고 있어야겠다. 👍

---

컴포넌트 관련 추가 학습

피그마 실습을 통해서 컴포넌트 관련 기능들을 추가로 공부했다.

Variant 기능

컴포넌트의 다양한 상태(기본, 활성, 비활성 등)를 하나의 세트로 관리할 수 있음
버튼, 토글, 입력창 등 변형 관리에 유용

클릭 된 상태, 바코드 on/off 등 여러 기능을 템플릿화 할 수 있었다.

Position - Ignore Auto Layout

Auto Layout 규칙을 적용하지 않고, 특정 요소의 위치를 수동으로 배치 가능
배너나 강조 요소 배치 시 활용

바코드를 제품 사진 위에 올려둘 수 있었다.!

아이콘 교체 - Swap Instance

인스턴스 안에서 아이콘을 클릭 → 오른쪽 패널에서 Swap instance 기능 사용
동일한 컴포넌트 세트(예: 아이콘 라이브러리) 내에서 다른 아이콘으로 교체 가능

기본 아이콘 on/off, 아이콘을 카카오 및 애플로 변경해보았다.
아주아주 편리한 기능..~~~이라고 생각되었다!!

과제

1. 신용카드 결제 페이지 디자인

해당 레퍼런스를 보고, input/설명/button으로 폼들을 나누어 주었다.

각각의 버튼에 hover/focus/completed 상태를 베리에이션 해주었다.

완성작, 카드 넘버는 입력이 완료된 상태이고, 현재 유효기간 날짜를 입력 중인 창이다.

---

2. 계산기 인터페이스 디자인

레퍼런스를 찾고, 숫자버튼, 계산자버튼, 수정버튼으로 나누어주었다.
그리고 클릭 시 효과를 베리에이션 하였다.(불투명도와 외부광선)

9 클릭 화면과 + 클릭 화면이다.

느낀 점
결제창 디자인은 기능별로 구역별로 잘 나누어서, 배치하는데에 큰 어려움이 없었다! 처음 컴포넌트를 설정할 때 시간이 조금 들었지만, 오히려 같은 인스턴트가 반복되기 때문에 완성까지는 더 수월하게 작업할 수 있었다. 배운 기능을 아주 유용하게 사용한 것 같다 ㅎㅎ

그러나 계산기 클론 떄 각 버튼끼리 1차 스마트 레이아웃, 전체 버튼 2차 스마트 레이아웃을 걸었는데 레이아웃이 망가지는 문제가 발생했다. 또 만들고 나니 클릭 시 효과가 크게 구분되지 않는 점을 발견할 수 있었다. 개선의 필요를 느꼈고, 간단해 보였던 부분이 꽤나 어려웠다.. 🥹

회고

“웹”은 단순히 화면이 아니라, 정보 전달 방식의 패러다임이 계속 바뀌어 왔고, 그에 따라 UI/UX도 함께 바뀌어왔다는걸 알게 되었다. 또, GNB/LNB/SNB/FNB처럼 디자인과 개발에서 공통적으로 쓰이는 용어들을 이해하니, 실제 프로젝트 협업에서 훨씬 수월할 것 같다는 생각이 들었다.

배운 베리에이션 기능도 굉장히 유용할 것 같다고 느꼈다. 어려움을 겪었던 부분은 스마트 레이아웃 부분이라서, 계속 연습해보면서 원리를 이해해야겠다. 웹 공부할 때도 div가 난리가 나서 어려웠는데, 또 시작이라니...~~~ 여러모로 프로덕트 디자인과 개발은 정말 비슷한 것 같다! 어려운 점 마저도! 그치만 그런 점이 오히려 좋다 ㅎㅎ 🤣

#컴포넌트넌혁신이야