프로젝트 배경
문제점 :
- 비전문가가 디자인 툴 사용에 어려움을 느낌
- 반복적인 이미지/텍스트 편집 업무가 비효율적임
- 기존 AI 도구는 편집과 실무 활용에 제약이 많음
프로젝트 목표 :
- 누구나 쉽게 시안을 만들 수 있는 웹 기반 편집기 제공
- AI를 활용해 이미지/텍스트 자동화 기능 구현
- 설치 없이 웹에서 바로 사용할 수 있는 접근성 확보
주안점 :
- AI 기능이 자연스럽게 녹아든 UX 설계
- 빠른 렌더링과 반응 속도 확보
- 향후 기능 확장을 고려한 구조 설계
- 다양한 템플릿 제공으로 편집 효율성 강화
- 비전문가가 디자인 툴 사용에 어려움을 느낌
- 반복적인 이미지/텍스트 편집 업무가 비효율적임
- 기존 AI 도구는 편집과 실무 활용에 제약이 많음
프로젝트 목표 :
- 누구나 쉽게 시안을 만들 수 있는 웹 기반 편집기 제공
- AI를 활용해 이미지/텍스트 자동화 기능 구현
- 설치 없이 웹에서 바로 사용할 수 있는 접근성 확보
주안점 :
- AI 기능이 자연스럽게 녹아든 UX 설계
- 빠른 렌더링과 반응 속도 확보
- 향후 기능 확장을 고려한 구조 설계
- 다양한 템플릿 제공으로 편집 효율성 강화
프로젝트 성과
시안편집기 이용 고객 증가
시안편집기 이용성 강화
핵심 기능

AI를 이용한 이미지 재성성, 인페인팅 기능
이미지를 편집하기 위한 AI 기능
진행 단계
기획
2025.04.
주요 기능 및 명세 구축
디자인
2025.04.
디자인 개발
프론트/백엔드 통합 개발
2025.05.
이미지 편집기능 개발
AI 기능추가
AI 기능추가
프로젝트 상세
1) 포트폴리오 소개
AI 기반 디자인 편집기 개발
카테고리: AI / 생산성 도구 / 웹앱
메인 타깃: 디자이너, 콘텐츠 제작자, 마케터 등 시안을 빠르게 제작하고 싶은 일반 사용자
소개:
사용자가 직접 디자인하지 않아도, 텍스트와 이미지를 AI 기능으로 자동 추천·편집하여 시안을 제작할 수 있는 웹 기반 편집기를 개발했습니다. 이미지 생성, 텍스트 자동 보정, 디자인 템플릿을 활용한 시안 제작까지 가능한 도구입니다.
2) 작업 범위
Front-end: Reactjs 기반 웹앱 전체 UI 개발
Back-end 연동: AI 모델 연동을 위한 API 통신 및 상태 관리
AI 기능 연동: 이미지 생성, 텍스트 편집을 위한 LLM 및 이미지 모델 연동
디자인 시스템: 사용자 친화적 편집 UI 구성 및 캔버스 인터랙션 구현
3) 주요 업무
AI 기능을 활용한 이미지 자동 생성 및 교체 기능 (예: 배경 이미지 제안, 스타일 변환)
텍스트 자동 편집 기능 (GPT 기반 문장 보정 및 스타일 제안)
드래그 앤 드롭 편집 UI (캔버스 기반 요소 배치/조절)
템플릿 시스템: 다양한 산업군에 맞춘 시안 템플릿 적용 기능
최종 결과물 SVG파일로 변환
4) 주안점
AI 기능과 UI 편집 기능의 자연스러운 결합
→ 사용자가 기술을 의식하지 않고 직관적으로 사용할 수 있도록 설계
고속 렌더링
→ 복잡한 이미지 조작도 지연 없이 처리되도록 최적화
UX 최적화
→ 디자인 비전문가도 쉽게 사용할 수 있는 사용자 흐름 구성
확장성 고려한 구조
→ 추후에 추가될 음성명령, 스타일 자동화 기능을 고려하여 컴포넌트 분리 및 아키텍처 구성
AI 기반 디자인 편집기 개발
카테고리: AI / 생산성 도구 / 웹앱
메인 타깃: 디자이너, 콘텐츠 제작자, 마케터 등 시안을 빠르게 제작하고 싶은 일반 사용자
소개:
사용자가 직접 디자인하지 않아도, 텍스트와 이미지를 AI 기능으로 자동 추천·편집하여 시안을 제작할 수 있는 웹 기반 편집기를 개발했습니다. 이미지 생성, 텍스트 자동 보정, 디자인 템플릿을 활용한 시안 제작까지 가능한 도구입니다.
2) 작업 범위
Front-end: Reactjs 기반 웹앱 전체 UI 개발
Back-end 연동: AI 모델 연동을 위한 API 통신 및 상태 관리
AI 기능 연동: 이미지 생성, 텍스트 편집을 위한 LLM 및 이미지 모델 연동
디자인 시스템: 사용자 친화적 편집 UI 구성 및 캔버스 인터랙션 구현
3) 주요 업무
AI 기능을 활용한 이미지 자동 생성 및 교체 기능 (예: 배경 이미지 제안, 스타일 변환)
텍스트 자동 편집 기능 (GPT 기반 문장 보정 및 스타일 제안)
드래그 앤 드롭 편집 UI (캔버스 기반 요소 배치/조절)
템플릿 시스템: 다양한 산업군에 맞춘 시안 템플릿 적용 기능
최종 결과물 SVG파일로 변환
4) 주안점
AI 기능과 UI 편집 기능의 자연스러운 결합
→ 사용자가 기술을 의식하지 않고 직관적으로 사용할 수 있도록 설계
고속 렌더링
→ 복잡한 이미지 조작도 지연 없이 처리되도록 최적화
UX 최적화
→ 디자인 비전문가도 쉽게 사용할 수 있는 사용자 흐름 구성
확장성 고려한 구조
→ 추후에 추가될 음성명령, 스타일 자동화 기능을 고려하여 컴포넌트 분리 및 아키텍처 구성



