모바일 웹 제작 입문: Figma 디자인 완벽 구현하기 with Javascript

Figma 디자인을 참조하여 HTML/CSS, Javascript를 활용하여 모바일 웹사이트를 구현합니다. 모바일 디자인을 분석하여 유지관리가 용이한 웹사이트를 구현해보세요.

본 과정은 HTML, CSS, Javascript 기초가 있으면 좀더 원할하게 학습하실 수 있습니다.

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

• HTML 기초: https://inf.run/DL3EM

• CSS 기초: https://inf.run/doqvG

• Flexible 레이아웃:
  https://youtu.be/_PSy66fkQ7U
  https://youtu.be/N27SvfJMXMs

  
  

• Javascript 기초: https://inf.run/yNXhi

📱 Figma 디자인을 실제 모바일 웹사이트로 완성해 보세요!

디자인을 코드로 바꾸는 실전 웹 퍼블리싱 프로젝트

HTML, CSS, JavaScript를 배웠지만 실제 웹사이트를 처음부터 만들어 본 경험이 부족하신가요?

Figma 디자인을 보고 어디서부터 작업해야 할지, HTML 구조는 어떻게 설계하고 CSS와 JavaScript는 어떤 순서로 작성해야 할지 고민되셨나요?

이번 강의에서는 Figma로 제작된 모바일 패션 쇼핑몰 디자인을 분석하고 실제 웹사이트로 구현하는 전 과정을 경험합니다.

디자인 분석부터 이미지 추출, HTML 구조 설계, CSS 스타일링, JavaScript 인터랙션 구현까지 단계별로 실습합니다.

단순히 화면을 따라 만드는 것이 아니라, 실제 웹 퍼블리싱 작업의 흐름을 익히고 포트폴리오로 활용할 수 있는 결과물을 완성하는 과정입니다.

📱 Figma 디자인을 실제 모바일 웹사이트로 완성해 보세요!

디자인을 코드로 바꾸는 실전 웹 퍼블리싱 프로젝트

HTML, CSS, JavaScript를 배웠지만 실제 웹사이트를 처음부터 만들어 본 경험이 부족하신가요?

Figma 디자인을 보고 어디서부터 작업해야 할지, HTML 구조는 어떻게 설계하고 CSS와 JavaScript는 어떤 순서로 작성해야 할지 고민되셨나요?

이번 강의에서는 Figma로 제작된 모바일 패션 쇼핑몰 디자인을 분석하고 실제 웹사이트로 구현하는 전 과정을 경험합니다.

디자인 분석부터 이미지 추출, HTML 구조 설계, CSS 스타일링, JavaScript 인터랙션 구현까지 단계별로 실습합니다.

단순히 화면을 따라 만드는 것이 아니라, 실제 웹 퍼블리싱 작업의 흐름을 익히고 포트폴리오로 활용할 수 있는 결과물을 완성하는 과정입니다.

🎯 이번 강의에서 완성할 프로젝트

모바일 패션 쇼핑몰 'Geeta'

Figma 디자인을 바탕으로 모바일 쇼핑몰의 주요 페이지를 제작하고, JavaScript를 활용해 다양한 사용자 인터랙션을 구현합니다.

총 8개 화면을 제작합니다.

1. 인트로 페이지

2. 로그인·회원가입 선택 페이지

3. 로그인 페이지

4. 회원가입 페이지

5. 상품 홈 페이지

6. 상품 상세 페이지

7. 장바구니 페이지

8. 마이페이지

디자인 시안에 맞춰 HTML과 CSS를 작성하고, 실제 모바일 웹사이트에서 자주 사용되는 다양한 인터랙션을 추가합니다.

특히 완성된 웹사이트는 PC와 모바일 환경을 구분하여 서로 다른 방식으로 표시합니다.

• PC 접속: 스마트폰 목업 안에 모바일 웹사이트 표시

• 모바일 접속: 목업 없이 모바일 기기에 최적화된 전용 페이지 표시

이를 통해 JavaScript를 활용한 기기 판별 및 적응형 모바일 웹 구현 방식을 경험할 수 있습니다.

※ 실제 회원 인증, 상품 데이터베이스 및 결제 시스템을 연결하는 과정은 아닙니다. 웹 퍼블리싱에 필요한 화면 구현과 프론트엔드 인터랙션 제작에 집중합니다.

💡 이런 분들께 추천합니다

1. HTML/CSS/JavaScript를 배웠지만 프로젝트 경험이 부족한 분

기초 문법을 실제 웹사이트 제작에 종합적으로 적용하는 경험을 쌓을 수 있습니다.

2. Figma 디자인을 코드로 구현하고 싶은 분

