도구 · 제작기
사진 필터
사진에 후지필름 필름 시뮬레이션(Classic Chrome, Velvia, ACROS 등 14가지)과 리코 GR 이미지 컨트롤(Positive Film, Hi-Contrast B&W 등 12가지), 라이카 모노크롬 흑백 4가지 느낌의 필터를 입힌다. 강도와 밝기·대비·그레인을 조절하고, 자르기·회전, 저장 크기 조정, 2MB·500KB처럼 정한 용량에 맞춘 압축까지 한 화면에서 한다. 여러 장을 한 번에 똑같이 편집해 ZIP으로 받을 수도 있다. 사진은 서버로 올라가지 않는다.
프로젝트 소개
무엇인가
사진에 카메라 회사의 색감을 입히는 필터 도구입니다. 후지필름 카메라의 필름 시뮬레이션 14가지(PROVIA, Velvia, ASTIA, Classic Chrome, PRO Neg. Hi·Std, Classic Neg., Nostalgic Neg., ETERNA, ETERNA 블리치 바이패스, REALA ACE, ACROS, 모노크롬, 세피아)와 리코 GR의 이미지 컨트롤 12가지(Standard, Vivid, Positive Film, Negative Film, Bleach Bypass, Retro, HDR Tone, Cross Processing, Monotone, Soft·Hard Monotone, Hi-Contrast B&W)를 흉내 냈습니다. 라이카는 흑백 전용 카메라인 모노크롬(Monochrom)의 결을 따른 흑백 4가지(Monochrom, High Contrast, Selenium, Sepia)를 넣었습니다. 자르기·회전, 저장 크기 조정, 용량 줄이기도 한 화면에서 합니다. 필터 없이 용량만 줄이는 데 써도 됩니다. 여러 장을 한꺼번에 열면 같은 설정으로 모두 저장합니다. 사진은 서버로 올라가지 않고 이 브라우저 안에서만 처리됩니다.
이렇게 써보세요
- 사진을 끌어다 놓거나 눌러서 고르면 필터마다 내 사진으로 만든 미리보기가 나옵니다. FUJIFILM·RICOH GR·LEICA 단추로 회사별로 나눠 볼 수 있습니다.
- 필터를 고른 뒤 강도를 0~100으로 조절합니다. ACROS·모노크롬과 라이카 Monochrom·High Contrast는 노랑·빨강·초록 흑백 필터를 고를 수 있습니다. 흑백 전용 카메라를 쓰는 사람들이 렌즈 앞에 색 필터를 끼우는 것과 같은 효과입니다.
- '조정' 탭에서 밝기, 대비, 채도, 색온도, 색조, 밝은·어두운 영역, 바랜 느낌, 비네팅, 그레인, 선명도를 바꿉니다. 미리보기 아래 단추를 누르고 있으면 원본과 비교됩니다.
- '자르기' 탭에서 자유·원본·1:1·4:5·3:4·3:2·16:9·9:16 비율로 자르고, 90도 회전과 좌우 뒤집기를 합니다.
- '용량·저장' 탭에서 원본 크기나 긴 변 4096·2048·1080픽셀을 고르거나 직접 적고, JPG·WebP(화질 조절)나 PNG로 저장합니다. 저장하기 전에 결과 파일의 용량과 원본보다 얼마나 줄었는지가 보입니다. 휴대폰에서는 공유 단추로 사진 앱에 바로 넣을 수 있습니다.
- 사진을 여러 장 고르거나 끌어다 놓으면 미리보기 아래에 작은 사진 줄이 생깁니다. 필터·조정·저장 크기·용량과 자르기 비율은 모든 사진에 똑같이 들어가고, 회전과 자른 위치는 사진을 눌러 하나씩 따로 정할 수 있습니다. 저장하면 ZIP 파일 하나로 받고, 휴대폰에서는 공유 단추로 사진 앱에 한꺼번에 넣을 수 있습니다. '지금 사진만'을 고르면 보고 있는 한 장만 저장합니다.
- 업로드 한도가 있는 곳에 올릴 때는 용량에서 2MB·1MB·500KB·200KB를 고르거나 KB로 직접 적습니다. 정한 용량을 넘지 않는 가장 높은 화질을 찾아 저장하고, 화질을 55까지 내려도 넘치면 사진 크기를 줄입니다. 잔무늬가 많은 1,200만 화소 위성사진으로 시험하니 500KB에서 긴 변 2,181픽셀, 1MB에서 3,122픽셀이 됐습니다. 보통 사진은 덜 줄어듭니다.
자료와 방법
필터마다 밝기 곡선, 채널별 곡선, 색 섞기, 채도, 그림자·밝은 곳에 더하는 색, 그레인, 비네팅 값을 정해 두고, 브라우저의 WebGL(그래픽 처리 장치)로 한 번에 그립니다. 각 필터의 특징은 후지필름과 리코가 설명서와 소개 자료에서 밝힌 성격(예: Classic Chrome은 낮은 채도와 단단한 그림자, Positive Film은 강한 대비와 진한 색)을 기준으로 맞췄습니다. 미리보기는 줄인 사진으로 그리고, 저장할 때는 원본 해상도에서 다시 그립니다. 그레인과 비네팅은 사진 크기에 비례해 계산하므로 미리보기와 저장본의 느낌이 같습니다.
한계와 주의
- 공식 필터가 아닌 근사치입니다. 카메라는 센서 원본(RAW)에 자체 색 처리를 하지만, 이 도구는 이미 JPG가 된 사진 위에 효과를 입히므로 같은 장면을 카메라로 찍은 결과와는 다릅니다.
- FUJIFILM, 필름 시뮬레이션 이름, RICOH, GR, LEICA, Monochrom은 각 회사의 상표이며 이 도구는 해당 회사와 관계가 없습니다.
- 브라우저가 한 번에 그릴 수 있는 크기에는 한도가 있습니다(아이폰 사파리는 약 1,670만 화소). 이보다 큰 사진은 한도에 맞춰 줄여 저장하고 그 사실을 알려 드립니다.
- 저장한 사진에는 촬영 정보(EXIF)가 들어가지 않습니다. 위치 정보가 빠지는 대신 촬영 날짜와 카메라 정보도 함께 빠집니다.
- HEIC 사진은 브라우저가 지원할 때만 열립니다. 크롬에서 열리지 않으면 사파리를 쓰거나 JPG로 바꿔서 올려 주세요.
PDF 변환기를 만든 다음 날, 사진에 필터를 씌우는 앱도 되느냐는 질문을 받았다. 이어서 후지필름과 리코의 필터를 아느냐고 물었고, 그 이름 그대로 만들어 달라는 주문이 붙었다. 자르기와 크기 조정도 넣어 달라고 했다.
셰이더 하나로
사진 편집기는 보통 효과마다 단계를 나눠 처리한다. 여기서는 WebGL 셰이더 하나에 다 넣었다. 화면의 점 하나를 그릴 때마다 자르기 좌표를 원본 좌표로 바꾸고(회전·뒤집기 포함), 선명도와 밝기·대비를 적용하고, 필터의 색 섞기와 곡선을 지나, 비네팅과 그레인을 얹는다. 순서가 고정이라 슬라이더를 움직여도 매번 원본에서 새로 그린다. 1,200만 화소 사진도 미리보기는 2048픽셀로 줄여 두고 그리기 때문에 손을 떼기 전에 결과가 바뀐다.
필터 26개를 숫자로
후지필름 14개, 리코 GR 12개를 각각 밝기 곡선, 채널별 곡선, 3×3 색 섞기, 채도, 그림자와 밝은 곳에 더할 색, 그레인, 비네팅 값으로 적었다. Classic Chrome은 채도를 0.72배로 낮추고 그림자 쪽 곡선을 눌렀다. Positive Film은 곡선을 세우고 파랑에 초록을 조금 섞어 청록으로 당겼다. ACROS와 모노크롬에는 카메라처럼 노랑·빨강·초록 흑백 필터를 달았는데, 흑백으로 바꿀 때 빨강·초록·파랑에 주는 가중치를 바꾸는 방식이다. 빨강 필터를 고르면 파란 하늘이 어두워진다.
값을 정한 뒤 에베레스트 사진과 인물 사진을 붙인 시험 이미지에 26개를 모두 적용해 한 장에 늘어놓고 비교했다. Hi-Contrast B&W는 어두운 배경의 인물이 거의 검게 사라져서 곡선을 조금 풀었고, Classic Neg.는 배경이 지나치게 파래져서 그림자에 더하는 청록을 줄였다.
미리보기와 저장본이 같아 보이게
그레인을 화면 픽셀 단위로 만들면 미리보기(2048픽셀)와 저장본(6000픽셀)의 입자 크기가 세 배 차이 난다. 그래서 입자와 비네팅은 사진 크기에 대한 비율로 계산했다. 저장할 때는 원하는 크기의 두 배까지만 그린 뒤 2D 캔버스로 반씩 줄여 계단 현상을 막았다. 아이폰 사파리는 캔버스 하나가 약 1,670만 화소를 넘으면 빈 그림을 내놓는데, 6000 × 3000 시험 사진(1,800만 화소)을 원본 크기로 저장하니 실제로 5656 × 2828로 줄어들었고 화면에 그 사실이 떴다.
자르기
자르기 틀은 사진 위에 얹은 상자다. 모서리를 끌면 반대쪽 모서리를 고정한 채 크기가 바뀌고, 비율이 정해져 있으면 가로·세로 중 덜 움직인 쪽을 맞춘다. 좌표는 0에서 1 사이의 비율로만 들고 있어서, 미리보기 크기가 바뀌어도 저장할 때 원본 픽셀로 그대로 옮겨진다.