커버와 로고
폼 위쪽을 가로지르는 이미지나 색의 띠, 그리고 그 아래의 둥근 마크. 두 가지만 정하면 폼이 더는 기본값처럼 보이지 않습니다.
추가하기
커버 추가와 로고 추가는 에디터의 폼 제목 위에 있고, 가까이 가기 전까지는 흐릿하게 놓여 있습니다. 둘 다 대화창을 열지 않습니다. 누르면 곧바로 자리표시자가 들어갑니다. 커버는 단색 띠로, 로고는 어두운 원으로요. 그래서 무엇을 고르기도 전에 레이아웃이 먼저 자리를 잡습니다.
두 자리표시자 모두 폼 자신의 테마에서 섞여 나오므로 첫 순간부터 페이지에 어울립니다. 커버의 커버 변경 버튼이나 로고 원을 클릭하면 선택기가 열립니다.
둘 다 공개 폼과 임베드된 폼에 그대로 이어집니다. 에디터 캔버스에 놓인 그대로를 응답자가 봅니다.
선택기
커버 선택기는 탭 세 개로 열립니다. 로고 선택기에는 첫 번째 탭만 있습니다. 로고는 어딘가에서 찾아오는 것이 아니라 내 파일이기 때문입니다.
패널에 파일을 끌어다 놓거나 직접 찾아 고르세요. 브라우저가 읽을 수 있는 이미지 형식이면 무엇이든 10MB까지 되고, 올라가는 동안 진행 막대가 보입니다.
에디터를 벗어나지 않고 Unsplash를 검색합니다. 탭은 인기 사진 묶음으로 열리고, 입력을 멈춘 잠시 뒤에 검색을 다시 실행합니다.
폼의 테마에서 섞어 낸 견본 여덟 개. 강조색의 두 가지 세기, 중립색 둘, 색조를 옮긴 사촌 넷입니다. 어두운 테마에서는 파스텔이 아니라 깊은 톤으로 나옵니다.
선택기 머리말의 삭제를 누르면 이미 넣어 둔 커버나 로고가 지워지고 패널이 닫힙니다.
커버 위치 조정하기
커버 띠는 훨씬 큰 사진에서 잘라 낸 높이 220픽셀짜리 조각이고, 보여 줄 만한 부분이 한가운데 있는 경우는 드뭅니다. 사진 커버가 놓이고 나면 커버 변경 옆에 위치 조정이 나타납니다. 눌러서 이미지를 위아래로 끌어 보세요.
드래그에는 감쇠가 걸려 있습니다. 띠 높이만큼 끌어도 프레임은 3분의 1쯤만 움직입니다. 그래서 손이 멈춘 자리가 아니라 의도한 자리에 잘림이 놓입니다.
위치 저장을 누르면 새 프레임에 맞춰 이미지를 다시 잘라 보관하고, 취소를 누르면 이전 잘림으로 되돌아갑니다. 위치 조정은 원본 전체 크기 파일이 있을 때만 쓸 수 있으며, Fillio는 폼을 다시 열 때 그 파일을 조용히 배경에서 받아 둡니다.
내 파일에 일어나는 일
모든 처리는 무언가 업로드되기 전에 내 브라우저 안에서 이루어집니다. 원본 크기 그대로 전송되는 것은 없고, 서버에서 변환하는 과정도 없습니다.
사진은 긴 변이 최대 2,400px이 되도록 줄어든 뒤 다시 인코딩됩니다. 그 결과가 원래 파일보다 커지면, 원래 파일이 그대로 보관됩니다.
줄어든 그 원본이 커버와 함께 보관됩니다. 나중의 모든 위치 조정은 바로 이 사본에서 잘라 냅니다.
띠 자체는 1920 × 440으로 기록됩니다. 화면에 보이는 220픽셀 높이의 두 배라, 레티나 화면에서도 선명합니다.
로고는 최대 400 × 400으로 줄어들어 100픽셀 원으로 보입니다.
PNG 파일은 크기만 조정되고 다시 인코딩되지 않으므로 투명도가 살아남습니다. GIF와 SVG는 전혀 건드리지 않습니다. 나머지는 모두 JPEG로 기록됩니다.
숨겨진 질문은 페이지 유효성 검사에서 건너뛰므로, 규칙이 숨긴 필수 질문이 제출을 막는 일은 결코 없습니다.