DAY+17 [ 서비스 디자인 기획 ]

안녕하세요, 주-주스 입니다! 🍹

 

G͜͡o͜͡o͜͡d͜͡(*ˊᵕˋ*)੭ ੈ❤︎
✺!~ 캠프 17일차  ~!✺

꒰ঌ૮ o̴̶̷ ࿁ o̴̶̷ ა໒꒱

 

오늘은!! 

피그마 디자인 시스템디자인 시스템을 알아보고 디자인 시스템의 구성 요소를 직접 설계 하기까지를 포스팅하겠습니다!

 

---

피그마(Figma) 플러그인 추천

디자인 작업 효율을 200% 높여주는 피그마(Figma) 플러그인들 모음

---

이미지 & 아이콘

• Unsplash: 고퀄리티의 무료 이미지를 찾고 계신가요? 이 플러그인을 사용하면 수백만 개의 사진 중에서 원하는 이미지를 바로 찾아 디자인에 삽입할 수 있습니다.
• Iconify: 디자인에 아이콘이 필요할 때마다 검색하는 시간을 확 줄여줍니다. 수천 개의 아이콘을 피그마에서 바로 불러와 사용할 수 있어 정말 편리해요.
• Material design icons: 구글의 머티리얼 디자인(Material Design) 아이콘을 사용하고 싶을 때 유용합니다. 안드로이드 앱이나 구글 서비스와 일관된 디자인을 만들 때 필수적이죠.
• 3Dicons: 평면적인 아이콘에 질렸다면, 3D 아이콘을 제작할 수 있는 이 플러그인을 사용해 보세요. 디자인에 입체감과 생동감을 더할 수 있습니다.

---

더미 데이터 & 콘텐츠

• Content Reel: 실제 콘텐츠가 없어도 걱정 마세요! 더미 텍스트, 아바타, 이미지 등 다양한 더미 데이터를 한 번에 제공해 줍니다. 프로토타입을 만들 때 매우 유용해요.
• Lorem Ipsum: 전통적인 더미 텍스트인 '로렘 입숨(Lorem Ipsum)'을 빠르게 생성해 줍니다. 텍스트가 들어갈 자리를 미리 채워 디자인 레이아웃을 잡는 데 도움을 줍니다.

---

워크플로우 & 생산성

• Design Doc [Spectrall]: 디자인 작업 과정을 체계적으로 문서화하고 싶을 때 사용해 보세요. 프로젝트의 흐름과 결정을 기록하여 팀원들과 효율적으로 소통할 수 있도록 도와줍니다.
• Auto flow: 여러 개의 프레임이나 컴포넌트 간의 연결 흐름을 시각적으로 보여주고 싶을 때 이 플러그인이 빛을 발합니다. 클릭 몇 번으로 멋진 화살표를 만들어 작업 흐름을 명확하게 보여줄 수 있어요.
• Wireframe designer: 와이어프레임(Wireframe)을 빠르고 쉽게 만들고 싶다면 이 플러그인이 최적의 도구입니다. 미리 만들어진 UI 요소들을 활용해 복잡한 와이어프레임도 빠르게 완성할 수 있죠.
• Figma-Map maker: 지도 기반 디자인을 만들 때 구글 맵이나 다른 지도 서비스의 이미지를 가져오는 대신, 이 플러그인을 사용해 보세요. 원하는 위치의 지도를 피그마로 불러와 손쉽게 편집할 수 있습니다.
• html.to.design: 이미 있는 웹사이트의 디자인을 피그마로 가져와서 분석하거나 개선하고 싶을 때 유용합니다. 웹사이트의 HTML을 기반으로 피그마 디자인으로 자동 변환해주는 놀라운 플러그인입니다.

---

웹의 진화: 웹 1.0부터 웹 3.0까지, 디자이너 관점에서 이해하기

01. 웹(Web)이란?

제공해주신 텍스트에 따르면, 웹은 월드 와이드 웹(World Wide Web, WWW)의 줄임말

🌐 거미줄처럼 연결된 정보의 세계

웹은 전 세계에 퍼져 있는 정보를 서로 거미줄처럼 연결합니다.
우리가 웹사이트를 탐색하며 링크를 클릭해 다른 페이지나 사이트로 넘어가는 행위 자체가 이 '거미줄 연결'을 이용하는 것입니다. 🕸️

UI/UX 관점: 디자이너의 역할은 이 복잡한 거미줄 속에서 사용자가 길을 잃지 않고, 원하는 정보에 쉽고 빠르게 도달할 수 있도록 직관적인 내비게이션(Navigation)과 연결 구조를 만드는 것입니다. 사용자가 다음에 무엇을 해야 할지 명확하게 알 수 있도록 길잡이 역할을 하는 것이죠.

