웹 퍼블리싱 마스터 하기 - figma to web with javascript

피그마 디자인을 참조하여 다양한 레이아웃, 다양한 디자인 요소들과 기획의도를 파악하여 웹페이지로 구현하는 방법에 대해 학습합니다.

학습 목표

• Figma 디자인을 웹으로 구현하는 과정을 이해합니다.

  
  디자인 파일을 분석하고 웹 퍼블리싱에 적용하는 방법을 익힙니다.
  
  

• 웹 퍼블리싱의 기본 개념과 실무 기술을 습득합니다.
  HTML과 CSS를 활용한 마크업 및 스타일링 기법을 학습합니다.

  
  
  

• Figma에서 웹용 이미지 저장 및 최적화 방법을 익힙니다.

  
  적절한 이미지 포맷을 선택하고 웹 퍼포먼스를 고려한 이미지 최적화 방법을 배웁니다.

  
  
  

• 웹 표준과 접근성을 고려한 코드 작성 능력을 향상합니다.
  다양한 환경에서도 일관된 UI/UX를 제공할 수 있도록 학습합니다.

  
  
  

• Header 및 Navigation 바 구현 능력을 배양합니다.
  네비게이션 바, 헤더 디자인을 웹 페이지에 적용하는 방법을 익힙니다.

  
  
  

• 폰트, 색상, 버튼 스타일 등 디자인 요소를 적용하는 방법을 익힙니다.

  
  웹사이트 디자인을 통일성 있게 유지하는 방법을 실습합니다.

  
  
  

• 애니메이션 및 동적 효과를 적용하는 방법을 학습합니다.
  CSS 애니메이션과 트랜지션 효과를 활용하여 사용자 경험을 개선합니다.

  
  
  

• 웹 퍼포먼스를 고려한 최적화 기법을 익힙니다.
  코드의 효율성을 높이고, 성능을 향상하는 방법을 학습합니다.
  
  

• 실전 프로젝트를 완성하여 실무 역량을 강화합니다.
  학습한 내용을 바탕으로 직접 웹사이트를 제작하고 퍼블리싱 역량을 키웁니다.

  
  

웹퍼블리셔, 프론트엔드 개발자를 목표로 하고 계신가요?

그러면 디자인은 디자이너에게 맡기고, 완성된 디자인을 참조하여 구현하는 것에 집중해보세요.

본 강의에서는 피그마의 커뮤니티에서 무료 디자인을 활용합니다.

디자인 파일 주소: https://www.figma.com/community/file/1383362001941293031

주요 학습 내용

초반부(1~5차시)

웹 퍼블리싱의 기초 개념 이해

Figma에서 이미지 저장 및 활용법

HTML 기본 구조 작성

중반부(6~15차시)

Header 및 Navigation 바 구현

웹사이트의 헤더와 네비게이션 바를 HTML과 CSS를 활용해 구현하는 방법을 학습합니다. 로고, 메뉴, 아이콘 등을 적절히 배치하고, 사용자가 쉽게 탐색할 수 있도록 설계하는 원칙을 익힙니다. 또한, 네비게이션 바의 스타일을 적용하고, 다양한 디바이스에서 일관된 디자인을 유지하는 방법을 배웁니다.

CSS 스타일링 및 레이아웃 설정

폰트, 색상, 배경 이미지 적용

후반부(16~23차시)

버튼 및 애니메이션 효과 추가

웹사이트에서 사용자 경험을 향상시키기 위해 버튼 스타일을 적용하고, 다양한 애니메이션 효과를 추가하는 방법을 학습합니다. CSS를 활용하여 버튼의 호버 및 클릭 효과를 구현하며, 트랜지션과 키프레임 애니메이션을 적용해 자연스러운 인터랙션을 만드는 기법을 익힙니다. 이를 통해 시각적 완성도를 높이고, 동적인 웹 요소를 효과적으로 활용하는 방법을 배웁니다.

다양한 슬라이드 구현

웹사이트에서 이미지 또는 콘텐츠를 동적으로 보여주는 슬라이드를 구현하는 방법을 학습합니다. CSS와 JavaScript를 활용해 상하이동, 좌우 자동슬라이드 등을 적용하는 기법을 익히며, UX를 고려한 슬라이드 디자인을 설계하는 원칙을 배웁니다.

예제파일과 완성본을 제공합니다.

flex의 모든 속성에 대한 설명과 실습예제 파일을 제공합니다.

2회차와 마지막 회차 강의에 수업자료를 확인해주세요.

핵심정리 PDF를 제공합니다.

flex의 모든 속성에 대한 설명과 실습예제 링크를 제공합니다.

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

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