[{"data":1,"prerenderedAt":193},["ShallowReactive",2],{"blog-ai-design-workflow":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"category":11,"tags":12,"thumbnail":17,"author":18,"body":19,"_type":187,"_id":188,"_source":189,"_file":190,"_stem":191,"_extension":192},"\u002Fblog\u002Fai-design-workflow","blog",false,"","AI로 웹 디자인하기: 2024년 실전 워크플로우","Midjourney, Figma AI, ChatGPT를 활용한 실전 웹 디자인 워크플로우를 소개합니다.","2024-12-15","AI 활용",[13,14,15,16],"AI","디자인","Midjourney","Figma","\u002Fimages\u002Fportfolio\u002Fbbq.png","박성재",{"type":20,"children":21,"toc":179},"root",[22,30,37,42,62,68,73,83,89,94,112,118,123,141,146,159,163],{"type":23,"tag":24,"props":25,"children":26},"element","p",{},[27],{"type":28,"value":29},"text","AI 도구를 활용하면 디자인 작업 시간을 크게 단축할 수 있습니다. 이 글에서는 실제 프로젝트에서 사용하는 AI 디자인 워크플로우를 공유합니다.",{"type":23,"tag":31,"props":32,"children":34},"h2",{"id":33},"_1단계-컨셉-도출-chatgpt",[35],{"type":28,"value":36},"1단계: 컨셉 도출 — ChatGPT",{"type":23,"tag":24,"props":38,"children":39},{},[40],{"type":28,"value":41},"프로젝트 브리프를 ChatGPT에 입력하여 디자인 방향성을 잡습니다.",{"type":23,"tag":43,"props":44,"children":45},"ul",{},[46,52,57],{"type":23,"tag":47,"props":48,"children":49},"li",{},[50],{"type":28,"value":51},"타겟 유저 페르소나 정의",{"type":23,"tag":47,"props":53,"children":54},{},[55],{"type":28,"value":56},"무드보드 키워드 추출",{"type":23,"tag":47,"props":58,"children":59},{},[60],{"type":28,"value":61},"컬러 팔레트 제안",{"type":23,"tag":31,"props":63,"children":65},{"id":64},"_2단계-비주얼-레퍼런스-midjourney",[66],{"type":28,"value":67},"2단계: 비주얼 레퍼런스 — Midjourney",{"type":23,"tag":24,"props":69,"children":70},{},[71],{"type":28,"value":72},"ChatGPT에서 추출한 키워드를 Midjourney 프롬프트로 변환합니다.",{"type":23,"tag":74,"props":75,"children":77},"pre",{"code":76},"\u002Fimagine modern SaaS landing page, dark theme, glass morphism,\ngradient accent purple blue, minimal typography --ar 16:9\n",[78],{"type":23,"tag":79,"props":80,"children":81},"code",{"__ignoreMap":7},[82],{"type":28,"value":76},{"type":23,"tag":31,"props":84,"children":86},{"id":85},"_3단계-ui-디자인-figma-ai",[87],{"type":28,"value":88},"3단계: UI 디자인 — Figma + AI",{"type":23,"tag":24,"props":90,"children":91},{},[92],{"type":28,"value":93},"Midjourney 결과물을 참고하여 Figma에서 실제 UI를 제작합니다.",{"type":23,"tag":43,"props":95,"children":96},{},[97,102,107],{"type":23,"tag":47,"props":98,"children":99},{},[100],{"type":28,"value":101},"Figma AI로 레이아웃 자동 생성",{"type":23,"tag":47,"props":103,"children":104},{},[105],{"type":28,"value":106},"컴포넌트 시스템 구축",{"type":23,"tag":47,"props":108,"children":109},{},[110],{"type":28,"value":111},"반응형 변형 설계",{"type":23,"tag":31,"props":113,"children":115},{"id":114},"_4단계-코드-변환-cursor-claude",[116],{"type":28,"value":117},"4단계: 코드 변환 — Cursor + Claude",{"type":23,"tag":24,"props":119,"children":120},{},[121],{"type":28,"value":122},"완성된 디자인을 코드로 변환합니다.",{"type":23,"tag":43,"props":124,"children":125},{},[126,131,136],{"type":23,"tag":47,"props":127,"children":128},{},[129],{"type":28,"value":130},"Figma → Tailwind CSS 변환",{"type":23,"tag":47,"props":132,"children":133},{},[134],{"type":28,"value":135},"컴포넌트 단위 개발",{"type":23,"tag":47,"props":137,"children":138},{},[139],{"type":28,"value":140},"인터랙션\u002F애니메이션 구현",{"type":23,"tag":31,"props":142,"children":144},{"id":143},"결론",[145],{"type":28,"value":143},{"type":23,"tag":24,"props":147,"children":148},{},[149,151,157],{"type":28,"value":150},"AI는 디자이너를 대체하는 것이 아니라, 디자이너의 생산성을 극대화하는 도구입니다.\n핵심은 ",{"type":23,"tag":152,"props":153,"children":154},"strong",{},[155],{"type":28,"value":156},"AI가 잘하는 것(생성, 변환)은 맡기고, 사람이 잘하는 것(판단, 정제)에 집중",{"type":28,"value":158},"하는 것입니다.",{"type":23,"tag":160,"props":161,"children":162},"hr",{},[],{"type":23,"tag":24,"props":164,"children":165},{},[166],{"type":23,"tag":167,"props":168,"children":169},"em",{},[170,172],{"type":28,"value":171},"날다데브는 AI 워크플로우를 적극 활용하여 빠르고 높은 품질의 결과물을 제공합니다. ",{"type":23,"tag":173,"props":174,"children":176},"a",{"href":175},"\u002Fcontact",[177],{"type":28,"value":178},"문의하기",{"title":7,"searchDepth":180,"depth":180,"links":181},2,[182,183,184,185,186],{"id":33,"depth":180,"text":36},{"id":64,"depth":180,"text":67},{"id":85,"depth":180,"text":88},{"id":114,"depth":180,"text":117},{"id":143,"depth":180,"text":143},"markdown","content:blog:ai-design-workflow.md","content","blog\u002Fai-design-workflow.md","blog\u002Fai-design-workflow","md",1783795180412]