카드 만들기 사이트

간단하게 카드를 만들고 이미지파일로 저장할 수 있는 사이트입니다.

• 사이트 링크

사용된 기술 스택

• 
• 

프로젝트 화면 및 소개

• 메인 페이지

  

  • 패럴랙스 효과 적용

• 서브 페이지

  이미지 카드에 필요한 데이터를 입력하면 다운로드 할 수 있는 기능

  1. 텍스트 입력

     

  2. 이미지 선택

     

     • 이미지 파일 직접 업로드
     • 이미지 파일 검색
       • fixabay API를 통한 이미지 검색 기능 구현
       • IntersectionObserver을 활용하여 무한 스크롤 기능 구현

  3. 폰트 선택

     

     • 폰트 선택 DOM은 json파일을 불러와 동적으로 생성

  4. 꾸미기

     

     • 색상 필터 등 조작 가능

  5. 다운로드

     

     • 비동기 방식으로 이미지가 다운로드 되기 전 이미지 데이터를 생성
     • 다운로드 중에는 유저가 알 수 있도록 Loading 모달 UI 생성

사용한 라이브러리

• dom-to-image : (https://github.com/tsayen/dom-to-image)
• FileSaver : (https://github.com/eligrey/FileSaver.js/)

업데이트 기록

• 2020년 : jQuery문법으로 제작
• 2021-03-04(목) : jQuery를 ES6 최신 문법으로 수정