App · Web · System portfolio

동네 산책 앱부터
공장 관제 시스템까지

일곱 개의 모바일 앱, 결제와 채팅이 들어간 웹 서비스, 그리고 제조 · 빌딩 · 로봇 관제 시스템. 기획과 디자인에서 멈추지 않고, 실제로 동작하는 화면까지 만듭니다.

7모바일 앱
3웹 서비스
4업무 시스템
706직접 촬영한 화면

01 · App

모바일 앱

카테고리마다 문제를 다시 정의하고 각자의 디자인 언어로 그렸습니다. 모든 화면은 실제로 동작하는 HTML 프로토타입에서 촬영했고, 디자인 토큰 · 에셋과 함께 Flutter 개발로 넘길 수 있게 정리했습니다.

App 01인디 독서 기록 앱

dogear.

읽던 곳을 접어두세요

책 모서리를 접는 조용한 몸짓을 기록의 단위로 삼았습니다. 한 번 읽을 때마다 모서리가 접히고, 표지 없는 책도 타이포 표지와 책등으로 서재에 꽂힙니다.

독서 기록앰비언트 몰입 모드생성형 표지
화면 76장 보기

App 02몰입형 사운드 앱 · 집중 · 수면

roomtone

좋았던 곳의 공기를, 지금 여기로

30초 녹음 → 이음매 없는 루프 → 내 주변 공간에 배치. 소리 하나하나를 손으로 끌고 던지는 물체로 만들어, 듣는 경험을 만지는 경험으로 바꿨습니다.

공간 음향 · HRTF셰이더 사운드 오브젝트녹음 → 루프
화면 64장 보기

App 03캐릭터 성장 · 색 수집 산책 앱

색채집

걷다가 만난 색을 채집해요

‘무엇을 보았나(알아차림)’를 보상합니다. 모두에게 같은 오늘의 색을 찾아 꼬물이에게 먹이고, 모은 12색이 그대로 나비의 날개가 됩니다.

캐릭터 성장카메라 색 채집오늘의 색 테마
화면 74장 보기

App 04냉난방 · 설비 A/S 현장 앱 (B2B)

다녀감

다녀간 곳이 단골이 됩니다

현장 한 건을 7단계로 끝내고, 장비에 붙인 QR 스티커가 다음 A/S 요청을 받아 오며, 12개월 수요 레이더가 성수기 전에 미리 부를 고객을 알려 줍니다.

현장 7단계QR 장비 스티커수요 레이더
화면 110장 보기

App 05몸 시계 기반 플래너

제때

할 일에도 제때가 있어요

각성 모델로 하루의 기운 곡선을 예측하고, 짧은 체크인으로 내 곡선을 보정하며, 할 일을 맞는 시간에 자동으로 놓습니다. 중요한 날에는 그 시각에 한창이 오도록 수면을 미리 옮깁니다.

각성 모델할 일 자동 배치D-day 맞추기
화면 90장 보기

App 06동네 산책 영역 앱

한땀

자주 걷는 길이 내 땅이 되는 산책

자주 걷는 사람이 이기는 규칙(하루 한 땀, 28일)과 차·자전거 속도 제외, 이웃에게는 하루 늦게 조각으로만 보이는 위치 약속. 조각보는 경쟁이 아니라 함께 채우는 것.

지도 · 조각보하루 한 땀 규칙위치 약속
화면 106장 보기

App 07친구 모임 · 소셜 이벤트 앱

자리

‘언제 한번’을 진짜 약속으로

성사 인원을 정하고, 모이면 짠! 확정, 안 모이면 조용히 접힙니다. 패스는 이름 없이 숫자로만 보입니다. “다른 사람이 N명 이상이면 갈게” 조건부 콜이 연쇄로 자리를 채웁니다.

성사 인원조건부 콜막차 시계
화면 100장 보기

How we work

작업 방식

보기 좋은 시안에서 멈추지 않고, 운영하는 사람과 다음 개발자가 그대로 이어받을 수 있는 결과물까지 만듭니다.

01기획 · 리서치

누가 어떤 순서로 무엇을 보고 결정하는지부터 정리합니다. 업무 시스템은 현장의 운영 흐름을, 서비스는 사용자의 첫 경험을 먼저 그립니다.

02UX/UI 디자인

관제 · 업무 화면은 밀도와 판독성, 서비스와 앱은 브랜드의 톤. 프로젝트마다 디자인 언어를 새로 만들고 같은 모양을 두 번 쓰지 않습니다.

03동작하는 화면

시안에서 멈추지 않고 실제로 돌아가는 프런트엔드 · 프로토타입으로 화면 전환과 상태를 손으로 만져 보며 검증합니다.

04풀스택 개발

Next.js · Supabase로 인증, 실시간 채팅 · 알림, 정기구독 결제, 다국어, 관리자 페이지와 감사 로그까지 구현합니다.

05품질 검수

Playwright로 전 화면을 촬영하고 흐름을 검증합니다. 글자 대비, 터치 영역, 좁은 화면 넘침을 확인합니다.

06배포 · 인수인계

Vercel 배포와 운영자 매뉴얼, 앱은 디자인 토큰과 Flutter 이전 가이드까지 함께 넘겨 다음 사람이 바로 이어받게 합니다.