👥 정보 교환의 공간

웹은 단순히 정보를 '읽는' 공간을 넘어, 사용자들이 서로 정보를 주고받는 상호작용(Interaction)이 일어나는 공간입니다.

UI/UX 관점: 웹은 정보를 제공하고, 사용자가 정보를 입력하고, 검색하고, 공유하는 모든 상호작용이 일어나는 곳입니다. 디자이너는 사용자가 정보를 효율적으로 입력(예: 깔끔한 폼 디자인), 검색(예: 눈에 띄는 검색창), 그리고 교환(예: 명확한 버튼과 피드백)할 수 있도록 인터페이스(UI)를 설계하고 사용자 여정(UX)을 최적화해야 합니다.

---

02. 웹 1.0: ‘읽기만’ 했던 정적인 웹 (1990년대 ~ 2000년대 초반)

"웹 1.0은 신문이었다"

특징 (UX 변화 포인트)

• 정적인 콘텐츠: 대부분의 웹페이지는 HTML로만 만들어져 있어, 마치 인쇄된 신문처럼 콘텐츠를 읽기만 할 수 있었습니다. 사용자가 댓글을 달거나 정보를 업로드하는 기능은 거의 없음.
• 제한된 상호작용: 사용자는 웹사이트에서 단순히 정보를 소비하는 역할에 머물렀습니다.
• 단방향 정보 흐름: 정보는 웹사이트 운영자에게서 사용자에게로만 흘러갔습니다.

핵심 요약: 웹 1.0에서는 사용자가 콘텐츠를 읽기만 했고, 사용자 경험은 매우 제한적이었습니다.

---

03. 웹 2.0: ‘참여하고 소통하는’ 동적인 웹 (2000년대 중반 ~ 현재)

"웹 1.0이 신문이었다면, 웹 2.0은 커뮤니티와 소셜 미디어 시대예요." 이 시기부터 사용자는 단순히 읽는 것을 넘어 참여하는 주체가 되었습니다.

특징 (UX 변화 포인트)

• 사용자 참여 콘텐츠 (UGC): 유튜브 영상, 블로그 글, 인스타그램 사진처럼 누구나 콘텐츠를 만들고 공유할 수 있게 되었습니다. 사용자가 곧 크리에이터가 된 것이죠.
• 양방향 소통: 웹사이트 운영자와 사용자뿐만 아니라, 사용자끼리도 자유롭게 소통할 수 있게 되었습니다.
• 동적인 인터페이스: AJAX, JavaScript 같은 기술 덕분에 페이지를 새로고침하지 않고도 실시간으로 댓글을 달거나 채팅을 할 수 있게 되었습니다.
• 플랫폼의 등장: 페이스북, 유튜브, 트위터와 같은 거대한 플랫폼들이 등장하여 사용자와 함께 성장했습니다.

핵심 요약: 웹 2.0에서는 사용자가 단순 소비자(Reader)에서 참여자(Participant)로 변했습니다. 디자이너에게 가장 중요한 것은 사용자가 얼마나 쉽고 재미있게 참여하고 소통할 수 있느냐입니다.

---

04. 웹 3.0: ‘소유하는’ 분산형 웹 (2020년대 ~ 미래)

"웹 1.0이 읽는 웹, 웹 2.0이 참여하는 웹이라면, 웹 3.0은 ‘소유하는 웹’이에요." 이 시기는 분산화(Decentralization)와 개인 데이터 주권이 핵심 키워드입니다.

특징 (UX 변화 포인트)

• 데이터의 소유권: 블록체인 기술 덕분에 사용자가 올린 데이터가 중앙 서버에 저장되는 것이 아니라, 개인에게 소유권이 돌아가게 됩니다.
• 개방적이고 투명한 시스템: 모든 거래와 데이터가 공개된 블록체인에 기록되어, 투명성과 신뢰를 바탕으로 서비스가 운영됩니다.
• 탈중앙화 앱 (DApp): 중앙 서버 없이 운영되는 새로운 형태의 서비스들이 등장합니다.
• 디지털 자산의 등장: NFT, DeFi(탈중앙화 금융) 등 디지털 자산을 기반으로 한 새로운 경제 활동이 가능해집니다.

핵심 요약: 웹 3.0에서는 사용자가 이제 단순한 참여자가 아니라, 자신의 데이터와 자산을 직접 소유하고 관리하는 주체가 됩니다. 디자이너는 투명성, 신뢰, 그리고 사용자 주도권을 보장하는 새로운 형태의 인터페이스를 설계해야 합니다.

