Studio Gonggan
DESCRIPTION
Interior Agency Website
DURATION
Jan 2026 - Feb 2026
MY ROLE
- Full-stack Development: Next.js and Supabase admin dashboard for portfolio upload and inquiry management, plus the i18n architecture for overseas clients.
- Performance Engineering: AVIF/WebP auto-conversion and a caching strategy for Lighthouse 95+, an SEO score of 100, Search Console registration and structured data.
- UX/UI Design: a web interface built on the studio's architectural thinking, and an admin UI that stays intuitive to use.
TECH
Next.js · TypeScript · Tailwind CSS · next-i18n
GSAP · Lenis · Framer Motion
Supabase · Vercel
Google Search Console · Lighthouse CI
Project Purpose
"Global Minimalist Architecture." Translating Studio Gonggan's design philosophy into a website was the easy half. The harder requirement was that the studio should be able to run it — publish projects, answer inquiries, reach clients in another language — without calling anyone. So the aesthetic side and the operational side were held to the same standard, and the admin was treated as part of the brand rather than as tooling behind it.
Scope
- · Brand Identity Web Migration
- · Global i18n Support
- · Integrated Admin System Build
- · SEO Optimization
Key Technical Features
Integrated Admin & CRM System
- · A dashboard where the studio creates, edits and removes project imagery and copy without developer involvement.
- · Consultation inquiries are stored with a status — received, in progress, closed — so nothing falls through a mailbox.
Global Localization Engine
- · Middleware reads browser language and switches Korean and English automatically, with the multilingual SEO structure set up behind it.
- · Projects registered in the admin map cleanly to each language rather than being duplicated per locale.
Performance & SEO
- · Code splitting, font optimization and deferred scripts hold Lighthouse above 95.
- · JSON-LD structured data takes the technical SEO score to 100, with Search Console integration covering the sitemap and robots.txt.
Atmospheric Scroll Experience
- · Lenis and GSAP add weight and parallax, which is how a two-dimensional screen ends up with depth.
Design Points
Restrained Typography
A sans chosen for legibility and form, with the decorative options left out — clarity is the studio's own argument, so the type makes it too.
The Aesthetics of Emptiness
Bold spacing between content lets the visitor feel the studio's actual subject, space, while keeping a long page easy on the eye.
Functional UI
The admin holds the same tone and manner as the public site, so the brand does not change character the moment the client goes backstage.
Gallery
Click to enlargeFAQ
How is a 3D interactive website different from a regular one?
It runs Three.js and WebGL in the browser, so objects move and respond to the cursor and scroll. A regular site organises information; an interactive one delivers the brand as an experience. It pays off most in fashion, beauty, architecture and exhibitions.
How long does a website take to build?
Seven days for a landing page, fifteen for a five-page company site, thirty for a ten-page 3D interactive build. The clock starts when your material arrives and shifts with design feedback. If a date is fixed, say so at the first call and feasibility is checked first.
Are hosting, domain and server costs separate?
SSL certificate, hosting setup and database provisioning are included at no cost. You only pay for the domain, about ₩20,000–30,000 a year. Accounts are created in your name from the start, so nothing lapses when staff change.
Can I edit the content myself after launch?
An admin page is built alongside the site, so text, images and posts can be edited without development knowledge, and a manual is handed over at delivery. Only structural changes or new features need development.