Inflearn brand logo image
Inflearn brand logo image
채널톡 아이콘

Figma 참조 - 반응형 쇼핑몰 웹사이트 만들기 완벽 가이드

html,css, javascript(jquery) 기초가 있으신가요? 그런데 전체 웹사이트 전체를 어떻게 만들지 잘 모르시나요? 그렇다면 디자인을 참조해서 쇼핑몰 메인페이지 구현을 도전해보세요. 완성된 디자인을 참조하고 기획 의도와 디자인의 상세한 사항들을 파악하여 웹사이트를 구현하는 노하우를 알려드립니다.

11명 이 수강하고 있어요.

Thumbnail

초급자를 위해 준비한
[웹 개발, UX/UI] 강의입니다.

이런 걸 배울 수 있어요

  • Figma 디자인 해석과 이미지 추출하기

  • HTML/CSS 파일 초기 세팅하기

  • CSS 변수 및 글로벌 스타일 작성하기

  • 웹폰트 사용 설정하기

  • 레이아웃 설계: Grid와 Flexbox 활용하기

  • 미디어쿼리 활용 반응형 CSS 구현하기

  • 컨테이너 쿼리 활용 반응형 CSS 구현하기

  • Swiper.js를 활용한 리뷰 슬라이드 제작하기

  • jQuery활용 모바일 메뉴, 장바구니 토글 슬라이드 제작하기

  • GitHub Pages 활용 웹사이트 배포하기

본 과정은 HTML, CSS, Javascript, jQuery 기초가 있어야 원할하게 학습하실 수 있습니다.

각 파트별 학습은 아래 링크를 확인해주세요.

프로젝트 환경 설정

  • 필수 플러그인 설치

    • Export Original Images

    • Export Styles to CSS Variables

    • Font Scanner

  • 프로젝트 파일 구성

    • 디렉토리 생성: images, css, js

    • 공통 HTML 및 CSS 파일 작성: common.html, common.css

디자인에서 웹사이트에 필요한 이미지를 저장하고, 공통적으로 적용될 스타일과 태그를 common.html과 common.css에 작성하여 일관성이 유지되고 추후 유지관리가 편한 웹사이트를 제작합니다.

프로젝트 파일 구성

Figma 디자인 이해하기

  • Figma에서 필요한 이미지와 스타일을 쉽게 가져오는 방법을 배워봐요.

  • 디자인 시안을 웹에서 구현하기 위한 기초를 알아봅니다.

본 과정에서는 Home Page(메인페이지)를 구현하면서 디자인을 참조하여 html 구조, css 스타일을 작성하는 노하우를 학습합니다.

Figma 디자인 이해하기

기본 파일 구성하기

  • reset.css와 normalize.css로 깔끔한 시작을 준비해요.

  • 효율적인 작업을 위한 폴더 구조와 공통 파일을 만들어봅니다.

reset.css로 HTML이 고유로 가지고 있는 속성들을 초기화하고, normalize.css를 통해 모든 브라우저에서 동일한 UI를 구현할 수 있도록 프로젝트를 구성합니다.

스타일 기본 설정하기

  • 자주 사용할 색상과 글자 크기를 변수로 설정해요.

  • Google Fonts로 예쁜 글꼴을 적용해봅니다.

공통 CSS 작성하기

레이아웃 구성하기

  • Grid와 Flexbox로 유연한 화면 구조를 만들어요.

  • 웹사이트의 주요 영역들을 설계합니다.

주요영역 HTML

디자인에서 주요 영역 파악하기

스크롤 애니메이션

  • css 속성을 활용하여 스크롤시 고정되는 효과를 만들어봐요.

  • 스크립트 작성없이 순수 css로 구현합니다.


스크롤시 고정되는 요소 구현하기

버튼에 생동감 더하기

  • CSS와 jQuery로 멋진 버튼 효과를 만들어봐요.

  • 클릭하고 싶은 3D 버튼을 구현합니다.

CSS와 jQuery를 활용한 버튼 애니메이션

CSS와 jQuery를 활용한 버튼 애니메이션

리뷰 슬라이더 만들기

  • Swiper.js로 산뜻한 슬라이드를 구현해요.

  • 모든 기기에서 잘 작동하는 슬라이더를 만듭니다.

