OK DDODDO LAB

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에게 요구사항을 전달할..