CaaS UI

CaaS UI Library Cover

CaaS UI는 AICON의 모든 제품군에 공통으로 적용되는 디자인 시스템입니다. 디자인 시스템을 통해 일관된 디자인 언어를 제공하고, 디자이너와 개발자 간의 커뮤니케이션을 원활하게 합니다. JDS(JOOTEK Design System)을 개발했던 경험을 살려 한층 더 다채롭고 다양한 환경에 대응할 수 있는 디자인 시스템을 구축하고자 했습니다.

Color System

CSS Variables 기반으로 동작하는 테마 시스템과 1:1로 대응되는 토큰 시스템을 적용했고, 디자이너와 개발자는 동일한 디자인 토큰으로 소통합니다. 이러한 체계는 각 세부적인 컴포넌트에도 반영되여 디자이너가 Figma에서 조립한 컴포넌트는 실제 코드 상에서도 조립하여 구성하는 형태로 진화했습니다.

Legacy Design New Design

디자인 시스템과 함께 전체적인 서비스의 톤도 크게 달라졌습니다. 무겁고 날카로운 인상에서 벗어나 전반적으로 시원하고 깔끔한 톤으로 정리되었으며, 더 많은 정보 체계를 시각화할 수 있도록 여백과 레이아웃 구성을 특히 신경 썼습니다.

import { Dialog, DialogHeader, DialogTitle, DialogContent, DialogBody, DialogFooter, DialogClose } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';

export const MyDialog = () => {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
        <DialogContent className="max-w-[1400px]">
            <DialogHeader>
                <DialogTitle>AI RTLS 카메라 맵핑</DialogTitle>
                <DialogClose />
            </DialogHeader>

            <DialogBody>
                contents...
            </DialogBody>
            <DialogFooter className="flex justify-between gap-4">
                <Button type="button" size="large" variant="outline" onClick={handleReset}>
                초기화
                </Button>
                <div className="flex gap-3">
                <Button type="button" variant="ghost" size="large" onClick={onCancel}>
                    취소
                </Button>
                <Button type="button" variant="solid" size="large" color="primary" onClick={handleSave}>
                    저장
                </Button>
                </div>
            </DialogFooter>
        </DialogContent>
    </Dialog>
  );
};

이전의 디자인 시스템은 명확하게 디자인 툴에서의 디자인 구현체와 코드적 구현체가 별개로 존재했습니다. 하지만 현대의 개발은 기획 > 디자인 > 개발로 이어지는 워크플로우가 명확하지 않습니다. 현재의 조직은 개발자 각자가 오너십을 갖고 프로덕트를 총괄/담당하며 기획부터 디자인, 개발까지 모든 과정을 커버하고 있습니다. 이는 바이브 코딩 덕분에 가능한 것으로 모든 개발자들이 공통된 언어와 문맥을 공유하며 협업할 수 있도록 AI 친화적인 디자인 시스템 및 개발 환경을 구축하여 기획과 디자인에 대한 이해도가 높지 않은 개발자들도 수준 높은 프로덕트를 만들 수 있도록 돕고 있습니다.