디자인을 분석하고 필요한 이미지를 추출하여 실제 웹페이지로 제작하는 과정을 경험합니다.

3. 웹 퍼블리셔 취업을 준비하는 분

단순한 예제를 넘어 여러 페이지와 인터랙션으로 구성된 포트폴리오 프로젝트를 완성하고 싶은 분께 적합합니다.

4. 모바일 웹 퍼블리싱 역량을 키우고 싶은 분

모바일 화면에 적합한 레이아웃과 인터랙션, 기기별 화면 표시 방식을 학습할 수 있습니다.

🚀 무엇을 배우게 되나요?

STEP 01. Figma 디자인 분석과 프로젝트 준비

웹사이트 제작에 앞서 Figma 디자인을 살펴보고 필요한 리소스를 준비합니다.

• 완성 프로젝트 미리보기

• Figma 디자인 분석

• 이미지 추출 및 필요한 이미지 리소스 준비

• 프로젝트 폴더 및 파일 구성

디자인을 살펴보며 필요한 작업을 계획하고, 웹 퍼블리싱에 활용할 수 있도록 리소스를 준비합니다.

STEP 02. 모바일 웹의 공통 구조와 스타일 구현

모바일 웹사이트의 각 페이지에서 공통으로 사용하는 요소를 구현합니다.

• CSS 초기화와 공통 스타일 작성

• CSS 변수 활용

• 웹폰트 적용 및 폰트 위계 설정

• Flexbox와 Grid를 활용한 레이아웃 구성

• Input, Checkbox, Radio 등 폼 요소 스타일링

공통 요소를 체계적으로 관리하면서 일관성 있는 웹사이트를 제작하는 방법을 익힙니다.

STEP 03. JavaScript로 완성하는 모바일 인터랙션

정적인 디자인에 JavaScript를 적용하여 실제로 반응하는 모바일 UI를 구현합니다.

인트로 페이지

Swiper.js 라이브러리를 활용하여 자동으로 전환되는 슬라이드를 구현하고, 디자인에 맞게 페이지 표시 요소를 수정합니다.

로그인 및 회원가입 화면

배경 이미지와 그라데이션을 활용하고, 기본 체크박스를 원하는 디자인으로 변경하는 방법을 학습합니다.

상품 홈 페이지

카테고리를 선택했을 때 이동하는 하이라이트 애니메이션과 상품 그리드 뷰 변경 기능을 구현합니다.

마이페이지를 열고 닫는 인터랙션도 제작합니다.

상품 상세 페이지

상품 별점 표시, 수량 변경, 사이즈 선택과 같은 사용자 인터랙션을 구현합니다.

장바구니 및 결제 화면

장바구니의 수량 변경 및 삭제 인터랙션을 구현하고 결제 옵션 화면을 제작합니다.

각 기능의 HTML 구조와 CSS 스타일을 작성한 뒤 JavaScript를 추가하면서 단계적으로 완성합니다.

STEP 04. PC와 모바일을 구분하는 적응형 웹 구현

JavaScript를 활용하여 접속 기기에 따라 웹페이지를 다르게 표시하는 방법을 배웁니다.

• navigator.userAgent를 활용한 기기 판별

• PC에서 스마트폰 목업으로 모바일 페이지 표시

• 모바일 기기에서 모바일 전용 페이지 표시

• 기기에 따른 페이지 이동 처리

하나의 모바일 디자인을 서로 다른 접속 환경에 맞게 표현하는 방법을 경험합니다.

✅ 수강 후에는 이런 것을 할 수 있어요

• Figma 디자인을 분석하고 웹 퍼블리싱에 필요한 리소스를 준비할 수 있습니다.

• HTML과 CSS로 모바일 웹사이트의 레이아웃을 제작할 수 있습니다.

• CSS 변수와 공통 스타일을 활용해 일관성 있는 UI를 구현할 수 있습니다.

• JavaScript로 메뉴, 슬라이드, 상품 선택 등 다양한 인터랙션을 구현할 수 있습니다.

• 접속 기기에 따라 화면을 구분하는 적응형 모바일 웹을 제작할 수 있습니다.

• 여러 페이지로 구성된 모바일 웹 퍼블리싱 결과물을 포트폴리오로 활용할 수 있습니다.

본 강의는 취업용 포트폴리오 제작을 컨셉으로 하고 있습니다.

본 과정은 모바일 전용 웹사이트를 만드는 과정을 소개합니다.

완성된 웹페이지를 PC로 접속했을 때는 모바일 목업 안에 페이지를 가두어 보여줍니다. 이때 javacript를 이용하여 접속한 기기가 모바일 기기인지 파악합니다.