---

웹의 진화: 사용자 권한의 진화 📈

이처럼 웹의 역사는 기술의 발전과 함께 사용자의 권한이 점점 커지는 과정이었습니다.

• 웹 1.0: 사용자는 읽기만 했습니다.
• 웹 2.0: 사용자는 참여하고 소통했습니다.
• 웹 3.0: 사용자는 자신의 데이터와 자산을 소유하게 됩니다.

 

---

웹사이트 내비게이션 용어 정리 (GNB, LNB, SNB, FNB) ✨

---

1. GNB (Global Navigation Bar) 🗺️

GNB는 Global Navigation Bar의 약자입니다. 말 그대로 '전 세계적인 내비게이션 바'라는 뜻으로,
웹사이트의 가장 상단(헤더)에 위치하는 핵심 메뉴를 의미합니다.

• 역할: 사용자가 사이트 어디에 있든 서비스 전체의 구조를 한눈에 파악하고,
  주요 기능으로 바로 이동할 수 있도록 돕는 '전역 길잡이' 역할을 합니다.
• 특징:
  • 항상 동일하게 노출됩니다. 특정 페이지에만 국한되지 않고, 사이트의 모든 페이지에서 같은 위치에 같은 구성으로 나타납니다.
  • 보통 로고(홈으로 이동), 주요 카테고리 메뉴, 검색창, 로그인/마이페이지 같은 사용자 관련 기능이 포함됩니다.
  • 반응형 웹에서는 PC에서 전체 메뉴가 보이다가, 모바일에서는 흔히 '햄버거 메뉴(☰)' 안에 숨겨지는 형태로 최적화됩니다.
• 예시: 네이버나 구글처럼 어느 페이지로 이동하든 항상 상단에 보이는 메뉴가 바로 GNB입니다.

---

2. LNB (Local Navigation Bar) 📍

LNB는 Local Navigation Bar의 약자입니다. '지역적인 내비게이션 바'라는 뜻으로, GNB를 통해 진입한 특정 섹션이나 카테고리 안에서 사용자를 안내하는 메뉴입니다.

• 역할: GNB가 큰 길을 알려준다면, LNB는 그 길 안에서 갈 수 있는 세부적인 길을 보여줍니다. 현재 사용자가 어떤 영역에 있는지 명확히 알려주는 역할을 합니다.
• 특징:
  • 주로 GNB 바로 아래나, 웹페이지의 좌측 사이드바에 배치되는 경우가 많습니다.
  • 예를 들어, 쇼핑몰에서 '여성의류' 카테고리(GNB)를 클릭했을 때 나타나는 '원피스 / 블라우스 / 아우터' 같은 세부 메뉴가 LNB에 해당합니다.
• 예시: 대학 사이트에서 '입학 안내'(GNB)를 클릭하면, 그 아래에 '학부 입학 / 대학원 입학'과 같은 세부 메뉴들이 LNB로 나타납니다.

---

3. SNB (Side Navigation Bar) ➡️

SNB는 Side Navigation Bar의 약자입니다. 이름 그대로 '측면'에 위치하는 내비게이션 메뉴를 뜻합니다.
주로 웹사이트의 왼쪽이나 오른쪽에 세로형으로 배치됩니다.

• 역할: 현재 보고 있는 페이지나 섹션 안에서 좀 더 구체적인 하위 메뉴나 관련 페이지로 쉽게 이동할 수 있도록 돕습니다.
• 특징:
  • SNB는 LNB의 한 형태라고 볼 수 있습니다. 즉, 세부 메뉴(LNB)가 화면의 측면에 세로로 배치된 것을 SNB라고 부릅니다.
  • 특히 콘텐츠가 많거나 복잡한 사이트에서 효율적으로 정보를 구조화하는 데 사용됩니다.
• 예시: 포털 사이트에서 뉴스 페이지에 들어갔을 때 왼쪽에 '정치 / 경제 / 사회 / 국제' 등의 메뉴가 세로로 나열된 경우가 대표적인 SNB입니다.

---

4. FNB (Footer Navigation Bar) ⬇️

FNB는 Footer Navigation Bar의 약자입니다. '푸터(Footer)'라는 이름처럼 화면의 가장 아래(하단)에 위치하는 메뉴를 의미합니다.

