@ 외주 턴키2026Full-Stack
AI Career Diagnosis App for Retirees
MVP shipped in 2 months (solo full-stack). Validated: 4.6 on Google Play, 1,000+ downloads.
View details
AI Product Engineer
★ Case 06 / 7Product Engineer Donghyun Kang
Studio 808 Self-Photo Studio Landing
Treated a contract landing as the tone, the flow, and the funnel together — not just a build.
외주 턴키Full-Stack2022.08 ~ 2022.10
── The mission as given ──
“Build the brand landing page for the self-photo studio Studio 808.”
01.Discover
A common landing-page contract. The catch: the user enters from Instagram and reads the tone first.
The brief was simple — build the landing page for Studio 808, a self-photo studio. A common build request, the kind you can finish by filling in a few sections.
There was a behavior hypothesis though — most self-photo-studio users come in from Instagram and let the tone of the first screen decide the next click. The page needed to carry an atmosphere, not deliver information; design, information structure, interaction, and the booking flow all had to come out of the same decision, not separate ones.
Field notes
Note 01
The contract arrived as a build request
But the actual output had to carry the tone right before conversion.
Note 02
One-shot contract without a designer
Design, information structure, interaction, and code — all on one person.
Note 03
Instagram-entry user hypothesis
Mobile-first, flow designed around tone and atmosphere.
02.Build with AI
Used Framer Motion as tone visualization, not as motion.
Decision 01
Layout, color, typography = tone made visible
Carried the self-photo studio mood into color, typography, and whitespace. With no designer, I composed the client's references and the category tone myself and decided from there.
tradeoffNo designer vs. a tight schedule
Decision 02
Section order = Instagram → booking flow
Hero → gallery → pricing → location → booking. Designed the path from Instagram entry to the moment before booking. Held the tone flow before stacking on more information.
tradeoffInformation density vs. the flow of the tone
Decision 03
Framer Motion as a thinking tool
Not just fade-ins. Page entry, scroll triggers, and gallery-transition timing were decided as part of the tone. The interaction carried information together with the mood.
Decision 04
Solo full-stack decision cycle
Design, information structure, interaction, Next.js implementation, and deploy — all on one hand. Inside a short contract schedule, the core of full-stack is keeping the decision-to-application cycle short.
03.Prove with metrics
Only what was held by the decision.
Tone consistency
Held
Design, information, and interaction in one decision
User flow
Instagram → booking
Funnel shaped through section order
Interaction decision
Tone made visible
Framer Motion carries the mood
After the contract
Operable state
Next.js + static deploy
What this case is really about
“A product engineer who treats a contract landing as the tone, the flow, and the funnel together — not just a build.”
Define
Reframed the brief from "deliver a landing page" into "deliver the funnel that carries the tone."
Build
Ran design, information structure, interaction, and implementation through a single decision cycle.
Prove
Handed off with the tone and the flow intact end-to-end.
Linked principlesTone-as-SystemSingle Cycle
More work
