< BACK

+ HOUSEWITHK@GMAIL.COM

COPY

COPIED

SEND

< BACK

+ HOUSEWITHK@GMAIL.COM

COPY

COPIED

SEND

< BACK

< BACK

+ HOUSEWITHK@GMAIL.COM

COPY

COPIED

SEND

< BACK

+ HOUSEWITHK@GMAIL.COM

COPY

COPIED

SEND

< BACK

+ HOUSEWITHK@GMAIL.COM

COPY

COPIED

SEND

WORK

CLOSE

WORK

WORK

CLOSE

WORK

[01]

BASIC

[a[

Figma

Figma

Affinity

Designer

Affinity

Designer

My Framer Site

Affinity

Photo

My Framer Site

Affinity

Photo

2026

비쥬얼 아이덴티티

브랜딩

그래픽 디자인

HOUSE WITH K

HOUSE WITH K

HOUSE WITH K

글자의 마디가 맞물리는 구조를 활용해 아이디어가 형태를 갖춰가는 과정을 시각화한 비주얼 아이덴티티입니다. 직선적인 서체와 리듬감 있는 모서리 컷팅으로 체계적인 시스템과 유연한 확장성을 동시에 보여줍니다. 각 글자의 조형적 변주를 통해 단순한 나열을 넘어 구조적 안정감과 일관된 브랜드 디테일을 구현했습니다.

글자의 마디가 맞물리는 구조를 활용해 아이디어가 형태를 갖춰가는 과정을 시각화한 비주얼 아이덴티티입니다. 직선적인 서체와 리듬감 있는 모서리 컷팅으로 체계적인 시스템과 유연한 확장성을 동시에 보여줍니다. 각 글자의 조형적 변주를 통해 단순한 나열을 넘어 구조적 안정감과 일관된 브랜드 디테일을 구현했습니다.

사용자의 목소리

사용자의 목소리

사용자의 목소리

회사에서 사용하는 전자결재앱이
너무 어려워서 근태만 사용해요

회사에서 사용하는 전자결재앱이
너무 어려워서 근태만 사용해요

이영지

이영지

코즈메틱 회사

코즈메틱 회사

" "

" "

한 눈에 내가 할 일을

다 볼 수 있으면 좋겠어요

한 눈에 내가 할 일을

다 볼 수 있으면 좋겠어요

유지혁

유지혁

에이전시

에이전시

" "

" "

실수로 반려처리하면 업무를

다시 등록해야해요 :(

실수로 반려처리하면 업무를

다시 등록해야해요 :(

박용지

박용지

마케팅 회사

마케팅 회사

" "

" "

1

PROBLEM

1

PROBLEM

기능이 분산되어 전체 흐름을

한눈에 파악하기 어렵다

기능이 분산되어 전체 흐름을

한눈에 파악하기 어렵다

기능이 분산되어 전체 흐름을

한눈에 파악하기 어렵다

업무, 결재, 근태 등 기능이 분산되어 있어 사용자는 개별 화면을 오가며 상태를 확인해야 했고, 전체 업무의 흐름을 시간 순서로 이해하기 어려웠습니다. 각 단계의 이력이 단절되어 이전 진행 맥락을 파악하기 어려웠으며, 특히 승인 및 반려 과정에서는 진행 경과를 추적하기 어려워 반복적인 확인과 커뮤니케이션이 발생하는 문제가 있었습니다.

업무, 결재, 근태 등 기능이 분산되어 있어 사용자는 개별 화면을 오가며 상태를 확인해야 했고, 전체 업무의 흐름을 시간 순서로 이해하기 어려웠습니다. 각 단계의 이력이 단절되어 이전 진행 맥락을 파악하기 어려웠으며, 특히 승인 및 반려 과정에서는 진행 경과를 추적하기 어려워 반복적인 확인과 커뮤니케이션이 발생하는 문제가 있었습니다.

업무, 결재, 근태 등 기능이 분산되어 있어 사용자는 개별 화면을 오가며 상태를 확인해야 했고, 전체 업무의 흐름을 시간 순서로 이해하기 어려웠습니다. 각 단계의 이력이 단절되어 이전 진행 맥락을 파악하기 어려웠으며, 특히 승인 및 반려 과정에서는 진행 경과를 추적하기 어려워 반복적인 확인과 커뮤니케이션이 발생하는 문제가 있었습니다.

구조 문제

시간 흐름 단절

시간 흐름 단절

이력 단편화

이력 단편화

과정 파악 어려움

과정 파악 어려움

UX 문제

히스토리 탐색 비효율

히스토리 탐색 비효율

맥락 이해 어려움

맥락 이해 어려움

진행 흐름 불연속

진행 흐름 불연속

업무 영향

진행 상황 오해

진행 상황 오해

커뮤니케이션 증가

커뮤니케이션 증가

처리 지연 발생

처리 지연 발생

업무 흐름 파악

시간 감소

결재 상태

문의 감소

불필요한

커뮤니케이션 감소

전체 흐름 한눈에 확인

사용자 만족도 상승

[03]

SOLUTION

[IMAGE]

2

SOLUTION

시간 흐름 기반 타임라인으로 프로세스 재구성

시간 흐름 기반 타임라인으로 프로세스 재구성

시간 흐름 기반 타임라인으로 프로세스 재구성

분산되어 있던 업무 이력을 시간 흐름 기반의 타임라인으로 재구성하여, 업무의 시작부터 완료까지의 과정을 한눈에 파악할 수 있도록 했습니다. 각 단계의 승인·반려 상태를 흐름 안에서 명확히 드러내고, 이전 맥락과 현재 진행 상황을 함께 이해할 수 있도록 개선했습니다.


이를 통해 개별 화면을 반복적으로 확인하지 않아도 전체 업무 흐름과 히스토리를 빠르게 파악하고 처리할 수 있는 환경을 구축했습니다.

생성

대기

승인

완료

수정

반려

수정

재요청

승인

3

RENEWAL

프로세스가 중심인 설계

프로세스가 중심인 설계

프로세스가 중심인 설계

기능 단위로 나뉘던 구조를 업무의 ‘진행 상태’ 중심으로 재구성하여, 생성 → 승인 → 반려 → 완료까지 흐름 안에서 현재 위치와 다음 행동을 직관적으로 이해할 수 있도록 했습니다.


반려 이후에도 업무가 끊기지 않도록 수정 → 재요청으로 이어지는 구조를 설계했습니다.


상태 변화에 따라 인터페이스가 즉시 반응해 사용자가 별도 판단 없이 다음 행동을 인지할 수 있도록 했습니다.

4

USERFLOW

유저플로우

기본 유저플로우

유저플로우

유저플로우

사용자가 대시보드를 중심으로 근태, 전자결재, 업무 기능을 탐색하며 업무를 처리하는 전체 흐름을 고려해 구조를 설계했습니다.


각 기능은 독립적으로 구성되면서도 자연스럽게 연결되도록 하여 사용자가 필요한 작업을 빠르게 수행하고 다시 업무 흐름으로 복귀할 수 있도록 했습니다.

사용자가 대시보드를 중심으로 근태, 전자결재, 업무 기능을 탐색하며 업무를 처리하는 전체 흐름을 고려해 구조를 설계했습니다.


각 기능은 독립적으로 구성되면서도 자연스럽게 연결되도록 하여 사용자가 필요한 작업을 빠르게 수행하고 다시 업무 흐름으로 복귀할 수 있도록 했습니다.

5

UI / INTERACTION

전체 화면

전체 화면

호두 프리미엄 버전 중 성숙한 성격에 맞추어 다크 버전으로 진행하고,

이전 구축한 호두 기본 디자인 시스템을 활용하여, 호두 사용자와

일반 사용자 모두 편리하게 사용가능한 UI를 디자인했습니다.

호두 프리미엄 버전 중 성숙한 성격에 맞추어 다크 버전으로 진행하고,

이전 구축한 호두 기본 디자인 시스템을 활용하여, 호두 사용자와

일반 사용자 모두 편리하게 사용가능한 UI를 디자인했습니다.

메인

[VIDEO]

ALL 섹션

[IMAGE]

제품 상세

[VIDEO]

리뷰

[VIDEO]

주문

[IMAGE]

주문 인터랙션

[VIDEO]

주문 현황

[VIDEO]

설정

[IMAGE]

채팅

[VIDEO]

알림

[IMAGE]

5

UI / INTERACTION

전체 화면

호두 프리미엄 버전 중 성숙한 성격에 맞추어 다크 버전으로 진행하고, 이전 구축한 호두 기본 디자인 시스템을 활용하여, 호두 사용자와 일반 사용자 모두 편리하게 사용가능한 UI를 디자인했습니다.

  • 출퇴근

    [VIDEO]

  • 근태기록

    [VIDEO]

  • 결재함 & 반려 팝업

    [VIDEO]

  • 전자결재 상세

    [VIDEO]

  • 연차관리

    [IMAGE]

  • 타임라인

    [VIDEO]

  • 업무 등록

    [VIDEO]

  • 업무 상세

    [IMAGE]

  • 업무 등록

    [VIDEO]

  • 업무 상세

    [IMAGE]

[01]

[02]

[03]

[04]

[05]

[END]

BASIC

PROBLEM

SOLUTION

RENEWAL

USERFLOW

UI / INTERACTION

UI / INTERACTION

© HOUSEWITHK

© HOUSEWITHK