keelson.

Web application

keelson OS

문의·고객·제안·정산부터 콘텐츠 발행, 검색 진단과 사이트 감시까지. 스튜디오의 일과 운영을 연결한 업무 시스템.

시각 디자인 · 웹 개발 · 운영 · 전략

서비스와 화면 설계

문의가 들어오면 고객의 상담 이력을 확인하고, 필요한 업무 모듈로 제안서를 구성합니다. 수주 이후에는 계약·진행·납품 단계와 입금·미수금을 함께 봅니다. 작업이 끝나면 포트폴리오와 콘텐츠로 정리하고, 발행한 사이트의 검색 상태와 연결 상태를 점검합니다.

킬슨 OS는 이 과정을 하나의 관리자 화면으로 엮었습니다. 오늘의 현황을 요약하는 홈, 고객과 돈을 관리하는 업무 화면, 콘텐츠를 내보내는 발행 화면, 백그라운드 작업의 결과를 확인하는 운영 화면으로 나뉩니다. 각 기능에서 무엇을 입력하고 어떤 결과를 확인하는지 아래 실제 UI로 풀어냈습니다.

오늘의 운영 현황

검색어 순위, 새 문의와 콘텐츠 일정이 홈의 각 영역에 모여 있습니다. 왼쪽 관리 메뉴로 이동하기 전에 오늘 확인할 항목을 한 번에 살피는 화면입니다.

새 문의와 확인한 문의

접수일, 발신자, 문의 문장과 확인 상태를 한 행에 놓았습니다. 짧은 목록만 훑어도 아직 읽지 않은 요청을 구분할 수 있습니다.

고객별 최근 접점

고객 목록 위에는 상담 단계별 인원을, 각 행에는 연락처와 문의 횟수·최근 접점·메모를 표시합니다. 같은 고객의 이전 기록을 찾아볼 때 쓰는 화면입니다.

입력 옆에서 보는 제안서

왼쪽에서 받는 곳과 프로젝트 정보, 필요한 업무 모듈을 정하고 오른쪽에서 제안서 표지를 확인합니다. 문서 입력과 미리보기를 나란히 두었습니다.

프로젝트별 입금과 잔액

위쪽에는 계약·입금·미수금 합계를, 아래에는 프로젝트별 금액과 진행 상태를 표시합니다. 개별 건의 잔액과 전체 현황을 함께 비교합니다.

콘텐츠 회차와 발행 상태

상단에서 회차와 반응 수치를 살피고, 아래에서 게시할 콘텐츠와 상태를 확인합니다. 회차별 목록 옆에 선택한 콘텐츠의 관리 영역을 두었습니다.

공개할 작품 목록

작품의 제목, 분류와 순서를 표로 정리하고 공개 상태와 관리 동작을 같은 행에 놓았습니다. 여러 작품의 노출 현황을 한 화면에서 살핍니다.

외부 공고를 비교하는 목록

공고마다 제목과 조건을 묶고 오른쪽에 점수를 표시했습니다. 상단 분류를 바꾸며 검토할 공고를 좁히는 화면입니다.

검사 결과와 남은 수정 항목

왼쪽 영역에는 마지막 검사 결과를, 오른쪽에는 처리할 수정 항목을 표시합니다. 정상 여부와 남은 일을 나누어 확인합니다.

자동화별 최근 실행 상태

정상·실행 중·문제·꺼짐 수를 위쪽에 모으고, 아래 표에 작업별 주기와 최근 실행 결과를 표시합니다. 이상이 있는 작업부터 찾아보는 관리 화면입니다.

기획과 제작 과정
  1. 01

    문의와 고객

    접수 내용과 고객 이력을 확인하고 상담·제안 단계를 관리합니다.

  2. 02

    제안과 수주

    범위·산출물·일정을 제안서로 구성하고 수주한 일을 추적합니다.

  3. 03

    진행과 정산

    진행 단계, 납품 시점, 계약금과 잔금을 함께 확인합니다.

  4. 04

    발행과 점검

    결과물을 공개하고 검색·연결·자동화 상태를 계속 확인합니다.

개발 구조 자세히 보기

업무 기록을 다음 화면으로 연결

문의·고객·진행 단계·계약·입금 상태를 기능별 화면에서 읽습니다. 제안서와 관련 폴더는 업무 기록에서 이어 확인하고, 완료한 작업은 포트폴리오와 콘텐츠로 정리합니다.

요청하는 화면과 실행하는 작업의 분리

검색 분석이나 발행 같은 요청은 관리 화면에서 전달하고 백그라운드 작업의 상태와 결과를 다시 보여줍니다. 요청을 넣었다는 사실과 실행이 완료됐다는 결과를 구분합니다.

공개 화면과 관리자 편집 권한

방문자는 공개된 사례를 보고, 인증된 관리자는 같은 페이지에서 텍스트를 수정합니다. 동시 편집 시 같은 항목의 변경을 확인하고 저장에 실패하면 입력 내용을 유지하도록 구성했습니다.

제안부터 발행 이후까지의 운영

제안서 생성, 수주·납품·정산, 콘텐츠 예약과 발행, 검색 진단과 사이트 점검까지 서로 다른 시간대에 일어나는 업무를 하나의 운영 흐름으로 다뤘습니다.

사용 기술

언어
HTML · CSS · JavaScript · Python
주요 기술
Vanilla JavaScript · Node.js
데이터·연동
Firebase Authentication · Cloud Firestore · Firebase Storage · Cloud Functions for Firebase · Slack Webhook
이미지