• 역할: 사용자가 페이지를 끝까지 스크롤했을 때 만나는 '마지막 길잡이' 역할을 합니다. GNB에서는 제공하기 어려운 보조적인 메뉴나 필수 정보를 제공합니다.
• 특징:
  • 보조 내비게이션 역할: 회사 소개, 고객센터, 이용약관, 개인정보 처리방침 등 주요 메뉴에 포함되지 않는 링크들을 모아둡니다.
  • 신뢰성 제공: 회사의 사업자 정보, 연락처, 주소 등을 명시하여 서비스에 대한 신뢰를 높입니다.
  • 저작권 및 법적 고지: Copyright, 서비스 약관 등 법적 정보를 포함합니다.
• 예시: 모든 웹사이트의 맨 아래에 있는 '개인정보 처리방침 / 이용약관 / 광고 및 제휴문의' 같은 메뉴들이 모두 FNB입니다.

---

웹사이트의 뼈대: 헤더, 푸터, 브래드크럼 해부하기 🧐

---

1. 웹사이트의 얼굴, 헤더 (Header) 🧑‍💻

헤더는 웹페이지의 가장 위쪽에 위치하며, 방문자에게 웹사이트의 첫인상을 결정짓는 중요한 역할을 합니다.

• 주요 기능: 웹사이트의 로고, 핵심 메뉴, 검색 기능 등 사용자가 가장 필요로 하는 기능들을 모아놓습니다. 사용자가 어디에 있든 항상 접근할 수 있도록 보통 페이지 상단에 고정되어 있는 경우가 많아요.
• 구성 요소:
  • 로고: 웹사이트의 브랜드 아이덴티티를 나타내며, 클릭하면 보통 메인 페이지로 이동합니다.
  • 메인 메뉴 (GNB): 웹사이트의 핵심 기능이나 주요 카테고리로 이동하는 링크들이 모여 있습니다.
  • 검색창: 사용자가 원하는 정보를 빠르게 찾을 수 있도록 돕습니다.
  • 사용자 메뉴: 로그인, 회원가입, 내 프로필 등 사용자와 관련된 기능들을 담습니다.
  • 알림/아이콘: 중요한 알림이나 장바구니 등 추가적인 정보를 표시합니다.
• 핵심 UX 포인트:
  • 스크롤을 내려도 항상 보이는 고정형 헤더(Fixed Header)를 사용하면 사용자 편의성을 높일 수 있습니다.
  • 메뉴는 너무 복잡하지 않게 간결하고 직관적으로 구성하는 것이 좋습니다.
  • 모바일 환경에서는 화면 공간이 한정적이므로, 여러 메뉴를 햄버거 메뉴 아이콘 하나로 압축하여 보여줍니다.

헤더는 사용자가 길을 잃지 않도록 돕는 나침반 같은 존재라고 할 수 있습니다.

---

2. 페이지의 마지막 도착지, 푸터 (Footer) 📜

푸터는 웹페이지의 가장 아래에 위치합니다. 사용자가 페이지의 콘텐츠를 모두 읽고 난 후, 추가적인 정보나 보조적인 링크를 찾을 때 주로 이용하는 영역이죠.

• 주요 기능: 회사 정보, 법적 고지, 고객센터 등 신뢰성과 관련된 정보들을 제공합니다.
• 구성 요소:
  • 회사 정보: 회사명, 주소, 연락처 등 기본적인 정보가 포함됩니다.
  • 법적 고지: 이용 약관, 개인정보 처리방침 등 법률적으로 필수적인 정보들을 명시합니다.
  • 소셜 미디어 링크: 페이스북, 인스타그램 등 브랜드의 소셜 채널로 연결하는 아이콘이 배치됩니다.
  • 사이트맵: 웹사이트의 전체 메뉴 구조를 한눈에 보여주는 링크를 제공하기도 합니다.
• 핵심 UX 포인트:
  • 헤더와 달리 사용자가 스크롤을 끝까지 내려야 보이기 때문에, 너무 중요한 정보를 푸터에만 배치하는 것은 피해야 합니다.
  • 정보는 관련성 있는 그룹으로 카테고리화해서 깔끔하게 정리하는 것이 중요합니다.

푸터는 사용자와의 신뢰를 구축하고, 웹사이트의 투명성을 높이는 역할을 합니다.

---

3. 현재 위치를 알려주는 빵 부스러기, 브래드크럼 (Breadcrumb) 🥖

브래드크럼은 '헨젤과 그레텔'에서 유래한 용어로, 사용자가 웹사이트 내에서 현재 어떤 경로를 거쳐 이 페이지에 도달했는지 시각적으로 보여주는 내비게이션 요소입니다. 주로 상품 카테고리처럼 여러 단계로 이루어진 웹사이트에서 유용하게 사용됩니다.

