OK DDODDO LAB

[React] 이미지 카드 뿌리기

리액트 UI 작업썸네일 이미지 자동 뿌려짐메뉴를 클릭하면 하단 콘텐츠가 좌→우로 펼쳐지고, 우측의 슬라이더로 속도(0.2–3.0s) 를 조절할 수 있고, 카드 개수와 크기를 UI에서 직접 조절할 수 있도록구현한 코드카드 개수: 1~20개 설정 가능너비·높이(px): 각각 50~400 범위에서 변경import React, { useState } from "react"; import { motion } from "framer-motion"; import { ChevronDown, Play, Zap } from "lucide-react";const MENUS = [ "mn1", "mn2", "콘텐츠", "mn4", "mn5", ];const Card = ({ index, width, height }: { in..

서론 – 웹퍼블리셔에게 AI 도구가 필요한 이유디자인과 퍼블리싱 작업은 생각보다 반복적인 작업이 많습니다.HTML 마크업, 자잘한 콘텐츠 수정, 이미지 리사이징, 번역 작업, 코드 정리 등 시간이 많이 소요되는 루틴들이죠.최근에는 이런 작업을 AI 도구를 활용해 자동화함으로써 효율성을 극대화할 수 있게 되었습니다.특히 웹퍼블리셔 입장에서는 '어시스턴트'처럼 사용 가능한 AI 툴을 활용하면 시간과 비용을 크게 절약할 수 있습니다.오늘은 퍼블리셔와 디자이너에게 특히 유용한 **‘업무 자동화에 강한 AI 툴 TOP 3’**를 선정하여 비교해보겠습니다. 1위. Notion AI – 콘텐츠 기획부터 요약, 마크업까지 노션 AI는 단순한 메모 앱을 넘어, 웹기획과 콘텐츠 정리에 최적화된 AI 어시스턴트입니다.콘텐..

실무용 GPT 마크업 프롬프트 모음 복붙해서 바로 ChatGPT에 입력하세요!목적별로 분류되어 있습니다. 기본 레이아웃 템플릿 요청- 반응형 3단 카드 리스트Tailwind CSS로 반응형 3단 카드 UI를 만들어줘.PC에서는 3개, 태블릿은 2개, 모바일은 1개씩 보이게 하고, 각 카드에는 이미지, 제목, 버튼이 포함되어야 해.- 그리드 기반 레이아웃그리드 시스템을 활용해서 좌측 사이드바와 우측 콘텐츠 영역으로 나뉜 반응형 레이아웃 HTML을 Tailwind CSS로 작성해줘. 사이드바는 고정이고, 콘텐츠 영역은 스크롤 가능해야 해. 인터랙션 요소 요청- 탭 UI 구조 웹페이지 상단에 탭 UI를 만들고 싶어. 탭은 3개(공지사항, 이벤트, FAQ)이고, 클릭 시 해당 내용이 아래에 보이도록 해줘. 접..

웹퍼블리셔의 업무 변화, AI 시대에 접어들다 GPT 도입 배경과 웹 퍼블리셔의 변화최근 웹 환경의 변화는 단순한 마크업 작업을 넘어 복잡한 반응형 UI 구성, 접근성 대응, 컴포넌트 구조화 등 고도화된 퍼블리싱 능력을 요구하고 있습니다. 하지만 여전히 현업에서는 정형화된 HTML 구조나 반복적인 작업이 적지 않게 발생하고 있습니다. 이러한 상황 속에서 ChatGPT를 포함한 생성형 AI는 웹 퍼블리셔의 작업 효율성을 극대화할 수 있는 실질적인 도구로 부상하고 있습니다.웹 퍼블리셔는 흔히 "디자인 가이드를 코드로 구현하는 사람"으로 정의되곤 합니다. 그러나 실무에서는 디자인 해석부터 크로스 브라우징, 반응형 대응, 웹 접근성 준수까지 요구되는 범위가 매우 넓습니다. 특히 대규모 프로젝트에서는 일정 압박..

웹 퍼블리셔 vs 프론트엔드 개발자, 무엇이 다를까? 같은 듯 다른 두 역할, 정확하게 구분하기 용어 혼용이 부른 혼란, 웹 퍼블리셔와 프론트엔드는 다르다웹 업계에서 가장 자주 혼동되는 역할 중 하나가 바로 웹 퍼블리셔와 프론트엔드 개발자입니다. 실제 현업에서도 이 둘의 경계를 명확히 이해하지 못해 채용 공고나 업무 지시에서 혼란이 생기는 경우가 많습니다. 특히 중소규모 기업에서는 한 사람이 퍼블리싱과 프론트 개발을 모두 담당하기도 하면서, 구분이 더 모호해지곤 합니다.그러나 이 둘은 업무의 중심 영역과 기술 스택, 협업 방식에서 분명한 차이가 존재합니다. 요약하자면,웹 퍼블리셔는 디자인을 웹페이지로 구현하는 역할프론트엔드 개발자는 기능을 웹에 구현하는 역할입니다.퍼블리셔는 HTML/CSS를 중심으로 시..

웹 사이트의 뼈대를 구축하는 전문가의 정체 웹 퍼블리셔는 코딩만 하는 사람이 아니다웹 퍼블리셔(Web Publisher)라는 직업명을 들으면 ‘그냥 코딩하는 사람 아닌가요?’라는 질문을 종종 받습니다. 하지만 실제로 웹 퍼블리셔는 단순한 코딩을 넘어, 디자인 시안을 구현하면서도 웹 표준, 접근성, 반응형 대응, 사용자 경험(UX), SEO까지 고려하는 종합적인 역할을 맡습니다. 다시 말해, ‘보이는 화면을 책임지는 기술자’가 아닌, 디자인과 기술 사이를 잇는 다리라고 볼 수 있습니다.웹 퍼블리셔는 주로 디자이너가 제공한 시안을 HTML/CSS/JavaScript 등으로 구현합니다. 그러나 그 과정에서 단순히 모양을 똑같이 재현하는 것이 아닌, 의도한 디자인을 다양한 환경에서 일관되게 표현하고, 유지보..