Актуальність теми. Сучасна цифрова реклама вимагає швидкого створення банерів, анімованих креативів і рекламних матеріалів для оперативного перегляду та погодження. Традиційний підхід потребує кількох окремих інструментів, що збільшує час виробництва та підвищує ризик помилок при експорті. Попит на єдиний браузерний інструмент без встановлення програм обумовлює актуальність дослідження [1, 2].

Об'єктом є процес створення цифрових рекламних матеріалів засобами браузерних інструментів. Предметом є архітектура та функціональність веб-редактора рекламних креативів.

Мета роботи. Метою є реалізація вебзастосунку з візуальним редактором, безкодовим підходом до анімації (no-code), ручним редагуванням JS/CSS та експортом у HTML, GIF і MP4. Додатково передбачено командну роботу з розмежуванням ролей, перевіркою якості (QA) та платіжною активацією робочого простору (workspace) [1, 2].

Архітектурне рішення. Систему побудовано на клієнтській частині React/Vite [2, 3] та хмарному бекенді Supabase [1]. На фронтенді реалізовано canvas-редактор, панелі шарів, інспектор властивостей, редактори JS/CSS, no-code Timeline Editor, попередній перегляд та модулі експорту. PostgreSQL зберігає проєкти і платежі; Edge Functions обробляють транзакції; Realtime забезпечує синхронізацію статусів [1]. Архітектуру розгортання системи наведено на рис. 1.

Рис. 1 – Діаграма розгортання системи Creative Workflow Studio

Основним модулем є Studio Editor з canvas, панеллю шарів, інспектором властивостей, JS/CSS-редактором і no-code Timeline Editor. Анімацію налаштовують обираючи елемент, тип руху та тривалість; для складних сценаріїв доступне редагування GSAP-коду [4]. Для командної роботи реалізовано особистий та командний workspace з ролями власника, керівника, розробника і QA і платіжною активацією через Monobank [5]. Схему даних системи наведено на рис. 2. Вона охоплює таблиці profiles, workspaces, workspace_members, projects, project_notifications та workspace_payments [1]. Таблиця projects зберігає назву креативу, формат, орієнтацію, код анімації, CSS-стилі, сцену та відповідальних учасників. Таблиця workspace_members пов'язує користувачів із робочим простором через зовнішні ключі та поле ролі, а project_notifications зберігає повідомлення про зміни статусу проєкту. Платіжні транзакції фіксуються у workspace_payments із прив'язкою до workspace та ідентифікатора платежу Monobank [5]. RLS-політики обмежують доступ до командних дій залежно від ролі; SQL/RPC-функції обслуговують платежі, повідомлення та синхронізацію [1].

Рис. 2 – ERD основних таблиць Supabase

Висновки. У результаті розроблено вебзастосунок із підтримкою створення й імпорту HTML-креативів, редагування canvas, no-code timeline-анімації [4], JS/CSS-редакторів, попереднього перегляду, експорту у HTML/GIF/MP4, клонування проєктів, управління робочим простором, зворотного зв'язку QA та синхронізації в реальному часі [1, 5]. Система об'єднує в одному браузерному середовищі весь цикл підготовки рекламного матеріалу – від візуального редагування до командної перевірки й фінального експорту – без встановлення настільних програм. Це скорочує час виробництва креативів, спрощує внесення правок і знижує поріг входу для команд без досвіду роботи в графічних редакторах.

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ

1. Supabase. Documentation [Електронний ресурс]. – Режим доступу до ресурсу: https://supabase.com/docs

2. React. Documentation [Електронний ресурс]. – Режим доступу до ресурсу: https://react.dev/

3. Vite. Guide [Електронний ресурс]. – Режим доступу до ресурсу: https://vitejs.dev/guide/

4. GSAP. GreenSock Animation Platform Documentation [Електронний ресурс]. – Режим доступу до ресурсу: https://gsap.com/docs/

5. Monobank. Інтернет-еквайринг та API документація [Електронний ресурс]. – Режим доступу до ресурсу: https://api.monobank.ua/