.

실무에서는 이렇게 모바일 목업을 만들지 않고 화면 전체를 활용하거나, 반응형으로 구현합니다. 반응형 웹페이지 구현이 궁금하면 https://inf.run/Gx3Ty 강의를 참조해주세요.

접속한 기기가 모바일 이라면 목업은 사라지고 컨텐츠만 해당 기기에 맞춰 최적화하여 보여주는 적응형 모바일 웹사이트 구현 방법을 소개합니다.

완성본의 파일 구조입니다.

PC로 접속하면 루트 폴더의 index.html이 오픈되어 모바일 목업에 내용을 보여주고, 모바일로 접속하면 루트 폴더가 아니라 mobile 폴더내 index.html로 접속되도록 구현합니다.

• 필수 플러그인 설치

  • Export Original Images

  • Photoroom - AI and Background Remove

  • Font Scanner

참조할 Figma 디자인

Figma 디자인을 참조하여 아래 페이지를 완성합니다.

• 인트로페이지

• 로그인-회원가입 선택 페이지

• 로그인

• 회원가입

• 상품 홈

• 상품 상세 페이지

• 장바구니

• 마이페이지

주요 학습 내용을 소개합니다.

📒인트로 페이지

모바일 기기 감지하기

javascipt를 활용하여 사용자 기기를 구분하는 방법을 학습하고 기기에 따라 목업 또는 모바일 전용 페이지로 이동시킵니다. 이때 사용자가 사용하는 브라우저의 고유 속성 navigator.userAgent값을 확인하여 구분하는 방법을 학습하게 됩니다.

Swiper JS 파라미터 활용

가장 널리 사용되는 대표적인 javascript 라이브러리인 swiper.js를 활용하여 자동 슬라이드를 구현하고, 기본적으로 원형으로 제공되는 페이저의 스타일을 변경합니다.

📒로그인 - 회원가입 구분 페이지

하나의 요소에 여러개의 배경이미지를 지정하고, 각각의 위치를 디자인와 같이 일치하도록 배치합니다.

📒로그인, 회원가입

linear-gradient를 활용하여 페이지 헤더의 배경을 지정합니다. 디자인에서 배경 속성을 확인하여 스타일을 작성합니다.

input요소중 checkbox는 브라우저 고유의 스타일을 변경할 수 없습니다. 변경할 수 없는 요소는 화면에서 사라지도록 하고 다른 요소에 스타일을 작성하여 디자인과 일치하도록 구현합니다.

📒상품 홈 페이지

사용자 속성을 활용하여 알림창, 장바구니 아이콘의 숫자 카운트를 구현합니다.

클릭시 하이라이트 선이 이동하는 애니메이션을 css와 javascript로 구현합니다.

그리드뷰 버튼을 클릭하여 상품 배치를 변경하고, 찜하기 버튼을 클릭하면 색상이 변경됩니다.

우측의 버튼을 클릭하면 마이페이지가 나타납니다

📒상품 상세 페이지

별점을 변경하면 화면에 별점이 표시되고, 상품 수량을 변경하고, 사이즈를 선택합니다.

📒장바구니 페이지

장바구니 상품의 수량을 변경하고, 삭제할 수 있습니다. 마지막으로 결제하기 버튼을 클릭하면 결제옵션이 나타납니다.

📒마무리

본 과정은 실제 쇼핑몰을 구현하는 과정은 아닙니다. 웹퍼블리셔로서 디자인을 참조하여 최종 화면의 틀까지만 작성하는 과정입니다. 그래서 로그인에서 내용을 입력하고 전송 버튼을 눌렀을 때 실무에서는 입력한 내용을 검증하고 데이터베이스 서버에 조회후 일치여부를 파악후 본페이지로 이동하는 과정으로 구현해야 하지만, 본 강의에서는 action 속성의 값으로 임시로 연결했습니다.

HTML, CSS, Javascript만으로 구현하는 정적인 페이지이기 때문에 로그인, 회원가입, 장바구니에 담기, 삭제하기, 결제 진행하기등 모두는 페이지만 연결하는 수준으로 작성했으니 참고해주세요.

퍼블리셔 실무에서는 form에서 입력시 연결되는 작업까지는 할 필요가 없습니다. 프론트엔드 개발자 또는 백엔드 개발자가 웹퍼블리셔가 작업한 결과물에 DB 연동 및 서버단 스크립트를 작성하여 완성하게 되는 것입니다.

웹퍼블리싱->프론트엔드->백엔드의 프로세스가 궁금하신 분은 제 유튜브 채널의 게시판이나 쇼핑몰 구현하기 영상을 참조해보세요.

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

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