문제를 분석하고 정보를 구조화해
사용자가 이해할 수 있는 화면으로 만듭니다.
STRUCTURE
CLARITY
EXPERIENCE
ABOUT ME
웹 개발 경험을 바탕으로 기능과 운영 환경을 이해하고,
콘텐츠 제작 경험을 바탕으로 정보의 순서와 시각적 위계를 설계합니다.
요구사항 정리 · 정보 구조
UI 디자인 · 프론트엔드 개발
배포 · 도메인 · 검색 노출
자료 분석 · 핵심 메시지 정의
스토리라인 · 정보 위계
다이어그램 · 디자인 시스템
타깃 및 목적 분석
콘텐츠 구성 · 카피라이팅
컬러 · 서체 · 레이아웃
WORK PRINCIPLE
문제를 정의하고 정보를 구조화해, 실제 실행과 운영까지 연결합니다.
01
DEFINE
무엇이 전달을 방해하는지
먼저 찾아냅니다.
02
STRUCTURE
핵심과 보조 정보를 나누고
정보의 흐름을 설계합니다.
03
VISUALIZE
정보에 맞는 레이아웃과
시각 요소를 결정합니다.
04
OPERATE
배포와 검색 노출, 재사용
규칙까지 고려합니다.
CONTENTS
Product & UX/UI Design
3 PROJECTS
Information & Storytelling Design
5 PROJECTS
Promotion & AI Art Direction
3 PROJECTS
B2C PROMOTION
0905
기획부터 개발·배포까지, 실제 사용과 운영을 고려했습니다.
PLAN
DESIGN
DEVELOP
DEPLOY
WEB ─ iTeach · 2023
분산되어 있던 회원 관리, 온라인 교육, 시험 접수, 공지·Q&A 업무를 하나의 서비스에서 운영할 수 있도록 구조를 설계하고 개발했습니다.
MY ROLE
서비스·데이터 구조 설계
Backend · Frontend 개발
관리자·사용자 화면 구현
WAR 패키징 및 서버 배포
WEB ─ iTeach · FEATURE
기능 목록보다 운영 흐름과 각 영역에서 해결한 문제를 중심으로 정리했습니다.
01
MEMBER & AUTH
인증 흐름과 회원 생명주기를 설계했습니다.
02
CONTENT OPERATION
공통 코드와 카테고리 구조로 중복 구현을 줄였습니다.
03
SEARCH & APPLY
접수 기간에 따라 상태가 자동 표시되도록 구현했습니다.
WEB ─ iTeach · TECHNICAL DECISION
기능 구현보다 실제 운영 조건과 유지보수 가능성을 기준으로 기술적 선택을 했습니다.
DECISION
EAV 데이터 구조 적용
RESULT
공통 구조에서
새 게시판 확장
DECISION
SQL에서 현재 시각과
접수 기간 비교
RESULT
스케줄러 없이
상태 표시
DECISION
BLOB 저장 ·
Base64 변환
RESULT
별도 파일 서버 없이
통합 관리
DECISION
Decoder
유틸리티 구현
RESULT
형 변환 ·
Null 오류 방지
이 경험은 이후 디자인 작업에서도 기능 가능성과 운영 조건을 함께 판단하는 기반이 되었습니다.
WEB ─ CHAEUM119 · 2026
온라인에서 업체와 서비스를 설명할 수단이 없던 채움119를 위해, 서비스 안내부터 상담 문의까지 연결되는 반응형 랜딩페이지를 제작했습니다.
USER FLOW
PERIOD
2026.03.09–03.10기획부터 배포까지 진행TECH
Next.jsTailwind CSS · VercelRESULT
LIVE실제 운영 환경 구축
CHAEUM119 ─ FEATURE OVERVIEW
필요성 설명부터 신뢰 형성, 문의 행동까지 하나의 사용자 흐름으로 연결했습니다.
01
INFORMATION
방문자가 서비스의 필요성부터 이해하도록 읽는 순서를 설계했습니다.
02
TRUST
설명만 나열하지 않고 실제 경험과 사례로 신뢰를 보완했습니다.
03
CONVERSION
모든 정보가 최종적으로 상담 문의로 이어지도록 동선을 연결했습니다.
CHAEUM119 ─ TECHNICAL DECISION
화면을 만드는 데서 끝내지 않고, 실제 운영과 유지에 필요한 조건까지 함께 판단했습니다.
기능 구현 가능성과 유지 비용을 함께 판단해 클라이언트가 장기간 운영할 수 있는 방식을 선택했습니다.
WEB ─ AWESOME · MOBILE UX
PC 편집 화면에서는 정상적으로 보였지만, 실제 모바일에서는 텍스트와 이미지가 잘리고 메뉴와 문의 흐름이 비효율적으로 노출되는 문제를 개선했습니다.
AWESOME ─ UX IMPROVEMENT
첫 화면의 메시지부터 콘텐츠 탐색과 문의 행동까지, 실제 모바일 사용 흐름에 맞게 구조를 다시 정리했습니다.
01
HERO & HEADER
브랜드 메시지가 모바일 첫 화면에서도 잘리지 않고 전달되도록 수정했습니다.
02
READABILITY
데스크톱 중심의 다단 구조를 모바일에서 읽기 쉬운 흐름으로 바꿨습니다.
03
NAVIGATION & CTA
콘텐츠 탐색 이후 문의 행동까지의 거리를 줄였습니다.
AWESOME ─ TECHNICAL DECISION
기존 디자인 의도는 유지하면서, 실제 모바일 환경에서 문제가 발생하는 구조만 선별해 수정했습니다.
편집 화면이 아닌 실제 사용 환경을 기준으로 확인하고, 디자인 의도를 유지하면서 기능적으로 안정적인 화면을 구현했습니다.
15
자료를 읽고 핵심 관계를 다시 설계해,
보이는 것만으로도 흐름을 이해하게 만듭니다.
RESEARCH
HIERARCHY
STORYLINE
VISUAL
SYSTEM
PRESENTATION ─ AQUAWISE · PROPOSAL REDESIGN
디지털 수도계량기 중심으로 보이던 기존 제안서를 PCB 설계·제조·AI·시스템 통합 역량을 갖춘 기술기업의 관점에서 다시 구조화했습니다.
AQUAWISE ─ REDESIGN STRATEGY
단순한 스타일 변경이 아니라, 기업이 무엇을 하는 회사인지부터 어떤 순서로 제안을 이해해야 하는지까지 다시 정의했습니다.
01
REPOSITIONING
수도계량기를 기업 정체성 자체가 아닌, 보유 기술을 적용하는 산업 솔루션 중 하나로 재정의했습니다.
설계·생산·서비스까지 기업의 사업 범위를 확장해 보여줍니다.
02
INFORMATION ARCHITECTURE
기업 역량을 먼저 이해한 뒤 기존 방식의 문제와 디지털 전환의 필요성, 기대가치와 근거로 이어지도록 재구성했습니다.
데이터를 별도로 해석하지 않아도 제안의 필요성이 자연스럽게 이어집니다.
03
VISUAL SYSTEM
네이비·시안 컬러, PCB 회로 패턴, 라인 아이콘과 여백 규칙을 공통 시각 언어로 설정했습니다.
표지의 Impact와 본문의 Readability 역할을 분리했습니다.
PROPOSAL STORYLINE
AQUAWISE ─ COMPANY
개별 정보로 흩어져 있던 기업 역량을 DESIGN → MANUFACTURING → SERVICE의 One-stop Process로 연결했습니다.
AQUAWISE ─ PROBLEM
긴 설명을 그대로 축약하지 않고 문제의 성격을 분류해, 제안이 해결해야 할 대상부터 명확하게 보이도록 바꿨습니다.
AQUAWISE ─ DIGITAL TRANSITION
데이터를 병렬로 보여주는 대신 Problem → Transition → Value → Evidence 순서로 재배치해 제안의 필요성과 기대가치가 자연스럽게 이어지도록 했습니다.
PRESENTATION ─ KISA · CONVERGENCE SECURITY STRATEGY
정책의 의미와 데이터는 유지하면서, 흩어진 정보의 관계를 다시 정의해 하나의 메시지에서 세부 내용으로 자연스럽게 내려가도록 구조를 재설계했습니다.
KISA ─ REDESIGN STRATEGY
정책 내용을 덜어내지 않고도 이해 속도를 높일 수 있도록, 모든 페이지에 반복 적용할 수 있는 네 가지 설계 원칙을 정의했습니다.
01
HIERARCHY
제목·데이터·설명이 동시에 경쟁하지 않도록 Key Message를 가장 먼저 인지하게 했습니다.
KEY MESSAGE → STRUCTURE → DETAIL
02
RELATION
도형과 화살표부터 그리지 않고 원인·대응·기관 역할 등 정보의 실제 관계를 먼저 정의했습니다.
MEANING → RELATION → VISUAL
03
VISUAL SYSTEM
Navy·Blue·Teal·Yellow에 역할을 부여하고 페이지마다 같은 규칙으로 사용했습니다.
TRUST · DIGITAL · CONNECTION · CORE
04
READING PATH
Grid·Card·Line을 반복 사용해 페이지가 달라져도 같은 방식으로 읽을 수 있게 했습니다.
STRUCTURE → DETAIL → CONCLUSION
KISA ─ 01 · DEFINITION
보안 현황·사고 피해·대응 역량을 3 Gaps로 분류하고 Model·Diagnosis·Policy와 연결해 원인과 대응 방향이 한 번에 보이도록 했습니다.
KISA ─ 02 · FRAMEWORK
중앙의 검토 체계를 Core로 두고 발굴·조성·적용·확산의 역할과 진행 방향을 구분해 반복 가능한 정책 프레임워크로 전환했습니다.
KISA ─ 03 · BEST PRACTICE / PROJECT RESULT
각 기관의 역할을 따로 설명하는 대신, 보안 인증이 실제 허가·심사로 어떻게 연결되는지 관계 중심으로 보여주며 프로젝트 전체 설계 원칙을 마무리했습니다.
PRESENTATION ─ NOVENTIX · BUSINESS PLAN REDESIGN
표와 텍스트 중심의 기존 자료에서 정보의 우선순위와 관계를 다시 정의하고, 기업의 규모·기술·사업 구조가 빠르게 읽히도록 페이지별 흐름을 재설계했습니다.
NOVENTIX ─ REDESIGN STRATEGY
긴 사업계획서에서도 같은 방식으로 핵심을 읽을 수 있도록, 페이지마다 반복 적용할 수 있는 네 가지 설계 원칙을 정의했습니다.
01
HIERARCHY
표와 긴 설명보다 Key Message와 KPI가 먼저 보이도록 정보 단위를 분리했습니다.
MESSAGE → METRICS → DETAIL
02
SIMPLIFICATION
3D Chart와 복잡한 화살표를 줄이고 실제 의미와 진행 방향이 보이는 구조로 바꿨습니다.
DATA → RELATION → VISUAL
03
VISUAL SYSTEM
Warm Ivory·Charcoal을 기본으로 두고 Tech Lime은 숫자·키워드·흐름에만 제한했습니다.
PREMIUM · TECHNOLOGY · CORE
04
CONSISTENCY
Light/Dark Page와 공통 Grid·Icon 규칙을 구축해 긴 문서에도 일관된 리듬을 만들었습니다.
STRUCTURE → DETAIL → RESULT
NOVENTIX ─ 01 · COMPANY OVERVIEW
회사 정보를 핵심 지표와 사업 영역으로 분리해, 표 전체를 읽지 않아도 기업의 규모와 핵심 역량을 빠르게 파악하도록 설계했습니다.
NOVENTIX ─ 02 · COMPANY HISTORY
실제 이벤트가 있는 시점을 중심으로 연혁을 다시 정리하고, Lime Line Icon과 시각적 타임라인으로 기업의 성장 서사가 먼저 보이도록 했습니다.
NOVENTIX ─ 03 · BUSINESS MODEL / PROJECT RESULT
한국 제조사·사우디 정부·현지 파트너·NOVENTIX의 관계를 단일 Process Flow로 단순화하고, 주요 성과 수치를 함께 배치해 사업 구조와 결과가 한 화면에서 읽히도록 했습니다.
PRESENTATION ─ IR PITCH DECK · INVESTMENT STORY SYSTEM
투자자가 짧은 시간 안에 문제·해결책·시장성·성과·팀·투자 요청을 이해하도록, 실제 IR의 의사결정 순서를 기준으로 전체 덱의 읽는 흐름을 설계했습니다.
IR PITCH DECK ─ 01 · PROBLEM / SOLUTION
동일한 카드 구조로 문제를 빠르게 스캔하게 하고, Solution에서는 핵심 문장과 기능의 크기 차이를 통해 답이 한눈에 보이도록 설계했습니다.
IR PITCH DECK ─ 02 · MARKET / TRACTION
Market은 기회의 크기를 단계적으로 보여주고, Traction은 핵심 KPI를 한눈에 비교하도록 구성해 가능성과 실적의 관계를 짧은 시간 안에 이해하게 했습니다.
IR PITCH DECK ─ 03 · TEAM / ASK / SYSTEM
Team과 Investment Ask를 마지막 의사결정 단계로 묶고, 전체 덱을 Card·Label·Metric 단위의 재사용 시스템으로 정리했습니다.
신뢰와 전문성을 유지하면서 실제 투자 설명의 읽기 순서를 반영한, 재사용 가능하고 확장 가능한 7-page IR Pitch Deck 시스템을 설계했습니다.
PRESENTATION ─ STORY IP PITCH DECK · NARRATIVE DESIGN
작품의 감정과 장르를 잃지 않으면서도 첫인상·이야기·인물 관계·갈등·시장성을 짧은 시간 안에 이해하도록 IP 제안의 읽는 순서를 설계했습니다.
STORY IP PITCH DECK ─ 01 · SYNOPSIS / HOOK
시놉시스를 바로 설명하지 않고 Hook을 독립된 최상위 정보로 올려 작품의 핵심 설정을 먼저 이해한 뒤 상세 내용을 읽게 했습니다.
STORY IP PITCH DECK ─ 02 · CHARACTER / RELATIONSHIP
두 개의 프로필 카드 사이에 관계 정보를 독립된 요소로 배치해 개별 설정과 두 사람이 만드는 서사를 동시에 이해하도록 설계했습니다.
STORY IP PITCH DECK ─ 03 · ARC / MARKET / SYSTEM
감정적 긴장의 절정을 만든 뒤 장르 데이터와 플랫폼 적합성으로 연결해, 작품성과 사업성이 분리되어 보이지 않도록 구성했습니다.
작품의 첫인상에서 관계·갈등·시장성까지 관심이 자연스럽게 이어지는, 장르 확장이 가능한 5-page Story IP Pitch Deck 시스템을 설계했습니다.
35
브랜드의 목적과 사용 환경을 이해하고,
메시지가 직관적으로 전달되는 시각 콘텐츠를 설계합니다.
PURPOSE
MESSAGE
VISUAL
DELIVERY
SOCIAL CAMPAIGN ─ SUMMER BODY PROJECT · B2C SEASON PROMOTION
여름휴가를 앞두고 바디라인 관리를 고민하는 고객을 대상으로, 가격과 할인율을 강하게 자극하는 광고 대신 휴양지의 편안함과 프리미엄 클리닉의 신뢰를 결합했습니다.
SUMMER BODY PROJECT ─ 01 · ENTRY / PROGRAM
첫 장에서 계절의 분위기로 관심을 만들고, 두 번째 장에서 캠페인의 가치 메시지를 전달한 뒤 세 번째 장에서 실제 프로그램과 가격 정보로 자연스럽게 전환했습니다.
SUMMER BODY PROJECT ─ 02 · BENEFIT / ACTION
가격을 확인한 고객에게 추가 혜택을 제시하고, 추천 대상을 통해 프로그램과 자신의 상황을 연결하게 한 뒤 상담·예약 정보로 콘텐츠의 행동 흐름을 마무리했습니다.
SUMMER BODY PROJECT ─ 03 · SYSTEM / RESULT
감성 이미지를 장식으로만 사용하지 않고, 정보 전달·전문성·신뢰·행동 전환이 서로 충돌하지 않도록 카피와 타이포그래피, 컬러의 역할을 분리했습니다.
감성적인 시즌 이미지에서 프로그램 비교와 추가 혜택을 거쳐 상담·예약으로 이어지는 6단계 콘텐츠 흐름을 설계해, 의료 광고에 필요한 정보 전달력과 프리미엄 캠페인의 인상을 함께 구현했습니다.
AI CONTENT DESIGN ─ SUMMER WALK CHECKLIST · PET INFORMATION CARD NEWS
반려견 보호자가 여름 산책 전에 확인해야 할 행동을 다섯 가지로 압축하고, 생성형 AI의 초안을 그대로 사용하지 않고 캐릭터·소품·행동·아이콘까지 반복 검수하며 7장의 정보 콘텐츠로 완성했습니다.
SUMMER WALK CHECKLIST ─ 01 · ATTENTION / PRE-CHECK
표지에서 콘텐츠의 목적을 즉시 알리고, 노면 온도와 산책 시간처럼 집을 나서기 전에 판단해야 할 정보를 첫 번째 행동 단계로 배치했습니다.
SUMMER WALK CHECKLIST ─ 02 · PREPARE / ROUTE / WARNING
물과 휴식을 준비하는 단계에서 시작해 산책 경로를 선택하고 반려견의 상태를 확인하는 단계까지, 실제 산책 상황의 시간 순서에 맞춰 콘텐츠를 연결했습니다.
SUMMER WALK CHECKLIST ─ 03 · SAVE / RECAP
개별 행동 수칙을 모두 본 뒤, 마지막에는 다섯 가지 내용을 한 화면에서 다시 확인할 수 있게 해 SNS 정보 콘텐츠의 저장성과 재사용성을 높였습니다.
SUMMER WALK CHECKLIST ─ 04 · AI ART DIRECTION / RESULT
생성 결과를 그대로 채택하지 않고, 사람이 보기에 어색한 장면을 구체적으로 진단한 뒤 수정 가능한 언어로 분해해 반복 프롬프트에 반영했습니다.
생성형 AI의 결과를 그대로 채택하지 않고 표지의 역할, 인물의 동작, 리드줄의 연결, 반복 소품과 아이콘까지 검수했습니다. 시각적 문제를 구체적인 언어로 진단하고 수정 프롬프트로 전환해 초안을 실제 사용 가능한 콘텐츠로 발전시킨 AI Art Direction 프로젝트입니다.
AI WORKFLOW GUIDE · INFORMATION CARD NEWS
AI WORKFLOW GUIDE · CONTEXT / REUSE
AI WORKFLOW GUIDE · BREAK DOWN / REVIEW
업무 배경·목표·대상·결과 형식 전달
반복 업무를 요청 템플릿으로 구조화
큰 업무를 작은 실행 단계로 분해
AI의 첫 결과를 사람이 다시 검토
AI WORKFLOW GUIDE · ART DIRECTION / PROCESS
AI WORKFLOW GUIDE · DESIGN SYSTEM / RESULT
가장 먼저 읽히는 핵심 메시지
제목을 보완하는 짧은 설명
업무 흐름을 구조화하는 정보
실제 활용을 이해시키는 구체적 예시
생성형 AI를 자동 제작 도구가 아니라 빠른 시각화와 비교를 위한 제작 도구로 활용했습니다. 최종 완성도를 만든 것은 프롬프트 자체보다 콘텐츠 설계, 정보 위계, 시각적 문제 진단, 그리고 반복적인 수정 디렉션이었습니다.
PROJECT RESOURCES · DOCUMENTATION / SOURCE CODE
PROJECT DOCUMENTATION
웹페이지, 프레젠테이션, 콘텐츠 디자인 프로젝트의 기획 배경부터 정보 구조, 디자인 판단과 작업 과정까지 정리한 전체 프로젝트 문서입니다.
SOURCE CODE
DEVELOPMENT PROJECTS · GITHUB
