OK DDODDO LAB

디자인 없이 코딩하는 시대? 퍼블리셔를 위한 AI 디자인 흐름

디자인 없는 시대의 도래: 퍼블리셔의 역할은 어디로?웹사이트나 앱을 만들기 위해선 전통적으로 디자이너가 시안을 만들고, 퍼블리셔나 개발자가 이를 코드로 구현하는 과정을 거쳐야 했다. 하지만 최근 AI 기술의 발전으로, 이러한 워크플로우에 큰 변화가 일어나고 있다. 특히 GPT와 같은 생성형 AI와 Figma AI, Uizard, Galileo AI 등의 도구들이 등장하면서, 디자인 시안 없이도 즉시 마크업과 스타일을 생성할 수 있는 환경이 조성되었다. 이로 인해 '디자인 없는 코딩'이라는 개념이 현실로 다가왔다.퍼블리셔 입장에서 이러한 변화는 위기이자 기회다. 단순히 디자이너의 지시를 받아 마크업을 구현하던 시대에서 벗어나, 퍼블리셔가 직접 UX 흐름과 화면 설계를 주도하는 역할로 확장될 수 있다. 특히..

Markdown에서 GPT 와이어프레임, 코드 확인 방법

Markdown Mermaid 다이어그램 확인하기GPT가 생성한 Mermaid.js 구조 예시:```mermaid graph TD A[로그인 페이지] --> B[대시보드] B --> C[설정 페이지]```▶︎ 확인 가능한 환경:Mermaid Live Editor ← 붙여넣기만 하면 즉시 확인 가능Notion: 설정 → Labs → Mermaid 지원 켜기Obsidian, Typora, VS Code (Mermaid 플러그인 설치 필요)GitHub: 최근에는 일부 Mermaid 지원 (gist나 .md 파일에서 확인 가능) HTML/Tailwind 코드 확인하기GPT가 만든 HTML 코드는 다음과 같이 Markdown에 삽입합니다:```html 왼쪽 오른쪽 ``` 확인..

Figma 없이 시안 제작: 시안 제작에 직접 활용하는 5가지 방법

활용하는 5가지 방법 레이아웃 설계 프롬프트 활용 GPT 프롬프트:"블로그 글 보기 화면을 구성해줘. 상단은 제목과 작성자 정보, 중단은 본문, 하단은 댓글과 공유 버튼이 있는 구조. tailwind css 기반으로 마크업 생성해줘." 이렇게 요청하면 GPT는 HTML 구조와 Tailwind 기반 스타일링까지 포함된 마크업을 바로 생성해줍니다. 이건 디자인 기획과 퍼블리싱을 동시에 준비할 수 있는 실전형 도구가 됩니다. 페이지 플로우/컴포넌트 구상 도우미GPT 프롬프트:"로그인 → 대시보드 → 상세 보기로 이어지는 3단계 페이지 흐름에 필요한 주요 UI 컴포넌트를 알려줘." GPT는 버튼, 입력폼, 카드, 메뉴 등 핵심 컴포넌트를 리스트업해주며 UX 흐름 설계 초안을 도와줍니다. 디자이너 없이 시안 뼈대..

Figma 없이 시안 제작: 와이어프레임 만들기

ChatGPT를 활용해 시안을 기획하고 마크업까지 완성 디자인 시안을 만들 때 가장 흔히 떠오르는 도구는 Figma입니다. 하지만 매번 디자이너와 협업하거나, 복잡한 툴을 배우고 작업 환경을 세팅하는 일은 쉽지 않습니다. 특히 1인 창작자나 퍼블리셔, 혹은 스타트업 초기 멤버라면 ‘간단한 시안을 빠르게 만들 수 있는 방법’이 절실합니다.이제는 Figma 없이도 ChatGPT를 활용해 시안을 기획하고 마크업까지 완성할 수 있습니다. 바로 이것이 실무 중심의 AI 기반 시안 제작 방식입니다. 시안 설계의 시작: 프롬프트로 구조 구상하기GPT를 실무에 적용하는 가장 핵심적인 방법은 바로 프롬프트 작성입니다. ‘디자인 툴 없이 UI 구조를 구상할 수 있느냐’는 결국, 얼마나 명확하게 GPT에게 요구사항을 전달할..

Figma 없이 시안 제작: AI 기반 와이어프레임 생성법

Figma 없이 디자인 시안 작업Figma 없이도 가능하다: AI와 시안 제작의 새로운 패러다임UI/UX 디자인의 시작은 언제나 ‘시안 제작’입니다.과거에는 Figma, Adobe XD와 같은 툴이 필수였지만, 이제는 AI 기반 도구들이 디자이너의 업무를 대체하거나 보조하는 수준을 넘어, 비디자이너도 손쉽게 시안을 제작할 수 있는 시대가 도래했습니다. 특히 초기 스타트업, 1인 퍼블리셔, 혹은 디자인 리소스가 부족한 팀에게는 혁신적인 접근 방식이 됩니다.예를 들어, 텍스트 기반의 명령어만으로 와이어프레임을 생성할 수 있는 ChatGPT와 같은 AI 모델이나, Uizard, Galileo AI, Relume Library 등의 생성형 디자인 도구는 UI 컴포넌트, 레이아웃 구조, 페이지 흐름까지 자동으로 ..