📅 2026.04.29(수) - 13일차
백엔드와 데이터베이스, UX 연결 ➔ 서비스 신뢰를 구축하는 데이터 설계
- 웹 서비스의 두뇌와 근육을 설계하는 백엔드 개발의 핵심 원리와 DB의 세계. 보이지 않는 곳에서 작동하는 복잡한 질서.
- 백엔드는 신뢰를 만드는 과정. 화면 뒤에서 데이터가 안전하게 흐르고 복잡한 계산이 오류 없이 처리될 때 완벽한 UX 완성.
- '사용자를 멈추지 않도록!' 이 원칙이 데이터 기반 기획과 디자인의 핵심.
http://localhost:5174/portfolio
1. 웹 서비스의 기초: 프론트엔드와 백엔드
웹 서비스의 구조를 식당 운영에 비유. → frontend-backend를 회전 스시로 비유해본다면, 당일날 상황을 봐가면서 (날씨, 그날 오는 사람들의 분위기, 나이대) 어떤 메뉴를 추가할 지를 계속 고민해서 반영해야함!
- Frontend:
- 사용자가 보고 만지는 영역. (손님 영역: 메뉴판 확인, 주문, 미각적 경험 전달.)
- 기술: HTML, CSS, JavaScript
- Backend: 백엔드는 신뢰를 만드는 과정
- 서비스의 핵심 로직이 작동하는 보이지 않는 곳. (주방 영역: 주문을 받아 요리하고 식재료(데이터)를 관리)
- 기술: Node.js, Python, Java, DB
- 백엔드의 3대 구성 요소:
- Web Server: 요청을 듣고 응답하는 컴퓨터 프로그램.
- Web Application Server: 비즈니스 로직(규칙)을 계산하고 실행.
- Database: 정보를 안전하게 저장하고 관리.
- 프론트엔드와 백엔드 사이의 약속이자 점원 역할.
- 구조: Frontend ↔ API ↔ Backend
- 작동 방식:
- Request: "ID가 1인 유저 정보를 줘"
- Response: "여기 이름은 Kim, 이메일은..."
[실습] 내 포폴 페이지에 로그인 기능 넣고, 로그인 했을 때는 수정 권한 부여 / 일반 방문자는 읽기 권한만 부여하도록 수정해보기
: figma make에서 프롬프트 요청 "supabase를 제거하고 firebase로 바꿔줘. 이 때 '내 이메일 게정 주소'으로 접속하면 콘텐츠를 업로드하거나, 지우거나 하는 등 편집 권한을 부여하도록 하고 그 외에는 접속을 하더라도 보는 권한만 주도록 해줘.
3. 데이터베이스(DB): 서비스의 기억력
데이터를 종류별로 나누어 보관하는 '잘 정리된 냉장고'. DB 부재 시 물건을 찾기 위해 온 집안을 뒤져야 하는 '뒤죽박죽 다락방'과 같은 서비스 속도 저하 발생.
- RDBMS (관계형): 엑셀처럼 표 형식 저장. 데이터 정확도 보장. (MySQL, PostgreSQL)
- NoSQL (비관계형): 자유로운 문서 형식 저장. 유동적이고 빠른 처리에 적합. (MongoDB, Firebase)
- 데이터베이스의 역사:
- 1960s: 탐색형 DB (계층적 구조)
- 1970s: 관계형 DB (SQL의 탄생 - Donald D. Chamberlin)
- 2000s: NoSQL (비정형 데이터)
- Today: 클라우드 DB (어디서나 연결)
Supabase vs. Firebase (?)
비유)
SQL: 꼼꼼한 건축가
NoSQL: 자유로운 예술가
4. 데이터 스케마 설계: 디자인의 보이지 않는 뼈대
UX 디자이너가 알아야 할 데이터 구조 기획 기초.
- IA(정보 설계) vs DB 스케마:
- IA: 사용자가 정보를 찾는 '길' 설계 (메뉴 구조, 레이블링).
- DB 스케마: 시스템이 정보를 기억하는 '틀' 설계 (테이블 관계, 데이터 타입).
- UI에서 '엔티티(Entity)' 추출: 디자인 컴포넌트는 곧 데이터 덩어리.
- 사용자(User): 이름, 프로필 이미지, 이메일
- 콘텐츠(Post): 제목, 본문, 작성일, 조회수
- 상태(Status): 읽음 표시, 배송 중, 품절 여부
- 데이터 관계(Relationship)의 UX:
- 1 : 1: 사용자 - 개인 설정 (내 프로필은 하나)
- 1 : N: 작가 - 게시글 (한 사람이 여러 글 작성)
- N : M: 학생 - 강의 (여러 학생이 여러 강의 수강)
- 데이터 타입 제약: 글자 수 제한(Varchar), 시간 형식(Timestamp) 등은 설계 단계에서 합의 필요.
- 스케마 기획 Tip: 사용자 행동을 기록할 '빈 칸' 설계. (마지막 접속 시간, 선호 태그, 임시 저장 여부, 알림 수신 동의 상태 등 메타 데이터 확보) → 메타 데이터를 잘 활용하면 UX를 잘 설계할 수 있음
비유) 헬스장을 예로 든다면, 회원이 입장하면서 회원카드를 찍었을 때, 날짜/몸무게/체지방/기존데이터와의 비교하여 결과값 변화 추이 등의 데이터가 나오고 이 모든 DB를 엮어서 우리는 정보를 만들어내내는 것.
5. SQL과 올인원 솔루션
데이터와 대화하는 언어와 차세대 도구.
- SQL (Structured Query Language): 표(Table) 형태로 정리된 데이터에서 원하는 정보만 추출하는 표준 언어. → 구조적으로 '잘' 질문하는 것. 'record'를 모아놓은 것을 'table'이라고 함. SQL 혹은 시퀄이라고 부름. Query는 '질의'라는 뜻.
- MySQL: 믿음직한 정석. 대규모 서비스의 뼈대를 잡는 안정적인 관계형 DB.
- PostgreSQL: 복잡한 데이터 관계를 스마트하게 처리하는 도구.
- Supabase: 차세대 올인원. 오픈소스. Firebase의 편리함(실시간성)과 PostgreSQL의 강력함을 결합. 빠른 프로토타이핑 지원.
[실습]
- https://www.w3schools.com/sql/sql_where.asp
- Amazon Lightsail 활용 (* AWS: 아마존이 제공하는 IT 서비스)
 |
 |
 |
 |
 |
