웹사이트·브랜드
기업 홈페이지, 브랜드 사이트, 랜딩 페이지와 반응형 디자인.
DESIGN × ENGINEERINGBUILT TO WORK. MADE TO STAND OUT.
감각적인 첫인상.
그 안에서 작동하는 기술.
AI가 대화하고, 데이터가 흐르고, 결제가 서비스로 이어지는 곳.
웹·앱·플랫폼의 디자인부터 복잡한 기능과 운영까지 만듭니다.
반응형 웹·웹앱AI · 실시간 데이터결제 · 구독 · 관리자다국어 · 외부 연동
01BUILT & OPERATED IN-HOUSE
설명보다 먼저,
작동하는 장면으로.
직접 제작한 일곱 가지 플랫폼·브랜드 웹.
각각의 경험과 구현 내용을 확인하세요.
7 PROJECTS · PC 영상 + 모바일 화면
PRODUCT IN MOTIONmasq.vision 1080p
01 / 캐릭터 순환
여섯 대리인의 캐릭터 순환부터 실제 무료 결과와 맞춤 해석까지 이어지는 브랜드 경험.
영상을 불러오지 못했습니다. 아래 전체 화면 갤러리에서 확인해 주세요.
- 브랜드 경험
- 디자인에서 상품 선택까지 이어지는 흐름
- 실제 구매와 제공
- 라이브 결제와 디지털 산출물
- 4개 언어
- 언어별 URL·콘텐츠·이용 경로
ON MOBILE · MASQ손끝에서 이어지는
손끝에서 이어지는
하나의 세계.
캐릭터를 고르고, 대화를 시작하는 순간까지. 작은 화면에서도 브랜드의 분위기와 사용 흐름이 자연스럽게 이어집니다.
반응형 모바일 웹 · 실제 이용 화면01 / 브랜드에서 캐릭터로
영상 대신 아래 장면별 화면으로 살펴보세요.
화면 하나씩 자세히 보기 전체 화면 갤러리 +
브랜드와 캐릭터
캐릭터·타이포그래피·어두운 색감으로 일관된 브랜드 경험을 설계.
몰입형 대화
장면과 대사, 단계별 조작이 이어지는 스토리 중심 인터랙션.
상품·다국어 구성
디지털 콘텐츠와 굿즈를 단계별 상품과 통화별 가격 안내로 연결.
PRODUCT IN MOTIONemailking.io 1080p
01 / 브랜드 첫인상
브랜드 화면과 기능 소개, 실제 입력에 반응하는 모바일 이메일 미리보기와 콘텐츠 허브.
영상을 불러오지 못했습니다. 아래 전체 화면 갤러리에서 확인해 주세요.
BUILT & OPERATED IN-HOUSE
EmailKing
데이터 처리부터 구독 결제, 작업 이력과 실시간 진행 상태까지. 매일 사용하는 운영 화면을 만들었습니다.
구현 내용 자세히 보기- 장시간 작업 처리
- 배치 작업과 실시간 진행 상태를 연결
- 구독·결제와 운영
- Stripe 결제, 작업 이력과 관리 화면
- 8개 언어
- 다국어 고객이 사용하는 SaaS 구조
ON MOBILE · EmailKing복잡한 도구도,
복잡한 도구도,
손안에서 바로.
입력한 메시지가 어떻게 보일지 바로 확인합니다. 모바일에서도 입력과 미리보기를 오가며 도구를 쉽게 사용할 수 있습니다.
반응형 모바일 웹 · 실제 이용 화면01 / 제품을 이해하는 첫 화면
영상 대신 아래 장면별 화면으로 살펴보세요.
화면 하나씩 자세히 보기 전체 화면 갤러리 +
운영 대시보드
사용량·작업 이력·실시간 상태를 한곳에서 관리하는 업무 화면.
서비스 랜딩
제품 설명에서 기능 체험과 가입까지 이어지는 SaaS 진입 경험.
미리보기 도구
입력한 내용을 모바일 알림과 메일 화면으로 확인하는 인터랙티브 도구.
PRODUCT IN MOTIONtradegod.io 1080p
01 / 캐릭터 순환
선명한 캐릭터 모션과 선택에 반응하는 단계별 진단을 실제 서비스 흐름으로 보여줍니다.
영상을 불러오지 못했습니다. 아래 전체 화면 갤러리에서 확인해 주세요.
- 조건별 진단
- 7문항 응답과 결과·제품 탐색 연결
- 데이터 검증
- Node.js 백테스트와 TradingView 검증
- 19개 언어
- 다국어 제품 경험과 결제 흐름
ON MOBILE · TradeGod선택하는 순간,
선택하는 순간,
다음 경험으로.
캐릭터가 이끄는 첫 화면에서 단계별 질문까지. 선택에 반응하는 화면과 분명한 진행 흐름으로 진단을 이어갑니다.
반응형 모바일 웹 · 실제 이용 화면01 / 캐릭터로 시작하는 진단
영상 대신 아래 장면별 화면으로 살펴보세요.
화면 하나씩 자세히 보기 전체 화면 갤러리 +
캐릭터 랜딩
캐릭터 선택과 메시지·컬러가 함께 바뀌는 브랜드 인터랙션.
단계별 진단
질문·응답·진행 표시를 시각적 세계관 안에 통합한 진단 흐름.
스토리형 콘텐츠
큰 타이포그래피와 섹션별 흐름으로 긴 콘텐츠를 읽게 하는 편집 디자인.
PRODUCT IN MOTIONcoinzen.ai 1080p
01 / 실시간 시장과 채팅
실제 시장 데이터와 커뮤니티 활동, 채팅 탐색과 종목 전환을 선명한 화면으로 이어갑니다.
영상을 불러오지 못했습니다. 아래 전체 화면 갤러리에서 확인해 주세요.
- 다중 AI 에이전트
- 500개 이상의 자율 에이전트와 사용자 피드
- 실시간 상호작용
- 채팅·알림·인기글·포인트 흐름
- 커뮤니티 운영
- 회원·콘텐츠·포인트 관리 도구
ON MOBILE · CoinZen실시간 대화가,
실시간 대화가,
화면의 중심에.
대화가 모이는 화면과 쌓인 이야기를 탐색하는 흐름. 채팅을 크게 살펴보고, 전체 화면에서는 시장 데이터와 함께 확인하세요.
반응형 모바일 웹 · 실제 이용 화면실제 모바일 화면의 채팅 영역을 확대해 보여줍니다.
01 / 공개 대화 살펴보기
영상 대신 아래 장면별 화면으로 살펴보세요.
화면 하나씩 자세히 보기 전체 화면 갤러리 +
실시간 커뮤니티
차트와 피드, 사용자 참여 흐름을 연결한 커뮤니티 화면.
데이터 탐색
거래소·조건별 탐색과 실시간 데이터를 연결하는 파인더 UI.
단계별 교육
난이도와 주제별로 학습 콘텐츠를 탐색하는 교육 서비스 구조.
PRODUCT IN MOTIONcoinmool.com 1080p
01 / 브랜드 첫인상
생생한 랜딩에서 거래소 비교·상세 정보·초보 가이드까지 이어지는 실제 탐색 경험.
영상을 불러오지 못했습니다. 아래 전체 화면 갤러리에서 확인해 주세요.
BUILT IN-HOUSE / CRYPTO SPECIALIZED
Coinmool
거래소 비교, 조건별 상세 정보와 초보 가이드를 직관적인 탐색 흐름으로 연결했습니다.
구현 내용 자세히 보기- 비교하기 쉬운 정보 구조
- 조건과 특징을 같은 카드 구조로 정리하고 상세 정보로 연결.
- 이해를 돕는 콘텐츠
- 가이드·FAQ·뉴스·이벤트를 서비스 안에서 탐색하는 구조.
- 확장 가능한 운영 화면
- API로 불러오는 비교 데이터와 반응형·다국어 인터페이스.
ON MOBILE · Coinmool비교부터 선택까지,
비교부터 선택까지,
한 손으로.
여러 조건을 비교하고, 관심 있는 항목의 상세 정보를 확인합니다. 모바일 카드와 설명이 하나의 탐색 흐름으로 연결됩니다.
반응형 모바일 웹 · 실제 이용 화면01 / 세로 화면에서 조건 비교
영상 대신 아래 장면별 화면으로 살펴보세요.
화면 하나씩 자세히 보기 전체 화면 갤러리 +
컬러풀한 첫인상
서비스 성격과 다음 행동을 분명하게 전하는 반응형 랜딩.
한눈에 보는 비교
조건과 혜택을 같은 정보 구조로 정리한 비교 카드.
단계별 가이드
처음 방문한 사용자가 이해하고 탐색할 수 있는 교육 콘텐츠.
PRODUCT IN MOTIONcoinfutures.info 1080p
01 / 브랜드와 비교
입력에 반응하는 계산기, 실제 시장 히트맵과 아카데미를 한 서비스에서 탐색합니다.
영상을 불러오지 못했습니다. 아래 전체 화면 갤러리에서 확인해 주세요.
BUILT IN-HOUSE / CRYPTO SPECIALIZED
CoinFutures
입력에 반응하는 계산기, 시장 데이터 시각화와 다국어 아카데미를 한 플랫폼에 구성했습니다.
구현 내용 자세히 보기- 입력에 즉시 반응하는 도구
- 가격·배율·방향 선택에 따라 결과가 바뀌는 계산기.
- 데이터가 보이는 대시보드
- 시장 히트맵과 분석 탭을 연결한 정보 탐색 화면.
- 지속적으로 쌓이는 콘텐츠
- 언어별 URL, 아카데미 카테고리와 상세 글을 연결한 콘텐츠 플랫폼.
ON MOBILE · CoinFutures숫자를 바꾸면,
숫자를 바꾸면,
결과가 바로.
조건 입력과 계산 결과, 시장 시각화까지. 데이터가 많은 서비스도 모바일에서 직접 조작하고 확인할 수 있도록 구성합니다.
반응형 모바일 웹 · 실제 이용 화면01 / 손끝으로 입력하는 계산기
영상 대신 아래 장면별 화면으로 살펴보세요.
화면 하나씩 자세히 보기 전체 화면 갤러리 +
비교 플랫폼의 첫인상
서비스 성격과 탐색 경로를 명료하게 보여주는 다국어 랜딩.
입력에 반응하는 계산기
조건 변경에 따라 계산 결과를 즉시 보여주는 인터랙티브 도구.
시장 데이터 시각화
히트맵·탭·분석 도구를 모은 마켓 대시보드.
PRODUCT IN MOTIONhighcrypto-website.vercel.app 1080p
01 / 브랜드 모션
자연스러운 히어로 모션부터 서비스·사례·인사이트까지, 실제 화면을 따라가는 브랜드 경험.
영상을 불러오지 못했습니다. 아래 전체 화면 갤러리에서 확인해 주세요.
BRAND WEBSITE / ARCHIVED PROJECT
HighCrypto
몰입감 있는 모션 히어로와 서비스·사례·인사이트를 연결한 글로벌 크립토 마케팅 웹사이트입니다.
구현 내용 자세히 보기- 기억에 남는 브랜드 모션
- 히어로 그래픽과 타이포그래피를 결합한 첫 화면.
- 여러 층으로 설명하는 전문성
- 서비스·사례·인사이트·캠페인을 탐색하는 콘텐츠 구조.
- 상담으로 연결되는 정보
- 글로벌 고객을 위한 영문 정보와 프로젝트 문의 흐름.
ON MOBILE · HighCrypto첫인상부터,
첫인상부터,
사례를 읽는 순간까지.
움직이는 브랜드 그래픽에서 프로젝트 카드와 상세 스토리로. 화면이 작아져도 브랜드의 개성과 정보의 흐름을 함께 유지합니다.
반응형 모바일 웹 · 실제 이용 화면01 / 브랜드 모션의 첫인상
영상 대신 아래 장면별 화면으로 살펴보세요.
화면 하나씩 자세히 보기 전체 화면 갤러리 +
브랜드 히어로
글로벌 Web3 고객을 위한 영문 랜딩과 살아 움직이는 그래픽.
사례 탐색 허브
카테고리와 이미지 중심으로 프로젝트 내용을 탐색하는 구조.
인사이트 콘텐츠
시장 분석과 업데이트를 축적하는 콘텐츠 허브.
만들고 싶은 서비스,
어디까지 생각하셨나요?
처음부터 전부 정하지 않아도 됩니다.
첫 출시에서 꼭 필요한 범위부터 함께 정합니다.
앱·웹앱
가입, 탐색, 예약, 알림 등 모바일 중심의 사용자 경험.
플랫폼·SaaS
회원과 권한, 결제·구독, 데이터·연동과 운영자 화면.
필요한 기능을,
하나의 흐름으로.
회원가입 뒤의 권한, 결제 뒤의 제공,
AI 뒤의 데이터와 운영까지 생각합니다.
01
회원 · 조직 · 권한
02
결제 · 구독 · 정산
03
예약 · 매칭 · 추천
04
AI · 데이터 · API
05
고객 · 콘텐츠 관리
06
다국어 · 검색 기반
앱의 구현 방식, 외부 연동, PG와 배포 환경은 필요한 기능과 예산을 확인해 정합니다. 첫 출시와 이후 확장을 나누어 가장 필요한 기능부터 준비합니다.
05MJ STUDIO / DESIGN COLLECTION
당신의 브랜드는
어떤 모습인가요?
깔끔한 기업 사이트부터 개성 있는 브랜드 경험까지.
다양한 디자인 예시에서 마음에 드는 방향을 찾아보세요.
모바일에서도 자연스럽게 이어지는 반응형 디자인으로 만듭니다.
EXPLORE THE COLLECTION 진행은 분명하게.
먼저, 사업을 이해합니다.
목표와 고객, 현재 자료를 확인하고 필요한 실행 범위를 정합니다.
직접 만들고 적용합니다.
기획·디자인·개발 또는 사이트 개선·콘텐츠 발행을 연결합니다.
운영하며 다음을 찾습니다.
실제 사용과 문의 흐름을 확인하고, 필요한 개선을 이어갑니다.
기획서가 없어도 문의할 수 있나요?
가능합니다. 만들고 싶은 서비스와 꼭 필요한 기능, 참고 화면이 있다면 알려주세요. 대상 고객과 첫 출시 범위를 함께 정리합니다.
견적은 무엇에 따라 달라지나요?
화면 수, 기능과 권한, 결제·외부 연동, 콘텐츠 준비 상태, 앱 배포 방식과 운영 범위에 따라 달라집니다. 합의한 범위와 인도물을 기준으로 제안합니다.
디자인만 의뢰할 수도 있나요?
가능합니다. 웹·앱의 화면 설계와 반응형 디자인 등 필요한 범위를 확인해 진행합니다. 디자인 예시에서 원하는 방향을 함께 찾아볼 수 있습니다.
제작 후 직접 운영할 수 있나요?
고객이 관리할 콘텐츠와 업무를 먼저 정하고 필요한 관리자 화면과 안내를 구성합니다. 소스·계정 인도, 유지보수와 수정 범위는 계약 단계에서 구분합니다.
NEXTLET’S MAKE IT HAPPEN
이제, 당신의 프로젝트를
이야기할 차례.
아이디어 한 줄도, 이미 운영 중인 서비스도 좋습니다.
지금 필요한 일부터 함께 정리합니다.