[매력일자리 2주차 복습노트 및 솔직 후기] 디자인 시스템 구축부터 반응형 웹 Swiper 슬라이더

안녕하세요! 서울시 매력일자리 과정 2주차에 후기 작성이에요. (밀린거 금방올릴게요~~)
지난 1주차에 기획의 전체적인 뼈대를 잡았다면, 2주차에는 피그마를 활용한 본격적인 디자인 시스템 구축과 인터랙션 설계, 그리고 반응형 웹 레이아웃 구현까지를 경험했습니다.

2주차 강의의 핵심은 단지 화면을 예쁘게 만드는 기술이 아니라 "일관된 규칙(디자인시스템)을 먼저 만들고 구조적으로 설계하는 사고방식"에 있었습니다. 2주차 동안 배운 핵심 내용을 알기 쉽게 정리해 공유하겠습니다.

💡 2주차 핵심 학습 포인트 요약

2주차에 학습한 피그마 기능과 웹 퍼블리싱 개념을 한눈에 파악할 수 있도록 정리한 핵심 요약표

핵심 영역	주요 실습 및 학습 내용	실무 적용 및 주의 포인트
디자인 시스템	타이포그래피 계층 정의 (H1, Title, Body, Caption) 컬러 시스템 변수(Variables) 단계별 네이밍 관리 Border Radius, Shadow 등 공통 가이드 자산화	• 간격 단위의 일관성 유지 (4px, 16px, 20px 등) • 개별 요소를 컴포넌트화하여 재사용성 극대화
인터랙션 & 프로토타입	쇼핑몰/로그인 기반 사용자 흐름(User Flow) 설계 Hover 효과  특정 섹션 이동을 위한 스크롤 액션 (Scroll To) 구현	• 복잡한 연결선보다 자연스러운 시나리오 우선 • 인터랙션 설정 후 반드시 검증
반응형 웹 레이아웃	데스크톱(1920), 태블릿(1024), 모바일(390) 브레이크포인트 Grid 및 Flex 기반의 유연한 화면 배치 HTML 시맨틱 태그 구조화	• 모바일 진입 시 폰트 축소 및 패딩 값 재조정 • 세로 배치를 가로로 정렬할 땐 Flex 활용
외부 라이브러리 연동	Swiper 슬라이더 CDN 링크 및 스크립트 삽입 Swiper 전용 HTML 계층 구조 매칭 및 JS 초기화 CSS 초기화(Reset CSS) 및 웹 접근성 고려	• .swiper-wrapper, .swiper-slide 계층 엄수 • 슬라이더 누락 발생 시 래퍼의 높이(height) 값 점검

 

💬 자주 묻는 질문 (FAQ)

Q. 비전공자가 단기간에 실무 수준의 UI 역량을 쌓으려면 어떻게 해야 하나요?

A. 잘 만든 대기업이나 대형 서비스의 웹/앱을 직접 들어가 보며 '개발자모드' 기능을 활용해 구조를 뜯어보는 습관과 디자인 레퍼런스를 분석하는 것이 중요합니다. 완성도 높은 레퍼런스를 캡처하고 인터페이스 구조를 직접 따라 그려보며 좋은 점과 아쉬운 점을 분석하는 연습을 꾸준히 해야합니다.

Q. 디자인 단계에서 개발지식을 알아야 하는 이유가 있나요?

A. 디자인 툴에서 작업한 결과물이 웹/앱 브라우저에 그대로 구현되려면 개발자와의 협업이 필수적입니다. 피그마의 컴포넌트 상태값(Default, Hover, Disabled)이나 오토 레이아웃 개념은 CSS의 Flex, Grid 구조와 완벽히 맞닿아 있습니다. 구조와 용어를 이해하고 디자인하면 소통 비용이 획기적으로 줄어듭니다.

✍️ 2주차 복습노트 및 솔직후기

"화면을 단순히 그리기만 해선 살아남진 못한다."

솔직히 말하면 인턴경험이 있거나 프로젝트를 해보신 분들이라면 완전 기초부터 알려주시기때문에 그다지 큰 도움은 받지 못했습니다. 다만 제가 강의를 들으면서 느낀건 디자이너가 이젠 개발영역까지도 확장해야 살아남을 수 있겠다고 느꼈습니다. 다음 3주차 강의요약 및 후기도 기대해 주세요.