• 주요 기능: 사용자가 현재 위치를 명확하게 파악하고, 이전 단계의 페이지로 쉽게 돌아갈 수 있도록 돕습니다.
• 구성 요소: 일반적으로 홈 > 카테고리 > 서브카테고리 > 현재 페이지와 같은 형식으로 나타나며, '홈'을 제외한 모든 단계는 클릭 가능한 링크입니다.
• 핵심 UX 포인트:
  • 복잡한 사이트 구조에서 사용자가 길을 잃지 않도록 도와주는 중요한 역할을 합니다.
  • 브래드크럼의 각 단계는 클릭 가능한 링크여야 사용자가 편리하게 이동할 수 있습니다.
  • 모바일 환경에서는 화면 공간을 적게 차지하도록 간략하게 표시합니다.

브래드크럼은 마치 웹사이트 안의 '미니 지도'처럼 사용자의 탐색 경험을 크게 개선해 줍니다.

---

🚀 디지털 제품 개발, A to Z: UI/UX 디자이너의 역할 🛠️

디지털 제품이 세상에 나오기까지는 수많은 단계를 거칩니다. UI/UX 디자이너는 단순히 예쁜 화면을 만드는 사람이 아니라, 이 전체 과정에 깊숙이 관여하는 문제 해결사입니다. 제품 개발 라이프사이클을 기획, 디자인, 개발 세 단계로 나누어 디자이너의 역할을 정리해 봤습니다.

1. 🟡 기획 단계 (Planning)

이 단계는 '무엇을 만들 것인가?'에 대한 질문에 답하는 과정입니다.

• 디자이너의 역할: 단순히 '무엇'을 만들지 정하는 것을 넘어, '왜' 만들어야 하는지를 사용자 관점에서 명확히 합니다.
• 핵심 활동:
  • 사용자 리서치: 사용자 인터뷰, 시장 조사 등을 통해 사용자의 진짜 문제점(Pain Point)을 발견합니다.
  • 전략 수립: 발견한 문제를 어떻게 해결할지, 제품의 목표와 타겟 고객을 설정합니다.
• 주요 산출물: 페르소나, 사용자 여정 지도(Customer Journey Map), 핵심 기능 정의서 등이 이 단계에서 만들어집니다.

2. 🔵 디자인 단계 (Design)

이제 '어떻게 만들 것인가?'를 시각적으로 구체화하는 단계입니다. 디자이너의 메인 업무가 가장 많이 집중됩니다.

• 와이어프레임 (Wireframe): 제품의 뼈대를 잡는 단계입니다. 기능 요소들이 어디에 배치될지, 정보가 어떻게 흐를지 설계합니다. 아직 색이나 이미지는 입히지 않은 '로우파이(Low-fidelity)' 스케치라고 생각하면 돼요. UX(사용자 경험)가 가장 중요한 단계입니다.
• GUI 디자인 (Graphic User Interface): 뼈대 위에 색상, 폰트, 이미지 등 시각적인 요소를 더합니다. 브랜드 아이덴티티와 심미성을 부여하며, UI(사용자 인터페이스)를 완성합니다.
• 프로토타이핑: 디자인 결과물에 상호작용을 더해 실제 제품처럼 작동하게 만듭니다. 이를 통해 디자인의 사용성을 검증하고 개선합니다.
• 가이드라인 제작: 개발팀과의 원활한 협업을 위해 디자인 시스템이나 스타일 가이드를 만듭니다.

3. 🔴 개발 단계 (Development)

디자인 결과물을 실제 작동하는 코드로 구현하는 단계입니다. 디자이너는 이 단계에서도 중요한 역할을 합니다.

• 프론트엔드/백엔드:
  • 프론트엔드: 디자이너의 GUI를 기반으로 사용자가 직접 보는 화면을 코드로 구현합니다. (HTML, CSS, JavaScript)
  • 백엔드: 데이터 처리, 서버 관리 등 눈에 보이지 않는 영역을 구축합니다.
• 디자이너의 역할: 완성된 결과물이 디자인 의도대로 구현되었는지 확인하고, 미세한 오류(버그)를 찾아내는 디자인 QA(Quality Assurance)를 진행합니다. 픽셀 하나하나까지 꼼꼼하게 검토하는 게 중요! 🧐
• 테스트 및 출시: 최종 테스트를 거쳐 모든 것이 완벽하다고 판단되면, 드디어 제품을 세상에 내놓습니다.

---

👩‍💻 웹을 만드는 사람들: 개발자 로드맵

개발팀은 크게 프론트엔드, 백엔드, 그리고 데브옵스로 나뉩니다.

---

1. 프론트엔드 (Frontend) 개발자: 사용자와 가장 가까운 파트너

