미리캔버스 기능 분석

웹 에디터 서비스를 제공하는 곳 중에서 나는 미리캔버스에서 제공하는 기능들을 구현해보기 위해서 기능분석을 시작한다.

템플릿

미리 제작된 템플릿 디자인 목록을 보여주고 클릭하면 해당 페이지에 적용시킬수 있다.

• 프리미엄 템플릿도 존재하는데 프리미엄 가입을 하지 않은 사용자가 클릭하면 프리미엄 가입하라는 팝업창이 뜨면서 캔버스에는 적용되지 않음
• 단일 템플릿과 복수 템플릿 디자인이 존재하는데 복수 템플릿의 경우는 여러장의 캔버스 디자인이 존재하여 적용시 여러개의 페이지를 해당 템플릿으로 생성한다.
• 템플릿에서는 동영상이나 이미지가 들어있고 해당 상세 설정은 추후 작성한다.

작업공간

사용자가 작업한 디자인들을 보관하는 항목

• 내 디자인
• 내 드라이브 : 사용자가 작성한 디자인, 로컬로부터 업로드한 이미지 요소를 열람할 수 있음
• 공유 드라이브 : 다른 사용자들과 같이 사용할 수 있는 드라이브
• 즐겨찾기

사진

캔버스 디자인에 필요한 사진이 들어있는 항목

• 사용자가 최근에 사용한 이미지 목록이 최상단에 위치
• 그 아래로 테마별로 사진 이미지들이 존재 (ex 바다로 떠나는 어부, 친환경 에너지)
• 해당 테마에 존재하는 사진을 클릭하면 캔버스의 정중앙에 추가됨
• 드래그앤 드롭으로 원하는 위치에 사진 생성 가능
• 드래그 할때 캔버스의 일정 영역에 걸친 상태가 되면 전체 배경화면으로 미리 적용된 모습을 보여주고 그 상태에서 마우스를 놓으면 배경화면으로 적용
• 이미지 정중앙, 모서리마다 변경점이 존재하며 크기 변경 가능
• 이미지 상단에는 복제, 삭제, 더보기 옵션이 존재
• 하단에는 회전 버튼이 존재하며 클릭한상태로 회전시 이미지가 회전

업로드

• 사용자가 업로드한 모든 파일을 보여주는 구간
• 검색 바가 존재하며 파일의 이름을 검색하면 검색 결과가 하단에 표시
• 검색 바 하단에 업로드 버튼이 존재하며 버튼 우측을 클릭하면 파일 업로드의 제한 사항을 툴팁으로 표시
• 폴더, 파일 구간으로 나뉘어져 있으며 폴더를 추가하여 폴더를 더블 클릭하여 해당 경로 내부에 들어가서 파일을 업로드 할 수 있음
• 업로드 버튼 클릭시 파일 업로드 창이 나오고 파일을 선택하면 하단에 파일이 업로드되며 미리보기 이미지가 표시
• 폴더, 파일에 mouseOver 시 좌측상단에 체크박스, 우측하단에 ... 옵션 버튼이 표시
• 좌측상단 체크박스를 클릭하면 모든 폴더, 파일에 체크박스가 표시되며 업로드 섹션 하단에 몇개가 선택되었는지 보여주는 텍스트, 우측에는 폴더이동 ,삭제, 취소 버튼이 존재한다.
• 단, 체크한 항목이 폴더일 경우에는 폴더이동 버튼이 보이지 않음
• 해당 텍스트 좌측에도 체크박스가 존재하고 체크시 전체 폴더 및 파일이 체크되며 다시 클릭하면 전체 체크 해제와 동시에 모든 항목의 체크박스가 사라짐
• 폴더 이동 버튼을 클릭하면 현재 존재하는 폴더를 보여주고 폴더 선택후 이동을 하면 파일이 이동한다
• 삭제 버튼시 이미지 삭제
• 취소 버튼 클릭시 그냥 원래대로 돌아옴

요소

• 사진과 비슷하지만 다른점이 있다면 검색바 밑에 태그들이 존재하는데 해당 태그를 클릭하면 그에 맞는 요소를 display한다.
• 드래그 앤 드롭으로 원하는 요소를 캔버스에 추가

텍스트

• 스타일, 폰트, 특수문자 3개의 탭으로 구성

  • 스타일
    • 제목, 부제목, 본문 텍스트 추가 기능 (다른 스타일 속성 없이 폰트의 크기만 변경)
    • 아래에는 여러 스타일이 적용된 폰트를 사용할 수 있음 (테마별로 구성)
  • 폰트
    • 각종 폰트가 구성 되어있음 (테마별 구성)
    • 스타일 탭에서 가져온 텍스트에 적용 되지 않고 독립적으로 존재
  • 특수문자
    • 윈도우에서 제공하는 특수문자 목록을 display 하여 클릭하면 캔버스에 추가됨
    • 드래그 앤 드롭 기능 x

AI 드로잉

• 원하는 이미지를 AI로 만드는 기능

동영상

• video 태그에 해당하는 컴포넌트들을 display
• 드래그 앤 드롭으로 캔버스에 추가
• 캔버스에 추가된 컴포넌트를 클릭했을때 속성과 애니메이션 효과를 부여할수 있는 설정창이 나타남
• 캔버스 정렬, 순서, 반전, 자르기 기능 지원
• 불투명도, 재생구간 편집
• 재생속도, 볼륨 설정
• 해당 컴포넌트에 내장된 키워드 정보가 하단에 표시되며 최하단에는 '비슷한 요소 찾기' 버튼이 존재함

오디오

• 캔버스의 배경음악을 추가하는 기능
• 배경음 목록이 display 되어있으며 드래그 앤 드롭으로 캔버스의 배경음악을 적용할 수 있음
• 재생 구간 편집 가능
• 볼륨, 서서히 크게, 서서히 작게 설정을 할수 있음 (시간)

테마

• 색의 조합 목록이 display 되어있으며 항목하나에 여러개의 색상이 들어있음
• 항목 선택시 항목에 내장된 색상중 하나의 색상이 캔버스의 배경화면에 적용됨
• 셔플 기능 존재 선택한 항목에 마우스를 올리면 셔플 이라는 버튼이 나타나며 클릭시 해당 항목에 존재하는 색상중에서 무작위로 색상이 변경
• 테마 색상 목록중에서 셔플 버튼이 존재하는데 무작위로 배경색상을 선택할 수 있음
• 최하단에는 모든 페이지에 적용 버튼이 있으며 클릭시 모든 캔버스에 해당 배경색상이 적용됨과 동시에 버튼이 사라짐
• 다른 테마를 선택하면 다시 모든 페이지에 적용 버튼이 나타남

배경

• 배경 일러스트 목록이 나열되며 클릭 혹은 드래그 앤 드롭시 캔버스의 배경이 적용됨
• 드래그 앤 드롭으로 해당 항목을 일정 비율 이상 캔버스에 드래그 할 때, 미리 캔버스에 적용된 모습을 보여주며 그대로 마우스를 놓으면 적용되고, 반대로 마우스를 놓지 않고 밖으로 이동하면 이전의 배경화면으로 돌아옴

찜

모든 요소들을 찜할 수 있는데, 찜한 목록을 이곳에서 볼 수 있음

QR/바코드

URL을 입력하여 QR 혹은 바코드를 제작 할 수 있음