1. 작업 소개
인화지 두 장을 비스듬하게 겹친 앱 아이콘이다. 200 200 viewBox 위에 흰 인화지 rect 108×132 rx="9" 두 장을 놓고, 그 안에 사진 면 90×88 rx="4" 를 얹었다.
값을 바꾸면 바로 다시 그려진다. 배색 3종, 뒤 장 기울기 -280, 앞 장 기울기 020, 타일 모서리 0~100 이 슬라이더로 붙어 있고, 앞 장의 원형 요소와 타일 없는 투명 배경은 체크로 켠다. 기본값은 뒤 -13°, 앞 9°, 모서리 48, 원형 요소 켬이다.
같은 도형을 64·48·32 크기로 나란히 그려 둔다. stroke-width 는 200 / px 로 나눠 어느 크기에서도 같은 굵기로 보이게 했다.
2. 구현 과정과 선택 기준
인화지 비율은 가로 108 : 세로 132로 고정이다. 아래 여백이 좁아지면 즉석 필름이 아니라 액자로 읽힌다.
두 장은 서로 반대 방향으로 기울어야 겹침이 의도된 것으로 보인다. 같은 방향이면 뒤 장이 앞 장의 그림자처럼 읽힌다.
앱 아이콘으로 낼 때는 타일 모서리를 0 으로 둔다. iOS 와 안드로이드가 알아서 마스킹하기 때문에 미리 깎으면 이중으로 잘린다.
3. 현재 상태와 남은 작업
배색 셋의 값이 그대로 남아 있다. lilac 은 타일 #EFEAF8·뒤 장 #C9DEF2·앞 장 #F5C3D0·원형 #E38FA6, warm 은 #FBEFE2/#FFD9A8/#F7C2A6/#EF8E63, cool 은 #E6F1EE/#BFE0D6/#CDE3F5/#7FB0C9 다.
화면 안에서 파일 내려받기가 막혀 있어, 1024 크기의 SVG 소스를 클립보드로 복사해 가져가도록 했다. 같은 소스가 「코드 보기」로 화면에도 펼쳐진다.