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 어시스턴트입니다.콘텐..

1. 출산 준비, 언제부터 시작해야 할까?임신 후반기에 들어서면 “무엇부터 준비해야 하지?”라는 고민이 커집니다. 특히 초산모의 경우 경험이 없기 때문에 막막함이 클 수밖에 없습니다. 대부분 32~36주부터 본격적으로 출산을 대비하는 것이 좋으며, 출산은 예고 없이 찾아올 수 있으므로 미리 준비해두는 것이 중요합니다. 단순히 짐을 싸는 것을 넘어서, 산후조리 계획, 출생신고, 가족과의 역할 분담까지 함께 준비해야 출산 후 혼란을 줄일 수 있습니다. 2. 반드시 챙겨야 할 준비사항 10가지출산 전 꼭 준비해야 할 핵심 리스트는 다음과 같습니다:① 입원 가방 준비 (속옷, 수유브라, 산모패드, 세면도구 등)② 신생아 의류 및 기저귀 - 실내복, 손수건 등등..③ 산후조리원 예약 확인 - 출산 예정일이 확정되..

1. 족저근막염이란 무엇인가?족저근막염은 발뒤꿈치부터 발바닥 앞쪽까지 이어져 있는 강한 섬유 조직인 족저근막에 염증이 생기는 질환입니다. 주로 발뒤꿈치 안쪽 부분에서 심한 통증이 나타나며, 아침에 잠자리에서 일어나 첫발을 내디딜 때 극심한 통증을 호소하는 것이 대표적인 특징입니다. 일반적으로 오랜 시간 걷거나 서서 일하는 직업을 가진 사람, 격렬한 운동을 자주 하는 사람, 또는 평발과 같이 발의 구조적 문제를 가지고 있는 사람들이 자주 경험합니다. 또한 체중이 많이 나가는 사람이나 신발의 쿠션이 부족한 것을 착용하는 경우에도 자주 나타납니다. 족저근막염을 방치하면 통증이 더욱 악화되어 일상생활까지 방해할 수 있기 때문에 초기에 정확한 진단과 관리가 매우 중요합니다.족저근막염의 원인은 다양합니다. 첫째는 ..

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

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