6. 비동기(Asynchronous)와 사용자 경험
데이터 처리 과정에서의 효율성.
- 진동벨의 마법:
- 동기(Sync): 주문 후 카운터 앞에서 커피가 나올 때까지 대기. → 순차 관계
- 비동기(Async/Non-blocking): 진동벨을 받고 자리에 앉아 자유롭게 행동.
- UX 강점: 앱이 '멈췄다'고 느끼지 않게 하는 부드러운 경험 제공.
- 데이터 상태 디자인(State Diagram): 아래 상태가 디자인에 잘 반영되어야 함.
- Loading: 데이터를 가져오는 중 (UX의 핵심) 예) google stitch에서 작업중일 때 skleton 보여주는 것.
- Success: 데이터를 화면에 출력
- Error: 연결 실패 시 안내
→ 디자이너 역할: 각 상태에서 어떤 UI를 보여줄지 설계.
7. 활용 사례 (우리 주변의 데이터)
- SNS 서비스: Firebase/NoSQL 활용 (실시간 좋아요, 댓글 알림, 끊김 없는 피드 업데이트).
- 쇼핑몰 & 금융: MySQL/SQL 활용 (결제 내역, 재고 관리, 회원 정보 등 정확도가 생명인 데이터).
[실습] 포트폴리오 데이터 분류 및 메타데이터 구조화
포트폴리오 데이터베이스 구조 / 피그마 요청 문구
"포트폴리오 카드 컴포넌트를 만들어줘. 카드에는 썸네일(작게), 프로젝트 제목(단일 필드, 한/영 AI 번역본 토글로 전환), 날짜(자동), 난이도 뱃지(입문/중급/고급), 과목 태그(Data driven, Business design, Design driven, 기타), 사용 툴 태그, 키워드 태그, 링크 아이콘, 미니 설명, 작업 노트를 포함해줘.
텍스트 입력은 언어 토글(한국어/English)로 작성 언어를 선택하면 AI가 반대 언어로 자동 번역해주고, 번역본은 검수 후 수정 가능하게 해줘.
팀 프로젝트일 경우에만 공동작업자 이름, 내 기여율(%), 기여 영역 태그, 기여 설명이 표시되게 해줘.
권한은 Admin과 일반 방문자로 구분해줘. Admin 로그인 상태에서만 프로젝트 추가(Create), 수정(Update), 삭제(Delete)가 가능하고, 카드에 수정/삭제 버튼도 Admin일 때만 노출되게 해줘. 일반 방문자는 갤러리 열람과 필터 사용만 가능해.
필터는 난이도, 과목, 사용 툴, 팀/개인, 언어(KO/EN)로 구성하고, 갤러리 레이아웃도 같이 만들어줘."
<홈페이지 이사 준비>
피그마 포폴 페이지 개발자 모드 해서 다운로드 받고,
그 파일을 클로드에서 code mode로 연결한 후 폴더 연 다음,
"프로젝트를 분석해서 readme.md에 업데이트하고 프리뷰 볼 수 있게 만들어줘."라고 요청
유용한 자격증 / 코스
- SQL 전문가 자격증 https://www.dataq.or.kr/www/accept/schedule.do#none
- Web Accessibility 과정 https://www.w3.org/WAI/fundamentals/accessibility-intro/
- 기타 한국자격증협회 검색ㄱㄱ
- 하지만, 가고자 하는 분야에 대한 Domain Knowledge가 중요하므로, 그쪽 관련 자격증을 취득하는 것이 더 도움이 될 수도 있따. 예) 금융 / F&B / 로봇 physical AI / medical / 교육 등