프리뷰를 중심에 두기
설정 목록보다 3D 프리뷰가 먼저 눈에 들어오도록 화면 가운데 가장 크게 배치했습니다. 장면을 확인한 뒤 필요한 값을 조절할 수 있습니다.
LENSSY
찍기 전에,
사진을 미리 그려보세요.
Project summary
렌즈와 구도를 3D로 미리 보고,
원하는 장면을 Camera Prompt로 만드는 웹 도구
Overview
프로젝트 개요
Lenssy는 촬영 전에 렌즈와 각도, 구도, 빛을 3D로 미리 맞춰보는 도구입니다. 화면에서 고른 값은 한국어와 영어 Camera Prompt로 바로 정리됩니다.
처음 아이디어를 잡는 일부터 화면 디자인, 기능 범위, 테스트, 이름과 공개까지 직접 맡았습니다. 개발은 Codex와 함께 진행했고, 2026년 7월 26일부터 8월 9일까지 만든 뒤 lenssy.kr에 공개했습니다.
- Role
- Product Designer · Product Owner
- How I built it
- Codex와 함께 UI · 3D · Prompt 개발
Tools & Stack
- Design
- Figma · Adobe Illustrator화면 구성과 그래픽 제작
- Frontend
- Next.js · React · TypeScript화면 크기에 맞는 UI와 설정 기능 개발
- 3D
- Three.js · React Three Fiber마네킹, 카메라, 조명을 3D로 보여주기
- Prompt
- TypeScript · Local data설정값을 한국어·영어 문장으로 만들기
- Build & Launch
- Vite · Cloudflare Workers · Wranglerlenssy.kr에 올리고 계속 다듬기
- Test & Collaboration
- Node Test Runner · ESLint · Codex · Git기능 확인, 오류 수정, 작업 기록
Background
왜 시작했나
원하는 장면은 떠오르는데, 렌즈와 빛을 어떻게 적어야 할지 막혔습니다.
이미지 AI로 사진을 만들면서 촬영 용어를 여러 개 붙여봤지만 결과를 미리 그리기는 어려웠습니다. 오히려 ‘가까운 부분은 크게’, ‘배경은 눌려 보이게’, ‘허리 위까지 나오게’처럼 눈에 보이는 모습을 풀어 쓴 문장이 더 잘 통했습니다.
그래서 이미지를 대신 만드는 기능은 넣지 않았습니다. 떠올린 장면을 촬영 설정으로 맞춰보고, 다른 도구에서도 쓸 수 있는 문장으로 가져가는 과정에 집중했습니다.
What Lenssy does
이미지를 대신 만들어주는 도구
Problem
반복해서 발견한 문제
정식 인터뷰나 큰 규모의 사용성 테스트는 하지 못했습니다. 대신 50mm 상반신 화면과 생성 결과, 14mm 키워드와 풀어 쓴 문장을 계속 비교했습니다. 직접 쓰면서 자주 막히는 부분부터 하나씩 고쳤습니다.
- 01
용어를 알아도 결과가 잘 그려지지 않는다
14mm나 바스트 샷이라는 말을 알아도 화면이 얼마나 넓고 어디까지 담기는지는 바로 떠올리기 어려웠습니다. 이미지 AI도 같은 숫자를 매번 똑같이 해석하지 않았습니다.
- 02
설정과 화면이 다르면 믿기 어렵다
프리뷰가 과하게 확대되거나 어깨 너머 구도가 반대로 보이고, 카메라 높이가 맞지 않는 일이 있었습니다. 고른 값과 화면이 다르면 안심하고 쓰기 어렵습니다.
- 03
사람과 제품은 봐야 할 것이 다르다
인물은 얼굴 방향과 시선이 중요하지만 제품은 재질과 반사, 라벨 주변의 여백을 더 많이 봅니다. 기본 촬영 흐름은 같이 쓰고 필요한 설정만 따로 뒀습니다.
Goal
잘 작동하는 기준
별도의 숫자 목표를 세우기보다, 설정 하나를 바꿨을 때 3D 화면과 도움말, 프롬프트가 서로 다르게 말하지 않는지를 기준으로 삼았습니다.
CHOOSE렌즈 · 각도 · 구도 · 빛
→ONE SETTING한 번에 바뀌는 설정
→3D 미리보기도움말Camera Prompt
- 렌즈를 바꿔도 사진에 담기는 범위는 그대로일 것
- 카메라 위치, 얼굴 방향, 시선을 따로 바꿀 수 있을 것
- 사람과 제품은 기본 방식은 공유, 필요한 설정만 나눌 것
- 3D 화면에 문제가 생겨도 설정과 프롬프트는 쓸 수 있을 것
UX/UI
복잡한 설정을 쉽게 쓰기
촬영 용어에 익숙하지 않아도 화면을 보며 값을 고르고, 달라진 결과를 이해한 뒤 바로 가져다 쓸 수 있게 흐름을 잡았습니다.
설정을 먼저 길게 늘어놓는 대신 3D 프리뷰를 화면 가운데 가장 크게 두었습니다. 왼쪽에서 값을 바꾸면 오른쪽 설명과 Camera Prompt까지 같이 바뀌고, 지금 고른 값은 상단 요약에서 한 번 더 확인할 수 있습니다.
용어보다 변화를 설명하기
50mm, 프레이밍 같은 이름만 보여주지 않고, 값을 바꾸면 인물 크기와 배경이 어떻게 달라지는지 선택지 바로 아래에 설명했습니다.
바꾸는 즉시 확인하기
바뀐 설정값이 실시간으로 3D 프리뷰와 Camera Prompt가 같이 바뀝니다. 값을 조절하면서 차이를 바로 확인할 수 있습니다.
문제를 화면 구조로 바꾸는 과정
정식 사용자 인터뷰 대신 제가 실제 설정과 생성 결과를 계속 비교했습니다. 쓰다가 막힌 지점을 화면 우선순위와 연결 방식, 모바일 순서에 반영했습니다.
- 01
막히는 지점 찾기
촬영 용어가 떠오르지 않거나, 고른 값과 프리뷰가 어긋나는 순간을 직접 쓰면서 기록했습니다.
- 02
결과를 가장 먼저 두기
설정 목록보다 먼저 보고 싶은 건 결과였습니다. 3D 장면을 화면의 첫 번째이자 가장 큰 영역으로 정했습니다.
- 03
하나의 상태로 연결하기
값 하나를 바꾸면 상단 요약, 3D 화면, 도움말, Camera Prompt가 같은 내용으로 움직이게 했습니다.
- 04
화면마다 다른 순서
세 칼럼을 억지로 줄이지 않고, 프리뷰를 먼저 보고 설정과 설명을 차례로 여는 흐름으로 바꿨습니다.
전문 용어를 다음 행동으로 바꾸기
용어 사전처럼 뜻만 적지 않았습니다. 값을 고른 다음 무엇이 달라지고, 언제 쓰고, 무엇을 조심하고, 화면 어디를 봐야 하는지 순서대로 답했습니다.
무엇이 달라지나요
고른 값이 사진을 어떻게 바꾸는지 먼저 말합니다.
추천 활용
이 설정이 잘 맞는 장면과 촬영 목적을 알려줍니다.
주의할 점
다른 설정과 같이 볼 부분이나 예상하기 어려운 결과를 미리 짚습니다.
프리뷰에서 볼 곳
인물 크기와 시선, 프레임 가장자리, 그림자처럼 확인할 지점을 알려줍니다.
선택부터 활용까지 짧게
- 01선택
촬영 대상·렌즈·구도·빛을 고릅니다.
- 02확인
3D 화면과 쉬운 설명이 바로 바뀝니다.
- 03활용
정리된 Camera Prompt를 복사합니다.
차분한 화면, 분명한 상태
설정 항목이 많아도 화면이 복잡해 보이지 않도록 흰색과 연한 회색을 사용했습니다. 파란색은 선택한 값과 주요 버튼에만 적용해, 현재 상태와 다음 행동이 바로 보이도록 했습니다.
Action#0071E3Pressed#0066CCSelected#E8F3FFInk#1D1D1FCanvas#F5F5F7Surface#FFFFFFMuted#6E6E73Line#D9D9DE
사람제품
같은 흐름 안에서 필요한 설정만 바꾸기
인물과 제품을 완전히 다른 도구로 만들지는 않았습니다. 카메라, 구도, 프리뷰, Camera Prompt 흐름은 그대로 두고 인물에서는 얼굴과 시선, 제품에서는 재질과 조명만 바꿔 보여줍니다.
현재 상태를 놓치지 않게
설정이 많고 화면도 길어서 고른 값을 외우게 해서는 안 된다고 봤습니다. 지금 무엇을 골랐는지 계속 보여주고, 잘못 건드렸을 때 바로 되돌릴 수 있게 했습니다.
바뀐 값을 계속 보여주기
- 상단의 현재 카메라 설정 요약
- 프리뷰 안의 렌즈·조리개·화면 비율 표시
- 선택 버튼과 LIVE 상태의 분명한 구분
- 전체 초기화와 얼굴 방향 초기화 제공
구조와 이름으로 이해할 수 있게
- 설정·프리뷰·설명을 별도 영역으로 구분
- 콤보박스에 항목 이름과 도움말 연결
- 슬라이더 값은 상태 텍스트로 함께 표시
- 선택 버튼은 눌린 상태를 전달하도록 구성
이 내용은 실제 화면의 영역 구분과 상태 표시를 바탕으로 정리했습니다. 정식 접근성 감사나 별도의 사용자 테스트를 마쳤다는 뜻은 아닙니다.
Responsive web
화면이 작아져도 흐름은 그대로
데스크톱 화면을 그대로 줄이면 프리뷰가 너무 작고 설정만 길어졌습니다. 1206px 아래에서는 3D 프리뷰를 먼저 보여주고, 설정과 설명은 아래에서 필요한 순서대로 열어보게 바꿨습니다.
Solution
주요 기능
숫자를 입력하고 끝나는 계산기보다, 값을 바꾸는 순간 화면과 설명이 같이 움직이는 작업 공간에 가깝게 만들었습니다.
주요 기능실제 lenssy.kr 화면에서 기능을 설명하는 데 필요한 부분만 다시 정리했습니다.
01 · Camera & Subject
구도와 시선 맞추기
렌즈와 프레이밍으로 화면에 담길 범위를 맞춘 뒤, 카메라 위치와 얼굴 방향, 시선은 따로 움직일 수 있게 했습니다. 옆모습이나 어깨 너머 구도처럼 방향이 헷갈리기 쉬운 장면도 프리뷰에서 바로 확인할 수 있습니다.
- 보이는 범위와 거리 맞추기
- 몸·얼굴·시선 따로 조절
02 · Product & Light
제품에 맞게 빛 조절하기
제품 표면이 유리인지 금속인지에 따라 반사와 빛의 느낌이 달라집니다. 빛의 위치와 세기, 부드러움을 바꾸면서 라벨은 가리지 않고 제품 형태가 잘 보이는 지점을 찾을 수 있습니다.
- 재질에 맞게 반사 조절
- 빛의 세기·부드러움·색 조절
03 · Prompt
설정을 촬영 문장으로 바꾸기
선택값을 그대로 나열하지 않고, 거리감과 촬영 범위, 빛과 그림자가 어떻게 보여야 하는지 문장으로 풀어줍니다. 한국어와 영어 중 필요한 문장을 바로 복사할 수 있습니다.
- 설정을 바꾸면 문장도 함께 변경
- 한국어·영어로 바로 복사
Release
공개한 결과
9.1K최근 30일 Cloudflare 네트워크 요청
81%랜딩 대비 /lab 조회 수준
1.04s최근 30일 평균 페이지 로드
랜딩에서 작업 화면까지
- 랜딩페이지 160회 조회
- /lab 작업 화면 130회 조회
- 방문당 평균 1.61페이지
1초대로 빠르게 열리는 화면
- 평균 페이지 로드 약 1.04초
- LCP 75백분위 1.89초
- 데스크톱 66.7% · 모바일 33.3%
수치는 Cloudflare Web Analytics의 최근 30일 자료입니다. 81%는 랜딩페이지와 /lab 조회 수를 단순 비교한 값이라 정확한 전환율은 아닙니다. 새로고침과 재방문이 섞일 수 있습니다. 9.1K 역시 이미지와 스크립트, 자동 요청을 포함한 네트워크 요청 수로 방문자 수와는 다릅니다.