프론트엔드 개발자는 사용자가 직접 눈으로 보고 상호작용하는 부분을 담당해요. 디자이너가 만든 GUI (Graphic User Interface)를 코드로 변환하고, 웹사이트의 움직임과 반응성을 구현하죠. 이들은 디자이너의 가장 긴밀한 협업 파트너라고 할 수 있습니다.

• 역할: 사용자가 보는 화면과 사용자 경험(UX)을 직접 구현해요. HTML, CSS, JavaScript를 사용해 디자인 의도를 현실로 만들고, 웹사이트의 반응성(Responsive)과 애니메이션(Interaction)을 담당합니다.
• 디자이너와의 관계: 디자이너가 만든 와이어프레임과 UI 시안을 기반으로 실제 작동하는 웹페이지를 만듭니다. 디자인 시스템을 구축해 재사용 가능한 컴포넌트 기반으로 협업하면 효율을 극대화할 수 있습니다.
• 핵심 역량:
  • HTML/CSS/JavaScript: 프론트엔드의 기본 언어입니다.
  • 프레임워크/라이브러리: React, Vue, Angular 등을 활용해 복잡한 인터페이스를 효율적으로 구축합니다.

---

2. 백엔드 (Backend) 개발자: 서비스의 두뇌이자 심장

백엔드 개발자는 사용자 눈에 보이지 않는 곳에서 일해요. 데이터를 처리하고 저장하며, 서버와 데이터베이스를 관리하는 역할을 합니다. 백엔드 팀이 튼튼해야 서비스가 안정적으로 작동할 수 있죠.

• 역할: 사용자가 입력한 정보를 안전하게 저장하고, 필요한 데이터를 프론트엔드에 빠르게 전달하는 구조를 설계해요. 서비스의 로직과 데이터베이스를 관리하며, 기능이 원활하게 작동하도록 합니다.
• 디자이너와의 관계: 사용자의 정보가 어떻게 처리되고, 어떤 데이터가 오가는지 백엔드 개발자와 논의해야 해요. 데이터 구조를 이해하면 사용자 흐름을 더 현실적으로 설계할 수 있습니다.
• 핵심 역량:
  • 프로그래밍 언어: Python, Java, Node.js, PHP 등 다양한 언어를 사용합니다.
  • 데이터베이스: MySQL, MongoDB 등 데이터를 효율적으로 관리하는 기술이 필수입니다.
  • API (Application Programming Interface): 프론트엔드와 백엔드가 원활하게 소통하는 '연결 통로'를 설계합니다.

---

3. 데브옵스 (DevOps): 안정적인 서비스의 수호자

데브옵스는 개발(Development)과 운영(Operations)을 결합한 영역이에요. 개발된 코드를 안정적이고 빠르게 배포하고, 서버를 관리하며, 서비스의 신뢰성과 효율성을 높이는 전문가입니다.

• 역할: '지속적인 통합 및 배포(CI/CD)' 파이프라인을 구축해 코드를 자동으로 테스트하고 배포합니다. 서버와 네트워크 같은 인프라를 안정적으로 관리하고, 서비스 성능을 실시간으로 모니터링합니다.
• 디자이너와의 관계: 직접적인 디자인 협업은 적지만, 데브옵스 팀이 구축하는 안정적인 환경 덕분에 디자이너의 결과물이 사용자에게 끊김 없이 제공될 수 있어요. 빠른 배포는 사용자 피드백을 즉시 반영하는 애자일 디자인 프로세스의 속도를 높여줍니다.

---

🛠️ 모든 개발자가 갖춰야 할 기본 역량

프론트엔드, 백엔드를 막론하고 모든 개발자가 갖춰야 할 기본 기술들이 있어요. 디자이너도 이 용어들을 알아두면 협업이 훨씬 수월해집니다.

• Git: 코드의 버전 관리 시스템입니다. 디자인 파일 버전 관리와도 일맥상통하니, 이 개념을 이해하면 개발자와 더 잘 소통할 수 있어요.
• HTTP/HTTPS & API: 웹에서 정보를 주고받는 기본 통신 규약(HTTP)과 서비스 간 데이터 요청 및 응답 방식(API)입니다.
• 디자인 패턴: 코드를 효율적으로 작성하는 설계 템플릿입니다. 디자이너가 재사용 가능한 컴포넌트를 설계하는 것과 비슷한 개념입니다.

---

👩‍💻 프론트엔드 개발 로드맵 분석 (디자이너 관점)

프론트엔드 개발자들의 로드맵을 이해하면, 디자이너는 '개발하기 쉬운 디자인'을 만들 수 있어요. 이는 곧 '빠르게 출시되는 제품'을 의미하며, UX를 사용자에게 신속하게 전달하는 지름길입니다!

