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

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

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

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

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

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

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

  
  

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

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

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

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

.

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

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

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

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 오픈 채팅방을 통해 언제든 의견과 질문을 하실수 있습니다.