GIF 편집기능이 있는 웹 애플리케이션 만들어 줘.
1. 페이지 상단 헤더 좌측에 logo.png 집어넣고, 이거 클릭하면 https://nanalab.kr 로 이동해 줘.
2. 헤더 우측에는 “Smart GIF Studio” 라고 적어 줘.
3. 메인에는 Free GIF Editor 라는 제목이랑, “GIF 파일을 무료로 편집하세요! 리사이징, 다운스케일,
크롭, FPS 조절 등 다양한 기능이 무료로 제공됩니다!” 를 영어로 번역해 적어 줘.
4. 그 밑에는 “모든 데이터는 사용자의 컴퓨터 브라우저에서만 프로세싱됩니다. 데이터가 외부로 전송
되지 않으므로, 자료 유출 걱정 없이 안심하고 사용할 수 있습니다.” 를 영어로 적어 줘.
5. 제 목과 설명 아래쪽에는 GIF 파일 한 개를 선택해 드래그드롭할 수 있는 섹션 만들어주고, Choose
File 버튼 만들어서 그거 클릭하면 사용자가 직접 브라우징할 수 있게도 해 줘.
6. 일단 파일이 한 번 업로드되면 제목과 업로드 상자가 모두 사라지고, GIF 내용물과 편집 패널만
보여 줘.
7. 데스크톱 환경에서는 GIF를 왼쪽, 편집 패널을 오른쪽에
8. 모바일 환경에서는 GIF를 위, 편집 패널을 아래에 배치해 줘.
일단 여기까지만 만들어 줘. 이어서 추가 기능 요구할게.
이제 Editor Tools에 들어갈 기능을 만들어 줘.
1. Choose Another File 눌러서 새 파일을 로드하면 모든 작업 과정 초기화
2. Editor Tools에 다음 버튼 추가 Resize, Crop, Downsizing, Format Convert, Rotate, Optimize,
Reverse, Speed, Cut
3. 각 버튼에는 직관적인 아이콘도 넣어줘.
일단 다른 기능 구현은 하지 말고 버튼 만드는거까지만 해줘.
각 버튼을 누르면 작업 패널 모습이 바뀌어. 예를 들어, Resize 버튼을 누르면 Editor Tools 패널에
Resize와 관련된 정보만 표시되는 거야.
일단 Resize 버튼 기능을 구현해 줘.
X축, Y축 값을 슬라이더로 조절할 수 있도록 만들어 줘. 기본값은 현재 이미지의 값을 넣어주고,
minimum은 현재값의 5%, maximum은 현재값의 300%로 세팅해 줘.
x축, y축 아이콘 사이에는 자물쇠 표시를 해 줘. 자물쇠가 채워진 채로 한 개의 슬라이더를 이동시키면
비율을 유지한 채로 다른쪽 슬라이더도 저절로 값이 바뀌어.
자물쇠를 클릭하면, 풀린 자물쇠 아이콘으로 바뀌어. 이제 X축 값과 Y축 값을 따로따로 움직일 수 있게
되는 거지.
패널 하단에는 <Back> <Go!> 두 개의 버튼이 있어. <Back>을 누르면 다시 Editor Tools 패널이 원래
대로 돌아오고, <Go!>를 누르면 작업이 진행돼.
<Go>를 누르면 왼쪽의 <Original GIF> 패널을 닫아줘. 버튼을 눌러 패널을 열었다 닫았다 할 수 있게,
패널 제목 왼쪽에 버튼을 하나 추가로 만들어 주고.
그리고 <Resized GIF>라는 패널을 왼쪽에 새로 만들어 줘. 거기에는 Resize된 GIF 이미지와, 그 파일
의 정보들, 그리고 다운로드 버튼을 표시해 줘.
다운로드 버튼을 누르면 Resized_<원본 파일이름> 형태로 파일이 다운로드돼.