1. 🌐 인터넷 기본 지식: 디자인이 화면에 나타나는 원리

디자이너가 만든 디자인 파일이 어떻게 사용자의 브라우저에 나타나는지 이해하는 기초 지식이에요.

• HTTP/HTTPS: 데이터 통신 규약입니다. 보안이 중요한 사이트라면 SSL 인증서를 고려하는 등 디자인 단계부터 보안을 염두에 두어야 합니다.
• 브라우저 작동 원리: 브라우저가 HTML, CSS, JavaScript를 읽어 화면에 렌더링(Rendering)하는 과정을 알아두면, 왜 특정 브라우저에서 디자인이 다르게 보이는지 이해하는 데 도움이 됩니다.
• 도메인, 호스팅, DNS: 웹 주소(도메인)와 서버 공간(호스팅)의 개념을 알아야 개발자의 요청이나 이슈를 쉽게 이해할 수 있어요.

2. 🧱 HTML: 웹 콘텐츠의 뼈대

HTML은 웹페이지의 내용과 구조를 담당하는 언어입니다. 디자이너의 디자인을 '의미'있게 만드는 뼈대 역할을 해요.

• 시맨틱(Semantic) HTML: <header>, <nav>, <main> 등 의미를 가진 태그를 사용해 웹의 구조를 명확히 하는 것입니다. UX/접근성 관점에서 매우 중요해요. 스크린 리더나 검색 엔진이 웹페이지를 올바르게 인식하도록 도와주기 때문입니다. 와이어프레임 단계에서부터 시맨틱 구조를 고려하면 좋아요.
• 폼과 입력 검증: 사용자가 정보를 입력하는 영역을 설계할 때, 쉽게 오류를 인지하고 수정할 수 있도록 디자인해야 합니다.

3. 🎨 CSS: 웹 콘텐츠의 스타일

CSS는 HTML 뼈대에 색상, 레이아웃, 폰트 등 스타일을 입히는 언어입니다. 디자이너의 UI를 시각적으로 구현하는 핵심이에요.

• 레이아웃 만들기: flexbox, CSS Grid를 사용해 복잡한 화면을 구성합니다. 디자이너는 그리드 시스템을 이해하고, 개발자가 반응형 레이아웃을 쉽게 만들도록 디자인 파일을 정리해야 합니다.
• 반응형 디자인과 미디어 쿼리: 다양한 화면 크기에 맞춰 레이아웃이 유연하게 변하도록 하는 기술입니다. 모바일 우선(Mobile First) 원칙을 염두에 두고 디자인하는 것이 중요합니다.

4. ✨ JavaScript: 웹 콘텐츠의 상호작용

JavaScript는 웹을 움직이게 만드는 언어예요. 사용자의 클릭에 반응하거나, 데이터가 실시간으로 업데이트되는 등 동적인 UX를 구현하는 역할을 담당합니다.

• DOM 조작 원리: JavaScript는 HTML 문서를 트리 형태로 구조화한 DOM(Document Object Model)을 조작해 페이지의 내용을 동적으로 바꾸고 애니메이션을 만듭니다.

---

💾 백엔드 개발 로드맵 분석 (디자이너 관점)

백엔드 지식을 이해하는 것은 단순히 예쁜 화면을 만드는 것을 넘어, 실제로 작동하고 확장 가능한 서비스를 설계하는 데 도움이 됩니다. 백엔드는 서비스의 안정성과 확장성을 책임지는 핵심이에요.

1. 🌐 인터넷 기본 지식: 데이터 전송의 구조

프론트엔드와 공유하는 기본 지식입니다. 디자이너는 데이터가 서버와 사용자 사이를 어떻게 오가는지 이해하는 것이 중요해요.

• API 설계: 프론트엔드와 백엔드가 원활하게 소통할 수 있도록 데이터 요청 및 응답 방식을 정의합니다. API 설계가 명확해야 프론트엔드에서 오류 없이 데이터를 받아 사용자에게 보여줄 수 있습니다.

2. 🖥️ OS에 대한 전반적인 지식: 서버 운영의 이해

백엔드 개발은 서버 컴퓨터 위에서 프로그램을 만드는 일이에요. 이 영역을 이해하면 성능과 확장성을 고려한 디자인을 할 수 있습니다.

• UX 관점: 백엔드 성능이 곧 서비스의 속도를 결정합니다. 복잡하고 무거운 기능이 서버에 과부하를 줄 수 있음을 이해하고, 로딩 속도를 최소화하는 효율적인 기능 설계를 목표로 해야 합니다.