swiper.js 활용 리뷰 슬라이드 구현

인터렉션 기능 구현하기

  • jQuery로 편리한 카트 기능을 만들어봐요.

  • 사용자 친화적인 카트 디자인을 완성합니다.

  • 모바일 메뉴를 기능을 만들어봐요.

인터렉션 기능 구현하기(모바일 메뉴, 장바구니)

반응형 디자인 완성하기

  • 모든 기기에서 완벽하게 작동하도록 다듬어요.

  • 모바일에서도 편리한 메뉴와 카트를 구현합니다.

반응형 디자인 완성하기(pc, tablet, mobile)

배포하기

  • 웹사이트의 성능을 최적화해요.

  • GitHub Pages나 Netlify로 여러분의 작품을 세상에 선보입니다.

반복되는 코드등을 재활용할 수 있도록 정리하고, 불필요한 소스는 제거합니다.

github page 또는 Netlify에 정적인 사이트를 업로드하여 누구나 방문할 수 있도록 배포합니다.

마무리

본 과정은 실제 쇼핑몰을 구현하는 과정은 아닙니다. 실제 쇼핑몰이 구현되려면 데이터베이스와의 연동이 필요합니다. 해당 부분은 백엔드 언어와 데이터베이스 관련 학습을 추가로 진행하시기 바랍니다. 본 과정에서는 웹퍼블리셔로서 디자인을 참조하여 html, css, javascript(jQeury)를 활용하여 최종 사용자 보게될 화면을 완성합니다.

본 과정을 마스터하고 웹 개발에 흥미가 있다면 아래 내용을 확인하여 프론트엔드 개발자 또는 벡엔드 개발자를 도전해보세요!

  • JavaScript 프레임워크/라이브러리

    • react, vue.js, Angular

  • TypeScript 학습

  • 백엔드 기본 이해

    • REST API와 HTTP 요청/응답 구조

    • JSON 데이터를 다루는 방법

  • 간단한 백엔드 경험

    • Node.js 및 Express.js를 활용한 간단한 서버 제작

    • 데이터베이스 연결 (MongoDB, Firebase, MySQL 등)

소통 창구(설문, 1:1오픈 채팅방)

수강생 분들은 새소식란의 소개되어 있는 구글 설문1:1 오픈 채팅방을 통해 언제든 의견과 질문을 하실수 있습니다.


이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • HTML, CSS, jQuery에 대한 기초 지식이 있는 학습자.

  • 퍼블리싱 작업 경험이 부족하지만, 실제 프로젝트를 완성해보고 싶은 초급 개발자.

  • 디자인 툴(Figma) 활용 경험은 없으나 배우고 싶은 사람.

  • 반응형 웹 구현과 퍼블리싱의 실무 프로세스를 배우고자 하는 학습자.

  • 웹 퍼블리싱과 프론트엔드 개발의 기본 원리를 익히고 싶은 사람.

  • 코딩 기초는 있지만 종합적으로 적용이 힘드신 분

선수 지식,
필요할까요?

  • html

  • css

  • javascript

  • jquery

안녕하세요
이지웹입니다.

2,264

수강생

36

수강평

1

답변

4.9

강의 평점

6

강의

■ [현재] 그린컴퓨터아트학원 웹퍼블리싱, 프론트엔드 강의
■ [현재] 웹 퍼블리싱 유튜브 채널 'Rock's Easyweb' 운영
■ 더조은 컴퓨터아카데미 웹 퍼블리싱 강사
■ 한빛 컴퓨터아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의


[ 도서 ]
2021.07.19 출간 / 웹디자인 & 웹퍼블리싱을 위한 피그마 완벽 활용서 / 비제이퍼블릭

2022.08.25 출간  / 코딩을 처음이라 with 웹 퍼블리싱  / 영진출판사

2023.10 출간 /2024 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획

2024.11 재판 /2025 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획

 

[ 수상경력 ]
2022.08 그린컴퓨터 아트 학원 종로지점 - 우수강사 2021.06 그린컴퓨터 아트 학원 종로지점 - 우수강사 2018.06 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2017.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2016.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2015.10 그린 컴퓨터아카데미 신촌 지점 - 우수강사 

 

 

 

더보기

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

₩55,000