NAVER · KAKAO · RCS · 문자메시지를 통합 관리하는 B2B 메시징 서비스의 정보 구조와 인터페이스를 설계했습니다.
기획 요구사항과 기존 서비스 구조를 함께 검토하며 화면의 정보 위계와 UI 구조를 정리했습니다.
반복되는 구조는 공통된 인터페이스 규칙으로 디자인하여, 실제 서비스에 적용했습니다.
UX / UI Design
UI System & Components
Front-end Implementation
기능이 추가되고 화면이 확장되는 B2B 플랫폼의 특성을 고려해, 일관된 인터페이스를 구축하는 데 중점을 두었습니다.
서로 다른 메시징 채널의 기능을 하나의 흐름 안에서 이해할 수 있도록 화면 구조를 정리했습니다.
탐색, 선택, 입력, 데이터 확인 등 반복되는 인터페이스를 공통 패턴으로 정리해 화면 간 일관성을 높였습니다.
기존 기획 의도를 유지하면서, 사용성과 일관성을 높이는 방향으로 UI를 개선했습니다.
개별 화면을 만드는 것보다, 전체의 흐름과 반복되는 구조와 UI 규칙을 먼저 정리하는 데 집중했습니다.
반복되는 구조를 공통 UI 패턴으로 정리해 새로운 기능에도 일관되게 적용할 수 있도록 디자인했습니다.
한/영 구분없이 띄어쓰기 포함 360자 텍스트 + 이미지 1장 + 링크 버튼 최대 2개 + 쿠폰
한/영 구분없이 띄어쓰기 포함 2,000자 텍스트 + 이미지 1장 (선택)
필요한 정보가 한 화면에 밀집되는 만큼, 정보의 중요도와 관계를 빠르게 파악할 수 있는 것을 중점으로 생각하여 각 화면들을 구성했습니다.
채널·카테고리·심사상태·수정일 등 다양한 정보가 한 화면에 표시되는 만큼, 정보가 복잡하게 느껴지지 않도록
컬럼과 간격을 정리하고 반복되는 관리 기능은 간결한 형태로 디자인하였습니다.
밑줄이 있는 텍스트는 클릭하여 상세 정보를 확인하거나 수정할 수 있습니다.
발송 성공률과 주요 수치를 상단에 배치하여 현재 상태를 빠르게 파악할 수 있도록 하고,
상세 데이터는 그 아래에 구성하여 정보의 중요도에 따라 자연스럽게 읽히도록 디자인하였습니다.
운영 중인 B2B 서비스에서는 요구사항과 기존 구조를 검토하며 인터페이스를 설계하고 구현 과정까지 진행했습니다.
브랜드 웹사이트에서는 기획부터 디자인, 반응형 구현까지의 전 과정을 담당했습니다.
정보 구조 및 사용 흐름 설계
UI 디자인 및 정보 위계 설계
UI 컴포넌트 및 패턴 설계
프로토타입 및 기획 협업
프론트엔드 구현
요구사항을 단순히 화면으로 옮기기보다 기존 서비스 구조와 개발 환경을 함께 고려해 정보 위계와 사용 흐름을 정리하고, 구현 가능한 인터페이스로 연결했습니다.
구조 기획
웹 디자인
반응형 디자인
프론트엔드 구현
AI 비주얼 제작
웹사이트의 구조와 비주얼 방향을 직접 정의하고, 반응형 디자인과 구현, 비주얼 콘텐츠 제작까지 하나의 경험으로 연결했습니다.
기업 웹사이트와 서비스 안내 페이지를 디자인하고, 데스크톱과 모바일 환경에 맞춰 반응형 웹으로 구현했습니다.
메인 페이지와 서비스 안내 페이지를 디자인하고, HTML·CSS·JavaScript를 활용하여 직접 구현했습니다.
Midjourney, ChatGPT, Gemini를 활용해 웹사이트에 필요한 비주얼 이미지,요소들을 제작하고 실제 페이지에 적용했습니다.
모바일에서는 불필요한 모션과 요소를 줄이고, 콘텐츠 구조를 단순화해 더 가볍고 편하게 사용할 수 있도록 구현했습니다.