3. 🚀 핵심 백엔드 기술 및 언어

데이터를 처리하고 저장하는 로직을 구현하는 능력은 백엔드의 핵심입니다.

• 데이터 구조 및 알고리즘: 데이터를 효율적으로 처리하는 방법을 배우는 영역입니다.
• 프로그래밍 언어: Go나 Rust 같은 언어는 빠른 속도와 높은 안정성 때문에 대규모 시스템에서 선호됩니다. 디자이너는 특정 기능이 기술적으로 구현하기 어렵거나 시간이 오래 걸릴 수 있음을 인지하고, 개발 일정과 리소스를 고려해 기능 우선순위를 정할 때 도움을 받을 수 있습니다.

---

03 웹 종류 (Web Types)

웹 디자인을 시작하기 전에 어떤 '웹'을 만들게 될지 알아보겠습니다. 크게 PC 웹, 모바일 웹, 반응형 웹 세 가지로 나눌 수 있어요.

1. PC 웹 (PC web)

가장 익숙한 형태의 웹입니다. PC나 노트북 환경에 최적화되어 있어요. 주로 1024px 이상의 해상도를 기준으로 디자인하며, 넓은 화면을 시원하게 활용할 수 있다는 특징이 있습니다.

2. 모바일 웹 (Mobile web)

스마트폰이나 태블릿 같은 모바일 기기 웹 브라우저에 최적화된 웹입니다. PC 웹과 소스나 호스트 네임이 다를 수 있다는 점이 특징이에요. 예를 들어, www.naver.com과 m.naver.com처럼 별도의 주소를 사용하는 경우가 많습니다.

3. 반응형 웹 (Responsive web) 📱💻

최근 가장 중요한 디자인 트렌드입니다. PC 웹과 모바일 웹의 장점을 결합한 형태로, 하나의 소스로 웹사이트를 구축해요. 사용자가 접속한 기기의 해상도와 화면 크기에 '반응(Responsive)'하여 레이아웃, 이미지, 폰트 등이 자동으로 최적화되는 방식입니다. 하나의 URL로 모든 기기에 대응하기 때문에 관리와 유지보수가 쉽고, 검색 엔진 최적화(SEO)에도 유리하다는 장점이 있어요. 앞으로 UX/UI 디자이너로서 가장 많이 접하게 될 웹 유형입니다.

---

오늘의 실습 !

⭐️ 수업시간에 학습한 앱 페이지 다시 복습하여 제작 (property)

스타벅스 property 설정 및 화면 클론제작

 

올리브영 버튼들 property 설정

 

 

⭐️ 신용카드 결제 페이지를 디자인 하세요.

• 신용카드 결제 폼(또는 페이지)을 디자인하세요. 카드 번호, 유효기간, 보안 코드 등 중요한 요소들을 잊지 말고 포함해야 합니다.
• wwit, ui bowl, mobbin, pinterest, behance, dribbble 등 레퍼런스 사이트 참고하여 제작

 

⭐️ 계산요소의 인터페이스를 디자인 하세요.

• 일반 계산기일 수도 있고,
• 공학용 계산기일 수도 있으며,
• 주택담보대출(mortgage)이나 자동차 할부(auto loan)와 같은 특수 계산기일 수도 있습니다.
• 또는 신용 점수 예측 계산기처럼 미래를 예측하는 계산기일 수도 있습니다.
• wwit, ui bowl, mobbin, pinterest, behance, dribbble 등 레퍼런스 사이트 참고하여 제작

---

 

[ 17일차 소감 🤗]

컴포넌트와 인스턴스에서 더 나아가, 베리언트까지 배울 수 있었습니다!

 

덕분에 원래 과제 시간을 조금 남기고 작업을 완료할 수 있었는데 오늘은 그보다 더 많은 시간 앞에서 끝냈습니다!! 확실히 이런 기능들을 하나씩 알게 되니 속도가 올라가서 매우매우매우 신나고 재밌엇습니다!! 그리고 생각했던 것보다 더 쉽다고 느껴져서 할만했던 것만 같습니다 ㅎㅎ 다른 분들의 과제도 확인하며 어떤 식으로 디자인하면 더 좋은지 알게 되었고 강사님의 피드백 덕분에 더 넓게 디자인을 배웠답니닷!
오늘 밤에는 UIXLAB 스터디를 진행하는데 또 설레는 마음이 가득하네용 ㅎㅎ 오늘 밤, 내일 또 다시 파이팅을 외쳐보겠습니다~~! 으쌰으쌰 파이팅~~~!!

 

= 오늘의 한 마디 =
- 무슨일이든 감당할 수 있다!!