Page

Work

WORKY

Next.jsTypescriptTailwind CSSGROQ APISUPABASEVERCEL

ROLE
기획 · 개발 · 검증
PERIOD
2026.05 ~
WORKY 화면 1
WORKY 화면 2
WORKY 화면 3
WORKY 화면 4
WORKY 화면 5
WORKY 화면 6
WORKY 화면 7
WORKY 화면 8
WORKY 화면 9
WORKY 화면 10
WORKY 화면 11
WORKY 화면 12

본문

개요

직장인의 반복 업무를 AI로 줄이고, 필요한 정보를 한곳에서 관리할 수 있도록 만든 업무 보조 웹 애플리케이션입니다. 마케팅 회사에서 일하는 지인이 문서 양식을 매번 찾아보고 거래처 정보를 여러 곳에 흩어놓고 관리하는 모습을 보며 시작했고, 여기에 제 신입사원 시절 경험(업무 용어, 메모 정리, 메일 답장)을 더해 메뉴를 구성했습니다.

문서 작성, 일정 관리, 거래처 관리 등 17개 메뉴로 이루어져 있습니다. Claude Code와 협업해 개발했고, 화면 구성과 기능 방향은 직접 정한 뒤 결과물을 실제로 사용해보며 다듬는 방식으로 진행했습니다.

구현

  • 17개 메뉴 전체를 실제 모바일 기기에서 직접 확인하며 반응형을 검증했습니다
  • 한국어·영어 다국어를 지원하며, 언어 전환 시 레이아웃이 깨지지 않도록 확인했습니다
  • 시맨틱 구조와 키보드 이동, 색상 대비를 점검하며 접근성을 보완했습니다
  • 페이지마다 도움말 버튼을 두어 기능별 사용법을 바로 확인할 수 있게 했습니다
  • 요구사항과 화면 흐름을 정한 뒤 Claude Code와 구현안을 주고받았으며, 완성된 기능을 실제로 사용하면서 발견한 문제를 검증하고 수정했습니다

발견하고 고친 것

실기기 검증에서 데스크톱 화면으로는 드러나지 않던 시각적 결함 3건을 찾아 수정했습니다.

  • 할 일·메모의 추가 버튼 텍스트가 세로로 정렬되는 문제를 가로 정렬로 수정
  • 일정 관리의 텍스트 박스가 컨테이너 밖으로 넘치는 문제를 위치 조정으로 해결
  • 용어집의 AI 설명 검색창과 버튼이 겹치는 문제를 레이아웃 수정으로 해결

트러블슈팅

모달이 화면 하단을 덮지 못함

여러 모달이 스크롤되는 main 컨테이너 안에서 position: fixed로 렌더링되고 있었던 것이 원인이었습니다. createPortal로 document.body에 직접 렌더링하도록 바꿔 해결했습니다.

토스트 팝업이 다른 요소 뒤로 숨음

같은 시기 WORKY mini에서 발생한 버그인데 원인이 완전히 같았습니다. 컴포넌트 트리 깊숙이 있는 요소는 부모의 스택 컨텍스트에서 자유롭지 못하다는 것을 두 프로젝트에서 연달아 겪으며 확인했습니다.