기업용 메신저 UI 디자인

2026년  2월

지란지교소프트에서 운영하는 기업용 메신저 솔루션의 기존 UI를 리디자인 하는 과정을 진행했습니다.

officechat solution iconofficechat solution advertisement image

PRODUCTs DESIGNED

OFFICECHAT

officechat emblem

기업의 소통 효율을 높이고 보안을 강화하는 데 최적화된 비즈니스 메신저 솔루션으로 채팅, 채널, AI 요약 기능을 제공하는 기업 전용 비즈니스 메신저입니다.

업무에 사용하는 메신저의 특성을 고려하여, 텍스트 중심의 깔끔한 가독성과 불필요한 장식을 배제한 직관적인 UI를 통해 사내 소통의 피로도를 낮추고, 업무 몰입도를 극대화하는 방향으로 디자인을 진행했습니다.

officechat mobile cyanogen
officechat mobile cyanogen

기업용 메신저 UI 모바일 버전.

MOBILE

UI

Thinking DESIGN

이런 생각으로 디자인이 진행되었습니다.

일반적인 사용자 흐름을 집중 하도록.

사용자가 어떤 요소를 어떻게 써야 할지 헤매지 않도록, 보편적인 사용자 모델을 참고하고, 가장 익숙하고 당연하게 느껴지는 흐름으로 구조를 구체화해 보았습니다.

정보의 가독성이 높도록.

사용자가 새로운 정보를 즉각적으로 이해할 수 있도록, 불필요한 시각적 노이즈를 제거하고 텍스트 레이아웃의 완성도를 높이는 데 집중했습니다.

단순하고, 명확하도록.

업무용 메신저 특성상 피로감을 줄이기 위해 화려한 장식은 덜어냈지만, 화면이 너무 정적으로 보이지 않도록 신경 썼습니다. 요소 간의 넓은 간격과 위트 있는 아이콘 표현, 꼭 필요한 부분에만 강조점을 주는 방식으로 '정돈되었지만 지루하지 않은' 화면을 구성했습니다.

officechat solution icon
OfficeChat
officechat laptop consept

primary color

#828CFF

primary color

#2C3340

point color

#FF8888

point color

#FFC641

point color

#B5C7DD

point color

#DEEBFC

Neutral Color

#ECECF0

Neutral Color

#E6E6E6

Neutral Color

#F0F0F0

Neutral Color

#FAFAFA

차분한 안정감이 있도록, 부드럽고 편안하도록.

비즈니스 협업 툴의 특성을 고려하여, 사용자에게 신뢰감을 주면서도 부드러운 시각적 경험을 제공하는 컬러 시스템을 계획하였습니다. 장시간 사용 시 발생할 수 있는 눈의 피로도를 최소화하기 위해 차분한 저채도의 톤을 베이스로 활용하였으며, 자칫 단조로울 수 있는 화면에 파스텔톤의 미묘한 변화를 주어 단조롭지 않도록 구성했습니다.

other icon image

Office

other icon image
other icon image

Chat

other icon image
other icon image

말풍선

other icon image
Blue circular logo with a white curved line forming a 'C' shape inside.

OfficeChat

Top-left corner of a smartphone screen displaying the OfficeChat app icon with a blue circular 'C' inside a speech bubble.

OfficeChat EMBLEM

오피스챗 엠블럼은 영문 'O', 'C',와 채팅 아이콘으로 흔한게 사용하는 말풍선 아이콘을 이용하여 하나의 상장성을 담아내어, 누구나 서비스의 의미를 쉽게 이해할 수 있도록 제작되었습니다.

Korean email client interface showing inbox messages and a selected email about corporate registration certificate issuance.
Mobile screen showing a Korean messaging app inbox with multiple messages listed, including sender names, message previews, timestamps, and star icons for marking messages.

Web UI

icon add

App UI 일관성 있는 디자인.

메신저는 두 개의 플랫폼에서 운영됩니다. 각 플랫폼에서 항상 동일한 경험을 느낄 수 있도록 제작되었습니다.

Login screen with Korean text, input fields for email and password, a login button, and links for finding a password.
Korean messaging app interface showing notifications, messages, and project updates.
Korean office messaging app interface showing user profile, message inbox with one unread message, and a welcome guide with tips for new users.
Chat interface displaying a message conversation in Korean between two users, showing a list of chat contacts on the left and a detailed chat view on the right with text messages and timestamps.
Korean desktop memo app showing a list of memos with one selected memo detailing tasks for new afternoon manager of Jeju newspaper, dated April 15, 2025.
Chat interface showing a conversation in Korean about email server migration, with user list, channels, and message input area.
File storage interface showing a list of files including Excel, ZIP, PowerPoint, and PDF formats with details and options to preview, save, forward, mark important, and retain data.

Laptop

UI

display background image
Email client interface showing inbox with multiple messages and detailed open email in Korean language.

사용자 흐름도를 이용한 UI 제작

사용자 흐름도를 바탕으로 페이지별 구성 요소를 정의하고, 이를 반영하여 UI에 반영한 디자인 시안을 제작하였습니다.

Flowchart of a Korean website navigation showing pages like login, home-alert, organization chart, message, chat, memo, channel, settings, and storage with corresponding subpages.
User interface showing an organizational chart with selectable teams and users, displaying three selected users with profile pictures and roles, plus options for messaging, chatting, channels, and office calls.
icon to enter officechat

기업용 메신저는 조직도 기반의 메신저입니다.

아시아권 업무 문화는 조직 체계 기반의 협업을 중시하므로, 업무용 메신저에서 조직도 관리 기능은 필수적입니다. 이에 따라 오래 학습된 전통적 조직도 구조를 계승하면서, 사용자가 직관적으로 소통할 수 있는 UI를 구성하였습니다.

Icons

보편적인 의미를 가지고 있는 아이콘 형태에서 약간의 변형을 통해 개성 있는 재미를 주고자 했습니다.

bg

브랜드 색상

bg

브랜드 색상

bg

포인트 색상

Grid of 15 communication and interface icons in three columns showing variations of mail, chat, memo, upload, and network symbols.
Laptop displaying a chat application with Korean text, placed on a round wooden table with striped shadows on the wall behind.
bg

BRIGHT

어떤 모드를 선택하든.

Email inbox interface in Korean showing received messages and an open email about a legal entity certificate issuance request for February 2026.
bg

DARK

일관성 있도록.

Dark-theme email interface showing a message inbox with several Korean messages, including one about issuing a corporate seal certificate in February 2026.
Person holding smartphone showing a Korean chat messaging app screen in a bright office setting.
MOBILE
UI
Mobile app screen displaying a user profile named 김영범 with sections for Functions, Services, and Settings, each with corresponding icons and options in Korean.Smartphone screen showing a Korean messaging app interface with a list of messages under tabs for all, received, and sent messages.Smartphone screen showing a Korean messaging app chat list with multiple contacts and recent message previews.Mobile messaging app screen in Korean showing user profile at top, search bar, and a list of messages with sender names, timestamps, and confirm buttons.Mobile login screen for a company-specific office messenger app with fields for email and password, login button, and links for sign-up and password recovery in Korean.

모바일 UI 화면 설계

화면 UI 구조도를 먼저 제작 후 디자인 시안이 진행되었습니다.

Mobile login screen for a company-specific office messenger with email and password fields, login button, and options for auto-login, sign up, and password recovery in Korean.Mobile messenger app interface in Korean showing user profile, search bar, message list with avatars and timestamps, and navigation menu at bottom.Chat interface on a smartphone displaying a list of conversations with user photos, names, message previews, timestamps, and starred messages, with navigation icons at the bottom.Chat interface on a smartphone displaying a list of conversations with user photos, names, message previews, timestamps, and starred messages, with navigation icons at the bottom.Mobile app screen showing user profile with name 김영범 and title 대표이사; menu sections for 기능 with memo and archive icons, Service with note, calendar, bulletin board, survey, TODO, and shortcut icons, and 설정 with screen, security, notification settings, terms of use, privacy policy, and version icons; navigation bar with alert, chat, message, channel, and more options.

모바일 UI 시안

화면 구조도를 바탕으로 시안이 제작 되었습니다.

Smartphone chat app screen in Korean showing multiple chat conversations with contact photos, unread message counts, timestamps, and a bottom navigation bar including notifications, chat, messages, channels, and more options.
Smartphone screen displaying a Korean chat conversation with three participants discussing document requirements and submission details, including an attached Excel file.
Mobile chat screen in Korean showing a conversation with file attachment named 워크인제주_...명부.xlsx and a message input field with a Korean keyboard.

채팅 화면 UI

화면은 정보의 전달 / 이해가 쉽도록 구성하려고 집중했고,
내용 간의 간격 여백에 중점을 두었습니다.

Smartphone screen showing an email composition interface with recipient, carbon copy, and blind copy fields in Korean, text formatting options, and bottom menu icons for scheduling, marking important, read receipt, and send.
Smartphone screen displaying an email in Korean about issuing a 2026 electronic contract signature, including sender, recipients, date, message text, and an attached Excel file.
Smartphone screen showing a Korean messaging app interface with message list, a highlighted tab for all messages, and bottom navigation icons.

메시지 화면 UI

화면은 정보의 전달 / 이해가 쉽도록 구성하려고 집중했고,
내용 간의 간격 여백에 중점을 두었습니다.

채널 화면 UI

화면은 정보의 전달 / 이해가 쉽도록 구성하려고 집중했고,
내용 간의 간격 여백에 중점을 두었습니다.

Smartphone screen displaying a Korean email about 2026 electronic contract signing and issuance of corporate seal certificates with attached Excel file.
Smartphone screen showing an email composition interface with recipient, carbon copy, and blind copy fields in Korean, text formatting options, and bottom menu icons for scheduling, marking important, read receipt, and send.
Mobile interface showing a channel list with categories for all channels and participating channels, including '사내 공지' with 31 members and '메일서버 이전 프로젝트' with 21 members.
Hand holding a smartphone displaying a Korean menu interface with options for notes, calendar, security settings, and more in a bright office background.
UI
Comparison of two rows of interface icons including bell, chat bubble with three dots, envelope, connected squares, and three horizontal dots.

아이콘

대부분의 웹 / 모바일 UI에 사용되는 아이콘은 공유됩니다. 본 아이콘의 경우 모바일 전용으로제작되었으며,디자인 시스템 내에서 전체적인 UI의 시각적 인상을 좌우하는 역할을 합니다.

White desk with a laptop and smartphone displaying chat apps, a potted plant, notebook with pencil, and a cup of coffee near a window.
officechat logo