<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
    <channel>
        <title>501’s Blog</title>
        <link>https://501story.blog/</link>
        <description>창업과 개발 여정을 기록하는 블로그입니다. 노션을 활용한 효율적이고 체계적인 업무 방식을 추구하고 있습니다. 프로그래머이자 자동화를 지향하는 예비 창업자로서, 더 나은 미래를 위해 도전하고 있습니다.</description>
        <lastBuildDate>Sun, 02 Mar 2025 15:53:03 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <language>ko-KR</language>
        <copyright>All rights reserved 2025, 501</copyright>
        <item>
            <title><![CDATA[신년 맞이 목표 설정: 만다르트 노션 템플릿]]></title>
            <link>https://501story.blog/article/new-year-goal-setting-mandalart-notion-template</link>
            <guid>https://501story.blog/article/new-year-goal-setting-mandalart-notion-template</guid>
            <pubDate>Fri, 03 Jan 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[새해가 다가오면 많은 사람들이 목표를 세우지만, 체계 없이 포기하는 경우가 많습니다. 만다르트 노션 템플릿을 활용하면 시각적으로 깔끔하게 목표와 아이디어를 정리할 수 있어, 성공적인 목표 달성의 첫걸음을 내디딜 수 있습니다.]]></description>
            <content:encoded><![CDATA[<div id="notion-article" class="mx-auto overflow-hidden "><main class="notion light-mode notion-page notion-block-1702f044e4fa8055b026f44f66022c31"><div class="notion-viewport"></div><div class="notion-collection-page-properties"></div><div class="notion-callout notion-gray_background_co notion-block-18e2f044e4fa801cb7c6d75c13fbf30d"><div class="notion-page-icon-inline notion-page-icon-span"><span class="notion-page-icon" role="img" aria-label="😀">😀</span></div><div class="notion-callout-text">새해가 되면 한 번쯤 “올해는 꼭 이루고 싶은 목표”를 세우곤 합니다. 그러나 계획을 체계적으로 구체화하지 못해 중도에 포기하는 경우도 많죠. 이때 <b>만다르트(Mandalart)</b> 기법을 활용하면 시각적으로 직관적인 9×9 격자를 통해 큰 목표를 체계적으로 쪼개고, 실행 방안을 도출할 수 있어 유용합니다.</div></div><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-1702f044e4fa805ba1afe821a99b742f" data-id="1702f044e4fa805ba1afe821a99b742f"><span><div id="1702f044e4fa805ba1afe821a99b742f" class="notion-header-anchor"></div><a class="notion-hash-link" href="#1702f044e4fa805ba1afe821a99b742f" title="만다르트"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">만다르트</span></span></h2><div class="notion-text notion-block-1702f044e4fa80b5a3eac9fe69b5ea53"><b>만다르트(Mandalart)</b>는 목표를 구조적으로 설정하고 아이디어를 확장해 나가는 데 도움을 주는 사고 도구로, 가로 9칸 × 세로 9칸 형태(총 81칸)의 격자를 활용합니다. 시각적·조직적으로 사고를 전개할 수 있어 개인의 목표 달성, 팀 프로젝트 아이디어 발상, 자기계발, 문제 해결 등 다양한 상황에서 활용됩니다.</div><div class="notion-text notion-block-1922f044e4fa800cac54ca5289cbc512">야구 선수 <b>오타니 쇼헤이</b>가 이 기법을 활용해 목표를 달성해 왔다는 성공 사례로도 잘 알려져 있습니다.</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-1702f044e4fa8073bf89db45dc13cba7"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:336px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F383952b9-ad73-4e5e-9cca-475c0e1297de%2Feb4cf2be-bc89-4e46-928c-3bf969970f34%2Fimage.png?table=block&amp;id=1702f044-e4fa-8073-bf89-db45dc13cba7&amp;t=1702f044-e4fa-8073-bf89-db45dc13cba7&amp;width=336&amp;cache=v2" alt="출처: https://www.joongang.co.kr/article/25217005, 원문: https://www.sponichi.co.jp/baseball/news/2013/02/02/gazo/G20130202005109500.html" loading="lazy" decoding="async"/><figcaption class="notion-asset-caption">출처: <a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://www.joongang.co.kr/article/25217005">https://www.joongang.co.kr/article/25217005</a>, 원문: <a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://www.sponichi.co.jp/baseball/news/2013/02/02/gazo/G20130202005109500.html">https://www.sponichi.co.jp/baseball/news/2013/02/02/gazo/G20130202005109500.html</a></figcaption></div></figure><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-1702f044e4fa80cfa773ded8de615863" data-id="1702f044e4fa80cfa773ded8de615863"><span><div id="1702f044e4fa80cfa773ded8de615863" class="notion-header-anchor"></div><a class="notion-hash-link" href="#1702f044e4fa80cfa773ded8de615863" title="2. 만다르트 작성 방법"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">2. 만다르트 작성 방법</span></span></h3><ol start="1" class="notion-list notion-list-numbered notion-block-1922f044e4fa809a863ddfc015b59a88"><li><b>중앙 칸 정하기</b></li><ol class="notion-list notion-list-numbered notion-block-1922f044e4fa809a863ddfc015b59a88"><ul class="notion-list notion-list-disc notion-block-1922f044e4fa804bb84ee6d56214ffee"><li>9×9 격자의 중앙 3×3 구역 한가운데 칸에 달성하고 싶은 가장 중요한 목표(예: 창업, 프로젝트 완수, 개인 역량 강화 등)를 적습니다.</li></ul></ol></ol><ol start="2" class="notion-list notion-list-numbered notion-block-1922f044e4fa80aca8b1f05e245b9dd3"><li><b>중앙 3×3 구역 채우기</b></li><ol class="notion-list notion-list-numbered notion-block-1922f044e4fa80aca8b1f05e245b9dd3"><ul class="notion-list notion-list-disc notion-block-1922f044e4fa80d5b5e2f885b96ea6ee"><li>핵심 목표를 둘러싼 8칸에는 그 목표를 달성하기 위해 필요한 <b>주요 요인</b>이나 <b>큰 카테고리</b>를 적습니다.</li></ul><ul class="notion-list notion-list-disc notion-block-1922f044e4fa802eb72cfeb4c9e5c3e7"><li>예: “사업 아이디어”, “마케팅 전략”, “재무 계획”, “네트워크 확장” 등</li></ul></ol></ol><ol start="3" class="notion-list notion-list-numbered notion-block-1922f044e4fa803fbeadcdd628dc6786"><li><b>주변 3×3 블록 확장</b></li><ol class="notion-list notion-list-numbered notion-block-1922f044e4fa803fbeadcdd628dc6786"><ul class="notion-list notion-list-disc notion-block-1922f044e4fa80f19ab4fb6df75e7458"><li>중앙 3×3 구역에 적힌 카테고리 각각을 중심으로 하여, 주변 8칸에 더 구체적인 실행 방법이나 아이디어를 적습니다.</li></ul><ul class="notion-list notion-list-disc notion-block-1922f044e4fa807cb5deedb35719502a"><li>이렇게 하면 “<b>중앙 목표 → 서브 목표 → 세부 실행 과제</b>”로 단계적으로 아이디어가 확장됩니다.</li></ul></ol></ol><ol start="4" class="notion-list notion-list-numbered notion-block-1922f044e4fa80f7b381eb7ed65f6d7a"><li><b>아이디어 상호 연결 및 재정리</b></li><ol class="notion-list notion-list-numbered notion-block-1922f044e4fa80f7b381eb7ed65f6d7a"><ul class="notion-list notion-list-disc notion-block-1922f044e4fa80879828d3bcd856ce83"><li>서로 관련 있는 항목끼리는 연결선을 긋거나 추가 메모를 달아 <b>유기적인 실행 플랜</b>으로 정리합니다.</li></ul><ul class="notion-list notion-list-disc notion-block-1922f044e4fa80eba239c16425618456"><li>완성 후에는 우선순위를 정하고 일정을 설정해 <b>실질적인 액션 플랜</b>으로 구체화합니다.</li></ul></ol></ol><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-1702f044e4fa809bbaeff3391d73111b" data-id="1702f044e4fa809bbaeff3391d73111b"><span><div id="1702f044e4fa809bbaeff3391d73111b" class="notion-header-anchor"></div><a class="notion-hash-link" href="#1702f044e4fa809bbaeff3391d73111b" title="만다르트 노션 템플릿"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">만다르트 노션 템플릿</span></span></h2><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-1892f044e4fa807a889ae355a7733d06"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:768px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="attachment:c765f41e-83bd-4dd0-b594-2fa83769a373:image.png?t=1892f044-e4fa-807a-889a-e355a7733d06" alt="notion image" loading="lazy" decoding="async"/></div></figure><h4 class="notion-h notion-h3 notion-h-indent-1 notion-block-1892f044e4fa80c9aae8cfa93a0153d8" data-id="1892f044e4fa80c9aae8cfa93a0153d8"><span><div id="1892f044e4fa80c9aae8cfa93a0153d8" class="notion-header-anchor"></div><a class="notion-hash-link" href="#1892f044e4fa80c9aae8cfa93a0153d8" title="이 템플릿의 핵심 특징"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>이 템플릿의 핵심 특징</b></span></span></h4><ol start="1" class="notion-list notion-list-numbered notion-block-1922f044e4fa80fa9825f19f652cc7ef"><li><b>시각적 편의성</b></li><ol class="notion-list notion-list-numbered notion-block-1922f044e4fa80fa9825f19f652cc7ef"><ul class="notion-list notion-list-disc notion-block-1922f044e4fa80af9ddde634e5c9ad6e"><li>노션 페이지 내 9×9 격자가 깔끔하게 구성되어 있어, 각 칸에 목표·아이디어를 직관적으로 배치할 수 있습니다.</li></ul></ol></ol><ol start="2" class="notion-list notion-list-numbered notion-block-1922f044e4fa80a5ae9ce502f68817a3"><li><b>간편한 작성 &amp; 수정</b></li><ol class="notion-list notion-list-numbered notion-block-1922f044e4fa80a5ae9ce502f68817a3"><ul class="notion-list notion-list-disc notion-block-1922f044e4fa80f5b991d061eaab805c"><li>템플릿을 ‘복제(Duplicate)’해 바로 쓸 수 있고, PC·모바일·태블릿 어디서든 접속해 <b>실시간으로 수정</b>이 가능합니다.</li></ul></ol></ol><ol start="3" class="notion-list notion-list-numbered notion-block-1922f044e4fa803ca6a7e6a1b02fc04e"><li><b>자유로운 커스터마이징</b></li><ol class="notion-list notion-list-numbered notion-block-1922f044e4fa803ca6a7e6a1b02fc04e"><ul class="notion-list notion-list-disc notion-block-1922f044e4fa80e0b732c0a4b8e58178"><li>색상, 아이콘, 배경 이미지 등 다양한 요소를 마음대로 바꿔서 <b>나만의 만다르트 보드</b>를 만들 수 있습니다.</li></ul></ol></ol><ol start="4" class="notion-list notion-list-numbered notion-block-1922f044e4fa80048f1dd200caafb475"><li><b>효율적 관리</b></li><ol class="notion-list notion-list-numbered notion-block-1922f044e4fa80048f1dd200caafb475"><ul class="notion-list notion-list-disc notion-block-1922f044e4fa8079acc1f7d905820fda"><li>노션 특유의 <b>토글 기능</b>을 이용해 세부 항목을 숨기거나 펼쳐볼 수 있어, 전체를 깔끔하게 관리할 수 있습니다.</li></ul></ol></ol><h4 class="notion-h notion-h3 notion-h-indent-1 notion-block-1892f044e4fa80c4a298cb2341976a06" data-id="1892f044e4fa80c4a298cb2341976a06"><span><div id="1892f044e4fa80c4a298cb2341976a06" class="notion-header-anchor"></div><a class="notion-hash-link" href="#1892f044e4fa80c4a298cb2341976a06" title="템플릿 구성 안내"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>템플릿 구성 안내</b></span></span></h4><ul class="notion-list notion-list-disc notion-block-1892f044e4fa80d3ba68c83429e98283"><li><b>중앙 목표 칸</b>: 올해(예: 2025년)에 가장 중요하게 달성하고 싶은 목표를 작성</li></ul><ul class="notion-list notion-list-disc notion-block-1892f044e4fa8094ab42e30a82c2d94d"><li><b>8개 세부 영역 칸</b>: 중앙 목표를 돕는 하위 목표 또는 아이디어를 채워넣어 만다르트 구조 완성</li></ul><ul class="notion-list notion-list-disc notion-block-18e2f044e4fa80cc919ffc20a2536351"><li>토글 버튼을 활용하여 각 목표별 세부 내용이나 진행 상황을 숨기거나 펼쳐볼 수 있어 깔끔한 관리가 가능</li></ul><h4 class="notion-h notion-h3 notion-h-indent-1 notion-block-1892f044e4fa808abefaeefcc56f60c0" data-id="1892f044e4fa808abefaeefcc56f60c0"><span><div id="1892f044e4fa808abefaeefcc56f60c0" class="notion-header-anchor"></div><a class="notion-hash-link" href="#1892f044e4fa808abefaeefcc56f60c0" title="이 템플릿이 필요한 분들"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>이 템플릿이 필요한 분들</b></span></span></h4><ul class="notion-list notion-list-disc notion-block-1922f044e4fa8076b636ea5ab1c66317"><li><b>시각적인 목표 설정</b>을 선호하고, 한눈에 아이디어를 정리하고 싶은 분</li></ul><ul class="notion-list notion-list-disc notion-block-1922f044e4fa8018b947e75b8d90a391"><li>복잡한 프로젝트 관리 툴보다는 <b>직관적이고 간단한</b> 방식을 선호하는 분</li></ul><ul class="notion-list notion-list-disc notion-block-1922f044e4fa805da55bf7d732e5cb2d"><li>노션(Notion)을 처음 써보지만 <b>만다르트 기법</b>에 관심이 있는 분</li></ul><ul class="notion-list notion-list-disc notion-block-1922f044e4fa803a89b9f3610f02c127"><li>*새해 계획(예: 2025년 신년 목표)**을 체계적으로 세우고 주기적으로 확인하고 싶은 분</li></ul><ul class="notion-list notion-list-disc notion-block-1922f044e4fa8053904ee338da604081"><li>막연한 아이디어를 <b>구체화</b>해 한눈에 보이는 아이디어 보드가 필요한 분</li></ul><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-1892f044e4fa8048adfec49331a8e2c9" data-id="1892f044e4fa8048adfec49331a8e2c9"><span><div id="1892f044e4fa8048adfec49331a8e2c9" class="notion-header-anchor"></div><a class="notion-hash-link" href="#1892f044e4fa8048adfec49331a8e2c9" title="템플릿 다운로드 링크"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">템플릿 다운로드 링크</span></span></h2><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-1aa2f044e4fa808aaff6d0d23fa860af" href="https://www.notion.com/templates/mandalart-ko"><div><div class="notion-bookmark-title">www.notion.com</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-text">https://www.notion.com/templates/mandalart-ko</div></div></div></a></div></main></div>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[노션에서 다양한 차트와 다이어그램 그리기 팁(with AI, Marmaid.js)]]></title>
            <link>https://501story.blog/article/notion-chart-tips-ai-mermaid-js</link>
            <guid>https://501story.blog/article/notion-chart-tips-ai-mermaid-js</guid>
            <pubDate>Sun, 20 Oct 2024 00:00:00 GMT</pubDate>
            <description><![CDATA[노션에서 차트를 그리는 것은 이제 더 이상 복잡한 작업이 아닙니다. AI와 Mermaid.js를 활용하여 간단하게 다채로운 차트를 만들어보세요!]]></description>
            <content:encoded><![CDATA[<div id="notion-article" class="mx-auto overflow-hidden "><main class="notion light-mode notion-page notion-block-1252f044e4fa8084bf1cf018afaee9bb"><div class="notion-viewport"></div><div class="notion-collection-page-properties"></div><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-1252f044e4fa805ea74ac0fc9c6e74ae" data-id="1252f044e4fa805ea74ac0fc9c6e74ae"><span><div id="1252f044e4fa805ea74ac0fc9c6e74ae" class="notion-header-anchor"></div><a class="notion-hash-link" href="#1252f044e4fa805ea74ac0fc9c6e74ae" title="노션 차트와 다이어그램"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">노션 차트와 다이어그램</span></span></h2><div class="notion-text notion-block-87ec158f25b34dae9f1e9c878b36a254">노션에서는 <a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://mermaid.js.org/">Mermaid.js</a>를 사용하여 텍스트 기반의 차트와 다이어그램을 그릴 수 있습니다.</div><div class="notion-text notion-block-1252f044e4fa800cba36e71cc0e7a3cb">그리고 Mermaid.js 문법에 익숙하지 않아도 걱정 마세요. 차트를 바로 그리고 싶다면 Notion AI를 활용하면 됩니다.</div><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-1252f044e4fa8073b158cec2fbcf8509" data-id="1252f044e4fa8073b158cec2fbcf8509"><span><div id="1252f044e4fa8073b158cec2fbcf8509" class="notion-header-anchor"></div><a class="notion-hash-link" href="#1252f044e4fa8073b158cec2fbcf8509" title="차트 종류"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">차트 종류</span></span></h3><ul class="notion-list notion-list-disc notion-block-b28e0a896e03448f815bb80496dbf14e"><li><b>기본 플로우차트 </b>(Basic Flowchart): 가장 일반적인 형태로, 프로세스의 시작부터 끝까지를 순차적으로 나타냅니다.</li></ul><ul class="notion-list notion-list-disc notion-block-438e2dbd806545a0bb8ad3d0043fa167"><li>상태 다이어그램 (State Diagram): 시스템의 다양한 상태와 상태 간 전환을 나타냅니다.</li></ul><ul class="notion-list notion-list-disc notion-block-beddaa97b19b42a284e38c9315b3e4a2"><li>시퀀스 다이어그램 (Sequence Diagram): 객체 간의 상호작용을 시간 순서대로 보여줍니다.</li></ul><ul class="notion-list notion-list-disc notion-block-1252f044e4fa802b8bb4dc581a8c1b3a"><li>간트 차트 (Gantt Chart): 프로젝트 일정과 작업의 진행 상황을 시간 순으로 표시합니다. 각 작업의 시작과 종료 시간, 진행 기간을 한눈에 볼 수 있어 프로젝트 관리에 유용합니다.</li></ul><ul class="notion-list notion-list-disc notion-block-1252f044e4fa804eb24dc8d24827cd56"><li>… 등등 Mermaid.js를 활용하는 노션에서는 다양한 플로우 차트를 지원합니다. 참고: <a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://501story.blog/article/notion-chart-tips-ai-mermaid-js#1252f044e4fa80668a26de4f9e27fd9d">그 외의 다양한 차트</a> </li></ul><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-1252f044e4fa8060a986f35fe11a187b" data-id="1252f044e4fa8060a986f35fe11a187b"><span><div id="1252f044e4fa8060a986f35fe11a187b" class="notion-header-anchor"></div><a class="notion-hash-link" href="#1252f044e4fa8060a986f35fe11a187b" title="Notion에서 Mermaid 사용 법"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">Notion에서 Mermaid 사용 법</span></span></h2><ol start="1" class="notion-list notion-list-numbered notion-block-4426a3b7d84b4f41aea923f8a633388b"><li>코드 블록 삽입: 새 블록을 만들고 &#x27;/&#x27; 명령어를 입력한 후 &#x27;Code&#x27;를 선택합니다.</li><ol class="notion-list notion-list-numbered notion-block-4426a3b7d84b4f41aea923f8a633388b"><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-1252f044e4fa809e91a7ffb5d36bd885"><div style="position:relative;display:flex;justify-content:center;align-self:start;width:309.99444580078125px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F383952b9-ad73-4e5e-9cca-475c0e1297de%2F69c5a591-79cc-41dc-85cd-ca4f1e12fb7a%2Fimage.png?table=block&amp;id=1252f044-e4fa-809e-91a7-ffb5d36bd885&amp;t=1252f044-e4fa-809e-91a7-ffb5d36bd885&amp;width=309.99444580078125&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure></ol></ol><ol start="2" class="notion-list notion-list-numbered notion-block-4dd836bfc98d45948c0dc9ede9d83d98"><li>언어 선택: 코드 블록의 왼쪽 상단에서 &#x27;Mermaid&#x27;를 선택합니다.</li><ol class="notion-list notion-list-numbered notion-block-4dd836bfc98d45948c0dc9ede9d83d98"><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-1252f044e4fa8064bcbbe09120db4f46"><div style="position:relative;display:flex;justify-content:center;align-self:start;width:309.99444580078125px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F383952b9-ad73-4e5e-9cca-475c0e1297de%2F83b2c60b-3468-4e44-bd09-69988f117b0b%2FScreenshot_2024-10-20_at_5.03.07_PM.png?table=block&amp;id=1252f044-e4fa-8064-bcbb-e09120db4f46&amp;t=1252f044-e4fa-8064-bcbb-e09120db4f46&amp;width=309.99444580078125&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure></ol></ol><ol start="3" class="notion-list notion-list-numbered notion-block-04a8f86ac25944c29c1ccf85861ccea0"><li>플로우차트 코드 작성: Mermaid 문법에 따라 플로우차트 코드를 작성합니다.</li></ol><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-1252f044e4fa803ebcffca0a2ec11483" data-id="1252f044e4fa803ebcffca0a2ec11483"><span><div id="1252f044e4fa803ebcffca0a2ec11483" class="notion-header-anchor"></div><a class="notion-hash-link" href="#1252f044e4fa803ebcffca0a2ec11483" title="간단한 Mermaid 문법"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">간단한 Mermaid 문법</span></span></h3><div class="notion-text notion-block-7f568780a0b748c6932cd3a8460ffe1b">Mermaid 문법은 직관적이고 배우기 쉽습니다. 다음은 기본적인 플로우차트를 만드는 간단한 예시입니다:</div><div class="notion-text notion-block-5a41e4e8ac214bf587221d06f1bdd43a">이 코드는 시작 노드, 결정 노드, 두 개의 프로세스 노드, 그리고 종료 노드를 포함하는 간단한 플로우차트를 생성합니다. 화살표는 프로세스의 흐름을 나타냅니다.</div><div class="notion-text notion-block-1252f044e4fa80098ddbe2a6545b324e">상세한 문법을 알고 싶으시면 <b><a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://mermaid.js.org/syntax/flowchart.html">공식문서</a></b>를 참고해주세요</div><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-1252f044e4fa8006b381cd80909b533b" data-id="1252f044e4fa8006b381cd80909b533b"><span><div id="1252f044e4fa8006b381cd80909b533b" class="notion-header-anchor"></div><a class="notion-hash-link" href="#1252f044e4fa8006b381cd80909b533b" title="Notion AI를 사용한 그리기"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">Notion AI를 사용한 그리기</span></span></h2><ol start="1" class="notion-list notion-list-numbered notion-block-f2298c0e71b0484d95ed0c8b9db4b73c"><li>AI 플로우차트 생성: Notion AI를 사용하여 플로우차트를 자동으로 생성할 수 있습니다. 페이지에 <code class="notion-inline-code">스페이스 두 번</code>을 눌러서 <b>AI 입력을 활성화</b> 시켜줍니다.</li></ol><ol start="2" class="notion-list notion-list-numbered notion-block-1252f044e4fa800381fef0902d1ccc4f"><li>내용 작성: <code class="notion-inline-code">Make a flowchart</code>를 선택하고 작성하고 싶은 내용을 입력합니다.</li><ol class="notion-list notion-list-numbered notion-block-1252f044e4fa800381fef0902d1ccc4f"><div class="notion-text notion-block-1252f044e4fa8068a209e7d5392ad8e2">프롬프트: <code class="notion-inline-code">현재 페이지에 대한 플로우 차트를 그려줘</code></div><div class="notion-text notion-block-1252f044e4fa801682cdf7b864d5baf0"><code class="notion-inline-code">Make a flowchart</code>를 선택하지 않고 바로 AI에게 플로우차트를 만들어달라고 요청할 수도 있습니다. </div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-1252f044e4fa807e8161cf40ce668d42"><div style="position:relative;display:flex;justify-content:center;align-self:start;width:309.99444580078125px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F383952b9-ad73-4e5e-9cca-475c0e1297de%2Fc0e32599-6994-4e06-8cbd-668c96d90f52%2FScreenshot_2024-10-20_at_5.12.17_PM.png?table=block&amp;id=1252f044-e4fa-807e-8161-cf40ce668d42&amp;t=1252f044-e4fa-807e-8161-cf40ce668d42&amp;width=309.99444580078125&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-blank notion-block-1252f044e4fa80c1927add2ccefb1196"> </div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-1252f044e4fa805d9ec9d48f427ed009"><div style="position:relative;display:flex;justify-content:center;align-self:start;width:912px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F383952b9-ad73-4e5e-9cca-475c0e1297de%2F844cb1fb-d938-4dc0-a991-c5543204716e%2Fimage.png?table=block&amp;id=1252f044-e4fa-805d-9ec9-d48f427ed009&amp;t=1252f044-e4fa-805d-9ec9-d48f427ed009&amp;width=912&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure></ol></ol><ol start="3" class="notion-list notion-list-numbered notion-block-5bb52de32d384cefbc6511086df70856"><li>결과 검토 및 수정: AI가 생성한 플로우차트를 검토하고, 필요한 경우 수동으로 수정합니다. Mermaid 코드를 직접 편집하거나 AI에게 추가 지시를 내릴 수 있습니다.</li><ol class="notion-list notion-list-numbered notion-block-5bb52de32d384cefbc6511086df70856"></ol></ol><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-1252f044e4fa80668a26de4f9e27fd9d" data-id="1252f044e4fa80668a26de4f9e27fd9d"><span><div id="1252f044e4fa80668a26de4f9e27fd9d" class="notion-header-anchor"></div><a class="notion-hash-link" href="#1252f044e4fa80668a26de4f9e27fd9d" title="그 외의 다양한 차트"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">그 외의 다양한 차트</span></span></h3><div class="notion-text notion-block-1252f044e4fa808eb84dcecc6bac17f9">Marmaid.js에는 플로우 차트 외에 다양한 차트를 그릴 수 있습니다.</div><div class="notion-text notion-block-1252f044e4fa80af9e69e4ff2e8bac0d">Notion에서는 테이블과 AI를 이용하여 간단하게 다양한 차트를 만들 수 있습니다.</div><div class="notion-text notion-block-1252f044e4fa802496c2e3ae1ec167f4"><b><a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://mermaid.js.org/intro/">공식문서</a></b></div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-1252f044e4fa803d8e34ed43db93c31d"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:233px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F383952b9-ad73-4e5e-9cca-475c0e1297de%2Fe8de65f8-b895-4278-820f-a004b8277b5f%2Fimage.png?table=block&amp;id=1252f044-e4fa-803d-8e34-ed43db93c31d&amp;t=1252f044-e4fa-803d-8e34-ed43db93c31d&amp;width=233&amp;cache=v2" alt="Marmaid.js에서 지원하는 차트 종류" loading="lazy" decoding="async"/><figcaption class="notion-asset-caption">Marmaid.js에서 지원하는 차트 종류</figcaption></div></figure><h4 class="notion-h notion-h3 notion-h-indent-2 notion-block-1252f044e4fa806abb56e0ccc3a285fb" data-id="1252f044e4fa806abb56e0ccc3a285fb"><span><div id="1252f044e4fa806abb56e0ccc3a285fb" class="notion-header-anchor"></div><a class="notion-hash-link" href="#1252f044e4fa806abb56e0ccc3a285fb" title="간트 차트"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">간트 차트</span></span></h4><div class="notion-text notion-block-1252f044e4fa80d0b2bcf10884a3caa8">간트 차트는 테이블의 데이터를 시각적으로 표현하여 각 작업의 기간과 전체 프로젝트 일정을 한눈에 볼 수 있게 해줍니다.</div><div class="notion-text notion-block-440f50b59ccb432fb3536951c8c4986a">다음과 같은 테이블이 있을 때 이를 기반으로 차트를 만들어 달라고 하면 됩니다.</div><details class="notion-toggle notion-block-1252f044e4fa80368ac3f54ab8724fe3"><summary>예시 테이블</summary><div><table class="notion-simple-table notion-block-8b4a374601a54fb1adac004d6bbe1d9a"><tbody><tr class="notion-simple-table-row notion-block-45618d64b7dd4c09a7fb7e90b70e27c0"><td class="" style="width:120px"><div class="notion-simple-table-cell">작업</div></td><td class="" style="width:120px"><div class="notion-simple-table-cell">시작일</div></td><td class="" style="width:120px"><div class="notion-simple-table-cell">종료일</div></td></tr><tr class="notion-simple-table-row notion-block-0593896dd9e649738ec4a75641eda02d"><td class="" style="width:120px"><div class="notion-simple-table-cell">프로젝트 계획</div></td><td class="" style="width:120px"><div class="notion-simple-table-cell">2024-01-01</div></td><td class="" style="width:120px"><div class="notion-simple-table-cell">2024-01-15</div></td></tr><tr class="notion-simple-table-row notion-block-380edfb220444833ab726710c02f8bf5"><td class="" style="width:120px"><div class="notion-simple-table-cell">요구사항 분석</div></td><td class="" style="width:120px"><div class="notion-simple-table-cell">2024-01-16</div></td><td class="" style="width:120px"><div class="notion-simple-table-cell">2024-01-31</div></td></tr><tr class="notion-simple-table-row notion-block-1bca4f09b11743acb4d4a86a676cdbcf"><td class="" style="width:120px"><div class="notion-simple-table-cell">디자인</div></td><td class="" style="width:120px"><div class="notion-simple-table-cell">2024-02-01</div></td><td class="" style="width:120px"><div class="notion-simple-table-cell">2024-02-29</div></td></tr><tr class="notion-simple-table-row notion-block-bb3b8c568f8949bb8f6691d77287c8b7"><td class="" style="width:120px"><div class="notion-simple-table-cell">개발</div></td><td class="" style="width:120px"><div class="notion-simple-table-cell">2024-03-01</div></td><td class="" style="width:120px"><div class="notion-simple-table-cell">2024-04-30</div></td></tr><tr class="notion-simple-table-row notion-block-95a4a4543cd34d41bc91d67ebe3e6514"><td class="" style="width:120px"><div class="notion-simple-table-cell">테스트</div></td><td class="" style="width:120px"><div class="notion-simple-table-cell">2024-05-01</div></td><td class="" style="width:120px"><div class="notion-simple-table-cell">2024-05-15</div></td></tr><tr class="notion-simple-table-row notion-block-10cfefefe15943dd82fde92683945493"><td class="" style="width:120px"><div class="notion-simple-table-cell">배포</div></td><td class="" style="width:120px"><div class="notion-simple-table-cell">2024-05-16</div></td><td class="" style="width:120px"><div class="notion-simple-table-cell">2024-05-31</div></td></tr></tbody></table></div></details><div class="notion-text notion-block-1252f044e4fa80d8b70fc078d61e777b">데이터 베이스의 경우 복사 후 테이블로 변환하여 요청하면 됩니다.</div><ol start="1" class="notion-list notion-list-numbered notion-block-1252f044e4fa809e8da3d4bcdbbbd216"><li>AI에 요청: <code class="notion-inline-code">간트 차트를 그려줘</code></li><ol class="notion-list notion-list-numbered notion-block-1252f044e4fa809e8da3d4bcdbbbd216"><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-1252f044e4fa8024afece389f624f00d"><div style="position:relative;display:flex;justify-content:center;align-self:start;width:309.9888916015625px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F383952b9-ad73-4e5e-9cca-475c0e1297de%2F45175453-95e2-445e-be59-836291e71186%2Fimage.png?table=block&amp;id=1252f044-e4fa-8024-afec-e389f624f00d&amp;t=1252f044-e4fa-8024-afec-e389f624f00d&amp;width=309.9888916015625&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure></ol></ol><ol start="2" class="notion-list notion-list-numbered notion-block-c4a848ddb76a485dad6e219891238718"><li>결과</li><ol class="notion-list notion-list-numbered notion-block-c4a848ddb76a485dad6e219891238718"></ol></ol><div class="notion-text notion-block-01a8c58488a34d42a4391928405e0a49">이 코드는 위 테이블의 데이터를 기반으로 간트 차트를 생성합니다. 각 작업의 시작일과 기간(일 수)을 지정하여 차트를 구성했습니다.</div><h4 class="notion-h notion-h3 notion-h-indent-2 notion-block-1252f044e4fa80fcab5ffeebd3fe8846" data-id="1252f044e4fa80fcab5ffeebd3fe8846"><span><div id="1252f044e4fa80fcab5ffeebd3fe8846" class="notion-header-anchor"></div><a class="notion-hash-link" href="#1252f044e4fa80fcab5ffeebd3fe8846" title="파이 차트 그리기"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">파이 차트 그리기</span></span></h4><div class="notion-text notion-block-795437855a3c4c3d87adbba61714f481">파이 차트는 전체에 대한 부분의 비율을 원형으로 표현하여 데이터의 구성을 직관적으로 보여주는 효과적인 시각화 도구입니다.</div><div class="notion-text notion-block-1252f044e4fa802bae78e74bb50a62d8">간트 차트와 마찬가지로 AI에게 요청하여 쉽게 만들 수 있습니다. </div><details class="notion-toggle notion-block-0c46650346fb4fee9c60449f59a4db85"><summary>예시 테이블</summary><div><table class="notion-simple-table notion-block-39b4d4b424e448329e993368bf93ba44"><tbody><tr class="notion-simple-table-row notion-block-caf60c446fff466d8df0e1f68f82e68f"><td class="" style="width:120px"><div class="notion-simple-table-cell">카테고리</div></td><td class="" style="width:120px"><div class="notion-simple-table-cell">값</div></td></tr><tr class="notion-simple-table-row notion-block-3f20dcb364d743568da6a70469c3f8d4"><td class="" style="width:120px"><div class="notion-simple-table-cell">A</div></td><td class="" style="width:120px"><div class="notion-simple-table-cell">30</div></td></tr><tr class="notion-simple-table-row notion-block-cb7ceb9f5805495eb41277e2032c5a94"><td class="" style="width:120px"><div class="notion-simple-table-cell">B</div></td><td class="" style="width:120px"><div class="notion-simple-table-cell">50</div></td></tr><tr class="notion-simple-table-row notion-block-3543afc9f18741fc975d9cd8a4a5ecea"><td class="" style="width:120px"><div class="notion-simple-table-cell">C</div></td><td class="" style="width:120px"><div class="notion-simple-table-cell">20</div></td></tr><tr class="notion-simple-table-row notion-block-a268ab524be140738cd3e527ff4487e9"><td class="" style="width:120px"><div class="notion-simple-table-cell">D</div></td><td class="" style="width:120px"><div class="notion-simple-table-cell">40</div></td></tr><tr class="notion-simple-table-row notion-block-bdee1291d6334004aa7e648b7dfc3666"><td class="" style="width:120px"><div class="notion-simple-table-cell">E</div></td><td class="" style="width:120px"><div class="notion-simple-table-cell">10</div></td></tr></tbody></table></div></details><ol start="1" class="notion-list notion-list-numbered notion-block-f8f9f2c0c15a4a3faf61eb3b2d4ced00"><li>요청: <code class="notion-inline-code">파이차트를 그려줘</code></li><ol class="notion-list notion-list-numbered notion-block-f8f9f2c0c15a4a3faf61eb3b2d4ced00"><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-1252f044e4fa80c6b1cdcd7d5b98a87c"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:309.99444580078125px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F383952b9-ad73-4e5e-9cca-475c0e1297de%2F5fa8c9d0-6dc7-4229-93e1-11a50e958620%2Fimage.png?table=block&amp;id=1252f044-e4fa-80c6-b1cd-cd7d5b98a87c&amp;t=1252f044-e4fa-80c6-b1cd-cd7d5b98a87c&amp;width=309.99444580078125&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure></ol></ol><ol start="2" class="notion-list notion-list-numbered notion-block-1252f044e4fa80fe9808f077f0b0cce9"><li>결과</li><ol class="notion-list notion-list-numbered notion-block-1252f044e4fa80fe9808f077f0b0cce9"></ol></ol><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-1252f044e4fa8012a820d41b5844508a" data-id="1252f044e4fa8012a820d41b5844508a"><span><div id="1252f044e4fa8012a820d41b5844508a" class="notion-header-anchor"></div><a class="notion-hash-link" href="#1252f044e4fa8012a820d41b5844508a" title="Tips"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">Tips</span></span></h2><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-bade56c35dc8447ca4009e814d5c6edc" data-id="bade56c35dc8447ca4009e814d5c6edc"><span><div id="bade56c35dc8447ca4009e814d5c6edc" class="notion-header-anchor"></div><a class="notion-hash-link" href="#bade56c35dc8447ca4009e814d5c6edc" title="색상 활용"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">색상 활용</span></span></h3><div class="notion-text notion-block-1252f044e4fa8082a0a9e2b1d4ec5d19">Notion AI를 이용해 차트에 다양한 색을 추가할 수 있습니다.</div><ol start="1" class="notion-list notion-list-numbered notion-block-1252f044e4fa8044b9b2f3496b8fbf82"><li>플로우 차트에서 왼쪽의 AI 요청 버튼을 클릭합니다.</li><ol class="notion-list notion-list-numbered notion-block-1252f044e4fa8044b9b2f3496b8fbf82"><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-1252f044e4fa80e79a0ff0ddc4566640"><div style="position:relative;display:flex;justify-content:center;align-self:start;width:292px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F383952b9-ad73-4e5e-9cca-475c0e1297de%2F53eacecc-7000-4111-bb5e-d730a0bec51d%2Fimage.png?table=block&amp;id=1252f044-e4fa-80e7-9a0f-f0ddc4566640&amp;t=1252f044-e4fa-80e7-9a0f-f0ddc4566640&amp;width=292&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure></ol></ol><ol start="2" class="notion-list notion-list-numbered notion-block-1252f044e4fa809cb773d7dd68c844f3"><li>프롬프트를 추가하고 생성합니다.</li><ol class="notion-list notion-list-numbered notion-block-1252f044e4fa809cb773d7dd68c844f3"><div class="notion-text notion-block-1252f044e4fa808a9934f5bd3fa01e92">프롬프트: <code class="notion-inline-code">알록달록 색을 추가해줘</code></div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-1252f044e4fa80549737d7c0c2685e1a"><div style="position:relative;display:flex;justify-content:center;align-self:start;width:768px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F383952b9-ad73-4e5e-9cca-475c0e1297de%2F28020e00-a1fe-48f2-9af2-8e2b5745348f%2Fimage.png?table=block&amp;id=1252f044-e4fa-8054-9737-d7c0c2685e1a&amp;t=1252f044-e4fa-8054-9737-d7c0c2685e1a&amp;width=768&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure></ol></ol><ol start="3" class="notion-list notion-list-numbered notion-block-1252f044e4fa80a6aba6f756928ad7b6"><li>결과</li><ol class="notion-list notion-list-numbered notion-block-1252f044e4fa80a6aba6f756928ad7b6"></ol></ol><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-1252f044e4fa80bfb4e6c796b3dd4946" data-id="1252f044e4fa80bfb4e6c796b3dd4946"><span><div id="1252f044e4fa80bfb4e6c796b3dd4946" class="notion-header-anchor"></div><a class="notion-hash-link" href="#1252f044e4fa80bfb4e6c796b3dd4946" title="코드-미리 보기-분활 보기"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">코드-미리 보기-분활 보기</span></span></h3><div class="notion-text notion-block-e0b2117de0204fc8b688ebe4b3999468">왼쪽 상단의 <code class="notion-inline-code">코드</code>, <code class="notion-inline-code">미리 보기</code>, <code class="notion-inline-code">분할 보기</code>는 Notion에서 차트를 더 효율적으로 작업할 수 있게 해주는 유용한 기능입니다. </div><div class="notion-text notion-block-1252f044e4fa8043adc7f8e15f7ec2bf">이 기능을 사용하면 차트의 코드와 실제 렌더링된 결과를 동시에 볼 수 있어, 실시간으로 변경 사항을 확인하고 수정할 수 있습니다.</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-1252f044e4fa80cd9e3afc70c5c52078"><div style="position:relative;display:flex;justify-content:center;align-self:start;width:224px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F383952b9-ad73-4e5e-9cca-475c0e1297de%2Fed8d0649-16c4-4e3c-822c-606acc915a46%2Fimage.png?table=block&amp;id=1252f044-e4fa-80cd-9e3a-fc70c5c52078&amp;t=1252f044-e4fa-80cd-9e3a-fc70c5c52078&amp;width=224&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure></main></div>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[노션 데이터베이스 랜덤으로 정렬하기]]></title>
            <link>https://501story.blog/article/random-notion-database</link>
            <guid>https://501story.blog/article/random-notion-database</guid>
            <pubDate>Mon, 14 Oct 2024 00:00:00 GMT</pubDate>
            <description><![CDATA[노션 데이터베이스를 랜덤으로 정렬하는 방법에 대해 알아보겠습니다. 이 간단한 트릭을 통해 학습 자료나 팀 프로젝트의 작업 순서를 더욱 효율적으로 관리할 수 있습니다!]]></description>
            <content:encoded><![CDATA[<div id="notion-article" class="mx-auto overflow-hidden "><main class="notion light-mode notion-page notion-block-11f2f044e4fa803d810accf65c317e67"><div class="notion-viewport"></div><div class="notion-collection-page-properties"></div><div class="notion-callout notion-gray_background_co notion-block-11f2f044e4fa80049655e5da4e24d059"><div class="notion-page-icon-inline notion-page-icon-span"><span class="notion-page-icon" role="img" aria-label="😀">😀</span></div><div class="notion-callout-text">저는 영어 예문을 노션 데이터베이스에 저장하고 랜덤으로 정렬해서 외우고 있습니다.
노션은 기본적으로 랜덤 기능을 제공하고 있지 않습니다.<div class="notion-text notion-block-11f2f044e4fa80dabc8ce7b3f238bfd1">하지만 작은 트릭을 이용해서 이를 구현할 수 있습니다.</div></div></div><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-11f2f044e4fa80239709db15f996ce47" data-id="11f2f044e4fa80239709db15f996ce47"><span><div id="11f2f044e4fa80239709db15f996ce47" class="notion-header-anchor"></div><a class="notion-hash-link" href="#11f2f044e4fa80239709db15f996ce47" title="노션 랜덤 정렬이 필요한 경우"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">노션 랜덤 정렬이 필요한 경우</span></span></h2><div class="notion-text notion-block-11f2f044e4fa803c95bed7e97ab2a64c">노션에서 랜덤 정렬 기능이 필요한 이유는 다양할 것 같습니다.</div><ul class="notion-list notion-list-disc notion-block-8df096172f834e709207b444f1b8f5e8"><li>데이터베이스에서 항목을 무작위로 표시해야 할 때</li></ul><ul class="notion-list notion-list-disc notion-block-2af7d2de882746f9a618e77ba80cb384"><li>팀 프로젝트에서 작업 순서를 공정하게 배분하려 할 때</li></ul><ul class="notion-list notion-list-disc notion-block-d2308b0a51d44f368983368f3bcbb1cb"><li>학습 자료나 퀴즈 문제의 순서를 섞어 학습 효과를 높이고 싶을 때</li></ul><ul class="notion-list notion-list-disc notion-block-fdca9846e2b4498785960c7c7992c201"><li>고객 리뷰나 피드백을 무작위로 선택하여 공정하게 분석하고 싶을 때</li></ul><ul class="notion-list notion-list-disc notion-block-abdc5ee089c74cb3acaa60022e5c2710"><li>음식을 랜덤하게 선택하고 싶을 때 (오늘의 메뉴 선정)</li></ul><ul class="notion-list notion-list-disc notion-block-810c3e08736e4bf4aadb388560a322ed"><li>일상적인 결정을 더 재미있게 만들고 싶을 때 (주말 활동 선택)</li></ul><ul class="notion-list notion-list-disc notion-block-87cd9a797d0d4a49bb4510cfd8c6b63d"><li>브레인스토밍 세션에서 아이디어의 순서를 섞어 새로운 연결점을 찾고 싶을 때</li></ul><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-11f2f044e4fa8047bdbceb167ff0f5e7" data-id="11f2f044e4fa8047bdbceb167ff0f5e7"><span><div id="11f2f044e4fa8047bdbceb167ff0f5e7" class="notion-header-anchor"></div><a class="notion-hash-link" href="#11f2f044e4fa8047bdbceb167ff0f5e7" title="랜덤 정렬 방법"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">랜덤 정렬 방법</span></span></h2><ol start="1" class="notion-list notion-list-numbered notion-block-d37aabefcf9a41f889eab0cc593b8476"><li><b>새로운 &#x27;랜덤&#x27; 속성 만들기</b>: 데이터베이스에 새로운 속성을 추가합니다. 이 속성의 유형은 &#x27;수식(Formula)&#x27;으로 설정합니다.</li><ol class="notion-list notion-list-numbered notion-block-d37aabefcf9a41f889eab0cc593b8476"><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-11f2f044e4fa806f94cdf2f2ae697288"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:344.96875px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F383952b9-ad73-4e5e-9cca-475c0e1297de%2Fab63d040-02a9-4bba-808b-02f72d536e89%2Fimage.png?table=block&amp;id=11f2f044-e4fa-806f-94cd-f2f2ae697288&amp;t=11f2f044-e4fa-806f-94cd-f2f2ae697288&amp;width=344.96875&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure></ol></ol><ol start="2" class="notion-list notion-list-numbered notion-block-50b8bcba4ddf488080eb42fdf77a9886"><li>랜덤 값 생성 수식(Formula) 입력: 새로 만든 속성의 공식 필드에 다음 공식을 입력합니다: <code class="notion-inline-code">(((((timestamp(prop(&quot;Created Time&quot;)) * 100011979) + 500067713) % 900066731) * (((timestamp(now()) * 800067089) + 800068411) % 800053967)) + 900067309) % 900066571</code></li><ol class="notion-list notion-list-numbered notion-block-50b8bcba4ddf488080eb42fdf77a9886"><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-11f2f044e4fa8001a5accd30939b69a2"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F383952b9-ad73-4e5e-9cca-475c0e1297de%2Fc92cf92c-23ca-4f3a-b878-2c9a3b97e691%2Fimage.png?table=block&amp;id=11f2f044-e4fa-8001-a5ac-cd30939b69a2&amp;t=11f2f044-e4fa-8001-a5ac-cd30939b69a2&amp;width=1113.953125&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure></ol></ol><ol start="3" class="notion-list notion-list-numbered notion-block-dc97a10c10e2409d985ebc8a19f17b10"><li>랜덤 속성으로 정렬: 데이터베이스 뷰에서 새로 만든 &#x27;랜덤&#x27; 속성을 기준으로 정렬합니다. 이렇게 하면 <span class="notion-red"><b>1분마다 페이지를 새로고침 할 때마다</b></span> 데이터베이스의 항목들이 무작위로 재정렬됩니다.</li><ol class="notion-list notion-list-numbered notion-block-dc97a10c10e2409d985ebc8a19f17b10"><div class="notion-text notion-block-11f2f044e4fa80b9a23fd5a3dbd2d318">(블로그 및 데이터 베이스 링크 내에서는 안됨)</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-11f2f044e4fa803e840af571df08ab46"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F383952b9-ad73-4e5e-9cca-475c0e1297de%2F6ef4ff3d-a999-4de5-86c7-398ba4c8fdb3%2Fimage.png?table=block&amp;id=11f2f044-e4fa-803e-840a-f571df08ab46&amp;t=11f2f044-e4fa-803e-840a-f571df08ab46&amp;width=679.96875&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure></ol></ol><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-11f2f044e4fa80ec8896cd331cf7cd5c" data-id="11f2f044e4fa80ec8896cd331cf7cd5c"><span><div id="11f2f044e4fa80ec8896cd331cf7cd5c" class="notion-header-anchor"></div><a class="notion-hash-link" href="#11f2f044e4fa80ec8896cd331cf7cd5c" title="예시"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">예시</span></span></h2><div class="notion-text notion-block-11f2f044e4fa8074b2e3c4fe71ec67a8">필요하시면 데이터 베이스를 복제해서 사용하세요</div><div class="notion-text notion-block-11f2f044e4fa80bba4cfd14478c40908"><a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://bit.ly/3zZGLlm">데이터 베이스 링크 클릭</a></div><div><div></div><div class="notion-collection-header"><div class="notion-collection-header-title">Random DB</div></div></div><div class="notion-collection notion-block-1212f044e4fa80a7a899f17a07f840a0"><div class="notion-table" style="width:1024px;max-width:1024px"><div class="notion-table-view" style="padding-left:96px;padding-right:96px"><div class="notion-table-header"><div class="notion-table-header-inner"><div class="notion-table-th"><div class="notion-table-view-header-cell" style="width:100px"><div class="notion-table-view-header-cell-inner"><div class="notion-collection-column-title"><svg viewBox="0 0 14 14" class="notion-collection-column-title-icon"><path d="M7.74 8.697a.81.81 0 01.073.308.894.894 0 01-.9.888.867.867 0 01-.825-.592l-.333-.961H2.058l-.333.961a.882.882 0 01-.838.592A.884.884 0 010 9.005c0-.11.025-.222.062-.308l2.403-6.211c.222-.58.776-.986 1.442-.986.653 0 1.22.407 1.442.986l2.39 6.211zM2.6 6.824h2.613L3.907 3.102 2.6 6.824zm8.8-3.118c1.355 0 2.6.542 2.6 2.255V9.08a.8.8 0 01-.789.814.797.797 0 01-.788-.703c-.395.468-1.097.764-1.874.764-.949 0-2.07-.64-2.07-1.972 0-1.392 1.121-1.897 2.07-1.897.789 0 1.491.246 1.886.727v-.826c0-.604-.518-.998-1.306-.998-.469 0-.888.123-1.32.394a.64.64 0 01-.307.086.602.602 0 01-.592-.604c0-.221.123-.419.284-.517a3.963 3.963 0 012.206-.641zm-.222 5.188c.505 0 .998-.172 1.257-.517v-.74c-.259-.345-.752-.517-1.257-.517-.616 0-1.122.332-1.122.9 0 .554.506.874 1.122.874zM.656 11.125h12.688a.656.656 0 110 1.313H.656a.656.656 0 110-1.313z"></path></svg><div class="notion-collection-column-title-body">Name</div></div></div></div></div><div class="notion-table-th"><div class="notion-table-view-header-cell" style="width:110px"><div class="notion-table-view-header-cell-inner"><div class="notion-collection-column-title"><svg viewBox="0 0 14 14" class="notion-collection-column-title-icon"><path d="M7.779 7.063l-3.157 4.224a.49.49 0 00-.072.218.35.35 0 00.346.357h6.242c.476 0 .862.398.862.889v.36c0 .491-.386.889-.862.889H1.862A.876.876 0 011 13.111v-.425a.82.82 0 01.177-.54L4.393 7.8a1.367 1.367 0 00-.006-1.625L1.4 2.194a.822.822 0 01-.18-.544V.89C1.22.398 1.604 0 2.08 0h8.838c.476 0 .861.398.861.889v.36c0 .491-.385.89-.86.89H5.135c-.19 0-.345.159-.345.356a.489.489 0 00.07.216l2.92 3.975c.049.062.063.107.06.188a.246.246 0 01-.062.189z"></path></svg><div class="notion-collection-column-title-body">Random</div></div></div></div></div></div></div><div class="notion-table-header-placeholder"></div><div class="notion-table-body"><div class="notion-table-row"><div class="notion-table-cell notion-table-cell-title" style="width:100px"><span class="notion-property notion-property-title"><a class="notion-page-link" href="/11f2f044e4fa80b1bc03da4d52c6fda9"><span class="notion-page-title"><div class="notion-page-icon-inline notion-page-icon-image"><svg class="notion-page-title-icon notion-page-icon" alt="2" viewBox="0 0 30 30" width="16"><path d="M16,1H4v28h22V11L16,1z M16,3.828L23.172,11H16V3.828z M24,27H6V3h8v10h10V27z M8,17h14v-2H8V17z M8,21h14v-2H8V21z M8,25h14v-2H8V25z"></path></svg></div><span class="notion-page-title-text"><span class="notion-yellow">2</span></span></span></a></span></div><div class="notion-table-cell notion-table-cell-formula" style="width:110px"><span class="notion-property notion-property-formula"></span></div></div><div class="notion-table-row"><div class="notion-table-cell notion-table-cell-title" style="width:100px"><span class="notion-property notion-property-title"><a class="notion-page-link" href="/11f2f044e4fa803bbf66cb75204d75aa"><span class="notion-page-title"><div class="notion-page-icon-inline notion-page-icon-image"><svg class="notion-page-title-icon notion-page-icon" alt="3" viewBox="0 0 30 30" width="16"><path d="M16,1H4v28h22V11L16,1z M16,3.828L23.172,11H16V3.828z M24,27H6V3h8v10h10V27z M8,17h14v-2H8V17z M8,21h14v-2H8V21z M8,25h14v-2H8V25z"></path></svg></div><span class="notion-page-title-text"><span class="notion-yellow">3</span></span></span></a></span></div><div class="notion-table-cell notion-table-cell-formula" style="width:110px"><span class="notion-property notion-property-formula"></span></div></div><div class="notion-table-row"><div class="notion-table-cell notion-table-cell-title" style="width:100px"><span class="notion-property notion-property-title"><a class="notion-page-link" href="/0061057b649b4cd9bf394bb33418915a"><span class="notion-page-title"><div class="notion-page-icon-inline notion-page-icon-image"><svg class="notion-page-title-icon notion-page-icon" alt="1" viewBox="0 0 30 30" width="16"><path d="M16,1H4v28h22V11L16,1z M16,3.828L23.172,11H16V3.828z M24,27H6V3h8v10h10V27z M8,17h14v-2H8V17z M8,21h14v-2H8V21z M8,25h14v-2H8V25z"></path></svg></div><span class="notion-page-title-text"><span class="notion-yellow">1</span></span></span></a></span></div><div class="notion-table-cell notion-table-cell-formula" style="width:110px"><span class="notion-property notion-property-formula"></span></div></div><div class="notion-table-row"><div class="notion-table-cell notion-table-cell-title" style="width:100px"><span class="notion-property notion-property-title"><a class="notion-page-link" href="/11f2f044e4fa8078b816f00d0b68d8bd"><span class="notion-page-title"><div class="notion-page-icon-inline notion-page-icon-image"><svg class="notion-page-title-icon notion-page-icon" alt="4" viewBox="0 0 30 30" width="16"><path d="M16,1H4v28h22V11L16,1z M16,3.828L23.172,11H16V3.828z M24,27H6V3h8v10h10V27z M8,17h14v-2H8V17z M8,21h14v-2H8V21z M8,25h14v-2H8V25z"></path></svg></div><span class="notion-page-title-text"><span class="notion-yellow">4</span></span></span></a></span></div><div class="notion-table-cell notion-table-cell-formula" style="width:110px"><span class="notion-property notion-property-formula"></span></div></div></div></div></div></div><hr class="notion-hr notion-block-11f2f044e4fa80d3af75fd135918d477"/><div class="notion-text notion-block-11f2f044e4fa804cbd3dd689ce994850">참고: <a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://www.reddit.com/r/Notion/comments/i8cuk3/random_shuffle_a_list_table/">https://www.reddit.com/r/Notion/comments/i8cuk3/random_shuffle_a_list_table/</a></div></main></div>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[디자인 AI 툴 비교]]></title>
            <link>https://501story.blog/article/compare-ai-design-tool</link>
            <guid>https://501story.blog/article/compare-ai-design-tool</guid>
            <pubDate>Fri, 11 Oct 2024 00:00:00 GMT</pubDate>
            <description><![CDATA[디자인 AI 툴이 급속도로 발전하면서, UI 디자인 작업을 보다 효율적으로 수행할 수 있는 다양한 선택지가 생겼습니다. 이 글에서는 여러 디자인 AI 툴의 특징과 장단점을 간단히 비교하여 어떤 툴이 여러분의 필요에 적합할지 안내해 드립니다.]]></description>
            <content:encoded><![CDATA[<div id="notion-article" class="mx-auto overflow-hidden "><main class="notion light-mode notion-page notion-block-11b2f044e4fa80c39ed4d53fa0f257d2"><div class="notion-viewport"></div><div class="notion-collection-page-properties"></div><div class="notion-callout notion-gray_background_co notion-block-11b2f044e4fa815a9879e60f18eafc5e"><div class="notion-page-icon-inline notion-page-icon-span"><span class="notion-page-icon" role="img" aria-label="😀">😀</span></div><div class="notion-callout-text">사업을 준비하고 개발을 하면서 UI를 그려야할 일이 많이 있었는데 디자인 AI 툴이 많이 나와있어서 적지 않은 도움을 받았음. 
하지만 각 툴마다 제공하고 필요로 하는 기능들이 달라서 여기에 간단히 정리해 봄.

깊이 있게 사용해 본게 아니라서 부정확 할 수 있습니다.
각 AI 툴이 업데이트 되어서 지금은 많이 다를 수 있습니다.</div></div><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-4a3b95c9082a4c65bec304321b3a5f3c" data-id="4a3b95c9082a4c65bec304321b3a5f3c"><span><div id="4a3b95c9082a4c65bec304321b3a5f3c" class="notion-header-anchor"></div><a class="notion-hash-link" href="#4a3b95c9082a4c65bec304321b3a5f3c" title="디자인 AI 툴 비교"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">디자인 AI 툴 비교</span></span></h2><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-d09e15cc35de432887481256687751ae" data-id="d09e15cc35de432887481256687751ae"><span><div id="d09e15cc35de432887481256687751ae" class="notion-header-anchor"></div><a class="notion-hash-link" href="#d09e15cc35de432887481256687751ae" title="Visily"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://www.visily.ai/">Visily</a></span></span></h3><ul class="notion-list notion-list-disc notion-block-4cc5d9d246234bfab2a8c9f58b7495e5"><li>Lo-fi, Hi-fi, Diagram 기능 지원</li></ul><ul class="notion-list notion-list-disc notion-block-b5ae2a1208e040f5a7ac45984436866a"><li>플로우 차트 및 UI 개발에 AI 기능을 제공하는 듯함</li></ul><ul class="notion-list notion-list-disc notion-block-11c2f044e4fa805d876dff7192b0fb8a"><li>플로우대로 UI를 한 번에 그려주지 않는 것처럼 보임</li></ul><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-d129aec860494fd98c67b7205ac1b228" data-id="d129aec860494fd98c67b7205ac1b228"><span><div id="d129aec860494fd98c67b7205ac1b228" class="notion-header-anchor"></div><a class="notion-hash-link" href="#d129aec860494fd98c67b7205ac1b228" title="Creatie"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://creatie.ai/">Creatie</a></span></span></h3><ul class="notion-list notion-list-disc notion-block-cc4148d11a1e4824baacb033db34c3d7"><li>생성형 AI가 아니고 사전에 정의된 수많은 컴포넌트를 손쉽게 가져오는 방식인 듯함</li></ul><ul class="notion-list notion-list-disc notion-block-0d0309b9615d4ba5a4987dd1e2bfe709"><li>다양한 기본 기능 제공</li></ul><ul class="notion-list notion-list-disc notion-block-11c2f044e4fa80b5ab83c0fb4e6009a9"><li>Figma에 정의된 파일을 임포트할 수 있으며 어느 정도 잘 가져옴</li><ul class="notion-list notion-list-disc notion-block-11c2f044e4fa80b5ab83c0fb4e6009a9"><li>물론 완벽하게 가져오지는 않음</li></ul></ul><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-d82b4de276fb4f27a30f2b935b258448" data-id="d82b4de276fb4f27a30f2b935b258448"><span><div id="d82b4de276fb4f27a30f2b935b258448" class="notion-header-anchor"></div><a class="notion-hash-link" href="#d82b4de276fb4f27a30f2b935b258448" title="Wegic"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://wegic.ai/">Wegic</a></span></span></h3><ul class="notion-list notion-list-disc notion-block-fe2d7883096e4d6391cc9a11d8b0f6ab"><li>채팅 기반 디자인 인터페이스</li></ul><ul class="notion-list notion-list-disc notion-block-7d6119615dcc4cfcba2c5156a134c66b"><li>코드를 가져오는 것에 제한이 있음</li></ul><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-2bb793a380aa4cbbb305ee947de5a159" data-id="2bb793a380aa4cbbb305ee947de5a159"><span><div id="2bb793a380aa4cbbb305ee947de5a159" class="notion-header-anchor"></div><a class="notion-hash-link" href="#2bb793a380aa4cbbb305ee947de5a159" title="Use Galileo"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://www.usegalileo.ai/">Use Galileo</a></span></span></h3><ul class="notion-list notion-list-disc notion-block-c3080ccdfb2f4aa59f4632ca2be81b12"><li>결과물이 대체로 다 비슷비슷함</li></ul><ul class="notion-list notion-list-disc notion-block-637271f6b29c4220b09ea82b093ef30b"><li>결과물을 Figma로 직접 복사 가능한 것이 큰 장점</li><ul class="notion-list notion-list-disc notion-block-637271f6b29c4220b09ea82b093ef30b"><li>이것 때문에 두 달간 결제해서 사용</li><li>하지만 Figma에 복제된 것들은 계층 구조가 뒤죽박죽이며 일관성이 부족함</li></ul></ul><ul class="notion-list notion-list-disc notion-block-11c2f044e4fa8045a33ff90c50c6bd8e"><li>개인적으로 결제했을 때, 절반의 크레딧도 사용하기 힘들었음</li></ul><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-81f276cb077a4718a1c683c4a1f0cbf0" data-id="81f276cb077a4718a1c683c4a1f0cbf0"><span><div id="81f276cb077a4718a1c683c4a1f0cbf0" class="notion-header-anchor"></div><a class="notion-hash-link" href="#81f276cb077a4718a1c683c4a1f0cbf0" title="Uizard"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://uizard.io/">Uizard</a></span></span></h3><ul class="notion-list notion-list-disc notion-block-b8d998c030a74e1f87533598abeb6132"><li>AI로 전체 흐름을 다 만들어 줘서 전체적인 흐름 설계에 유용</li><ul class="notion-list notion-list-disc notion-block-b8d998c030a74e1f87533598abeb6132"><li>그런데 막상 보면 30% 정도만 사용 가능한 것 같았음</li><li>그래도 이것 때문에 세 달간 결제해서 사용함</li></ul></ul><ul class="notion-list notion-list-disc notion-block-11c2f044e4fa80569a85ff4da71ee66d"><li>Figma의 컴포넌트를 임포트할 수 있는 방법 제공</li><ul class="notion-list notion-list-disc notion-block-11c2f044e4fa80569a85ff4da71ee66d"><li>크고 복잡한 컴포넌트는 임포트가 안 되는 것으로 보임</li></ul></ul><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-fb6b9366d68840348d4ff5ff12d75bba" data-id="fb6b9366d68840348d4ff5ff12d75bba"><span><div id="fb6b9366d68840348d4ff5ff12d75bba" class="notion-header-anchor"></div><a class="notion-hash-link" href="#fb6b9366d68840348d4ff5ff12d75bba" title="CraftUI"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://craftui.studio/">CraftUI</a></span></span></h3><ul class="notion-list notion-list-disc notion-block-11c2f044e4fa80629318e21742c7b2ac"><li>사용해 보지 않음</li></ul><ul class="notion-list notion-list-disc notion-block-c9e93111611d4c668a19ee505676850a"><li>직관적인 인터페이스와 AI 기반 인사이트 제공</li></ul><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-842645d5eee649348c3a82c52e6bc3af" data-id="842645d5eee649348c3a82c52e6bc3af"><span><div id="842645d5eee649348c3a82c52e6bc3af" class="notion-header-anchor"></div><a class="notion-hash-link" href="#842645d5eee649348c3a82c52e6bc3af" title="Webcrumbs"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://www.webcrumbs.org/frontend-ai">Webcrumbs</a></span></span></h3><ul class="notion-list notion-list-disc notion-block-08f83443b801420eb04ce5dccd343c34"><li>사용해 보지 않음</li></ul><ul class="notion-list notion-list-disc notion-block-08e25c870105418f8686cd4561dc68d6"><li>이미지와 텍스트로부터 컴포넌트 생성 가능</li></ul><ul class="notion-list notion-list-disc notion-block-f14d742809d84dbf80ffb6b74aaa99b1"><li>오픈소스 JavaScript 플러그인 빌더 제공 예정</li></ul><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-e1ffdba3d2b440ebb68abe8a3e1395fb" data-id="e1ffdba3d2b440ebb68abe8a3e1395fb"><span><div id="e1ffdba3d2b440ebb68abe8a3e1395fb" class="notion-header-anchor"></div><a class="notion-hash-link" href="#e1ffdba3d2b440ebb68abe8a3e1395fb" title="Motiff"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://motiff.com/">Motiff</a></span></span></h3><ul class="notion-list notion-list-disc notion-block-6fc45e2021284c7eb85991d0ed6a5c1b"><li>무료로 어느 정도 사용 가능</li></ul><ul class="notion-list notion-list-disc notion-block-11c2f044e4fa80e3b482d5daa208bb27"><li>주변에서 결과물이 만족스럽게 나왔다고 했음</li></ul><ul class="notion-list notion-list-disc notion-block-11c2f044e4fa801481fbda35d1399828"><li>사용해 보지 않음</li></ul><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-73ebc323a5ed4840a861326b353295b7" data-id="73ebc323a5ed4840a861326b353295b7"><span><div id="73ebc323a5ed4840a861326b353295b7" class="notion-header-anchor"></div><a class="notion-hash-link" href="#73ebc323a5ed4840a861326b353295b7" title="Figma"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://www.figma.com/">Figma</a></span></span></h3><ul class="notion-list notion-list-disc notion-block-4aa81403420140ddb34e2fd9c73a5906"><li>업계 표준 디자인 툴로, AI 기능을 점진적으로 통합 중</li></ul><ul class="notion-list notion-list-disc notion-block-11c2f044e4fa80139adceecbfea1df8f"><li>아직은 워크플로우 전체를 한 번에 만들어 주지 않음</li></ul><ul class="notion-list notion-list-disc notion-block-11c2f044e4fa804baf94cc8ab84c5ea3"><li>Figma 디자인 서포트 개념으로 사용 가능한 듯</li></ul><ul class="notion-list notion-list-disc notion-block-b5255a7cc32a4a1ca47a4df895c887cd"><li>Flutter 코드를 생성해 주는 <a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://www.figma.com/community/plugin/842128343887142055/figma-to-code-html-tailwind-flutter-swiftui">Figma to Code</a> 플러그인이 있어서 다른 툴로 대체하기가 쉽지 않음</li></ul><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-11c2f044e4fa80989df8f644d56feb31" data-id="11c2f044e4fa80989df8f644d56feb31"><span><div id="11c2f044e4fa80989df8f644d56feb31" class="notion-header-anchor"></div><a class="notion-hash-link" href="#11c2f044e4fa80989df8f644d56feb31" title="결론"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">결론</span></span></h2><div class="notion-text notion-block-6979517fdfaf4529a6f7b542bbb44d6c">각 디자인 AI 툴마다 특징이 있어서 필요에 따라 선택해서 사용하면 좋을 것 같음.</div><div class="notion-text notion-block-11c2f044e4fa8017a3e0c180e53c32e1">Visily나 Uizard는 전체적인 흐름을 잡는 데 도움이 되고, Galileo나 Figma는 실제 디자인 작업에 더 유용해 보임.</div><div class="notion-text notion-block-11c2f044e4fa800480adfdea9a335a99">결국 자기 작업 스타일이나 프로젝트에 맞춰서 툴을 고르고, 필요하면 여러 개를 섞어 쓰는 게 효과적일 듯.</div><div class="notion-text notion-block-11c2f044e4fa80689542c9be923f92fb">아직까지 딱 하나로 정착하지는 못함.</div><div class="notion-text notion-block-11d2f044e4fa80218f79f8e67641a5b3">생성은 다른 것들로 하더라도 실제 개발할 땐 Figma를 벗어나긴 힘들 것 같음.</div><div class="notion-blank notion-block-11f2f044e4fa8057ac41d0a88325be47"> </div></main></div>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Notion(노션) 기반 무료 블로그]]></title>
            <link>https://501story.blog/article/notion-blog</link>
            <guid>https://501story.blog/article/notion-blog</guid>
            <pubDate>Wed, 09 Oct 2024 00:00:00 GMT</pubDate>
            <description><![CDATA[노션의 데이터베이스를 사용하는 무료 블로그 오픈소스를 찾고 정리해 보았다.]]></description>
            <content:encoded><![CDATA[<div id="notion-article" class="mx-auto overflow-hidden "><main class="notion light-mode notion-page notion-block-11a2f044e4fa8007ae10dcf5c96847f0"><div class="notion-viewport"></div><div class="notion-collection-page-properties"></div><div class="notion-blank notion-block-11a2f044e4fa80e88c62ca651f80a0bc"> </div><div class="notion-callout notion-gray_background_co notion-block-11c2f044e4fa805aadfee60650cfd528"><div class="notion-page-icon-inline notion-page-icon-span"><span class="notion-page-icon" role="img" aria-label="😀">😀</span></div><div class="notion-callout-text">Notion의 데이터베이스를 이용하여 무료로 블로깅이 가능할 것 같아서 이것저것 찾아본 기록을 간단히 정리해 봄.<div class="notion-text notion-block-11c2f044e4fa80bfbc66ca4043f410d1"><code class="notion-inline-code">Next.js</code>기반에 SSR, SSG가 가능하고 활발히 관리되는 오픈소스를 찾아봄</div></div></div><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-6ff1c4fe7b7243a39ce79d39a53d0027" data-id="6ff1c4fe7b7243a39ce79d39a53d0027"><span><div id="6ff1c4fe7b7243a39ce79d39a53d0027" class="notion-header-anchor"></div><a class="notion-hash-link" href="#6ff1c4fe7b7243a39ce79d39a53d0027" title="Notion 기반 블로그(사이트 생성) 오픈소스 비교"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">Notion 기반 블로그(사이트 생성) 오픈소스 비교</span></span></h2><div class="notion-text notion-block-11458293bde444fca4829d741e86d7d3">각 솔루션의 장단점을 간략히 정리해보면 다음과 같다:</div><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-11a2f044e4fa8017b21fc82637d60f28" data-id="11a2f044e4fa8017b21fc82637d60f28"><span><div id="11a2f044e4fa8017b21fc82637d60f28" class="notion-header-anchor"></div><a class="notion-hash-link" href="#11a2f044e4fa8017b21fc82637d60f28" title="nextjs-notion-starter-kit"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://github.com/transitive-bullshit/nextjs-notion-starter-kit">nextjs-notion-starter-kit</a></span></span></h3><ul class="notion-list notion-list-disc notion-block-11a2f044e4fa80fab803dc1f1b6d7fe3"><li>가장 많이 사용하는 듯</li></ul><ul class="notion-list notion-list-disc notion-block-11a2f044e4fa803180a5c651d439acbe"><li>개발도 느리고 이슈 처리도 잘 안되는 듯</li></ul><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-11a2f044e4fa80749c3fece62209649d" data-id="11a2f044e4fa80749c3fece62209649d"><span><div id="11a2f044e4fa80749c3fece62209649d" class="notion-header-anchor"></div><a class="notion-hash-link" href="#11a2f044e4fa80749c3fece62209649d" title="rotion"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://github.com/linyows/rotion">rotion</a></span></span></h3><ul class="notion-list notion-list-disc notion-block-11a2f044e4fa8041baecc8e77bed113b"><li>노션을 그대로 보여주는 듯하다</li></ul><ul class="notion-list notion-list-disc notion-block-11a2f044e4fa8099b392ff2b0f174d37"><li>아직 데이터베이스 내의 컨텐츠 접근이 불가능함</li></ul><ul class="notion-list notion-list-disc notion-block-11a2f044e4fa8069aafecd138f2b1994"><li>열심히 개발중인듯</li></ul><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-11a2f044e4fa8016a991e1fa84d5e2be" data-id="11a2f044e4fa8016a991e1fa84d5e2be"><span><div id="11a2f044e4fa8016a991e1fa84d5e2be" class="notion-header-anchor"></div><a class="notion-hash-link" href="#11a2f044e4fa8016a991e1fa84d5e2be" title="morethan-log"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://github.com/morethanmin/morethan-log">morethan-log</a></span></span></h3><ul class="notion-list notion-list-disc notion-block-c845e421c7e246be8682a81b48233431"><li>한국에서 많이 사용</li></ul><ul class="notion-list notion-list-disc notion-block-11a2f044e4fa80c28deaebda1ff536b3"><li>기능도 많고 한국 특화 기능도 있음</li></ul><ul class="notion-list notion-list-disc notion-block-11a2f044e4fa80e08ef7e8104cf6a358"><li>기본 노션 템플릿 접근이 안됨 😢</li><ul class="notion-list notion-list-disc notion-block-11a2f044e4fa80e08ef7e8104cf6a358"><li>관련 이슈도 없고 전반적인 이슈 관리도 잘 안되는 것 같음</li></ul></ul><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-11a2f044e4fa8008ac23ddcf4c6def8e" data-id="11a2f044e4fa8008ac23ddcf4c6def8e"><span><div id="11a2f044e4fa8008ac23ddcf4c6def8e" class="notion-header-anchor"></div><a class="notion-hash-link" href="#11a2f044e4fa8008ac23ddcf4c6def8e" title="notion-blog"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://github.com/ijjk/notion-blog">notion-blog</a></span></span></h3><ul class="notion-list notion-list-disc notion-block-5585511fff77425f9811853304681a96"><li>3년 전이 마지막 업데이트</li></ul><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-11a2f044e4fa80cb9b4bcea62ed44308" data-id="11a2f044e4fa80cb9b4bcea62ed44308"><span><div id="11a2f044e4fa80cb9b4bcea62ed44308" class="notion-header-anchor"></div><a class="notion-hash-link" href="#11a2f044e4fa80cb9b4bcea62ed44308" title="notion-api-worker"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://github.com/splitbee/notion-api-worker">notion-api-worker</a></span></span></h3><ul class="notion-list notion-list-disc notion-block-11a2f044e4fa80f39f4cc6b759399fd4"><li>사이트 생성은 아니지만 public access 노션 데이터를 API로 가져올 수 있음</li></ul><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-11a2f044e4fa80d0a706d729dcddcd91" data-id="11a2f044e4fa80d0a706d729dcddcd91"><span><div id="11a2f044e4fa80d0a706d729dcddcd91" class="notion-header-anchor"></div><a class="notion-hash-link" href="#11a2f044e4fa80d0a706d729dcddcd91" title="notablog"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://github.com/dragonman225/notablog">notablog</a></span></span></h3><ul class="notion-list notion-list-disc notion-block-475022baa23448eeba7c7225fd14884b"><li>아주 훌륭한데 next.js가 아님</li></ul><ul class="notion-list notion-list-disc notion-block-46c7e57c2f3a4173a0c708da204cd19d"><li>데이터베이스 내의 아이템은 노션으로 이동함</li></ul><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-11a2f044e4fa8099b312d4f478af7a9d" data-id="11a2f044e4fa8099b312d4f478af7a9d"><span><div id="11a2f044e4fa8099b312d4f478af7a9d" class="notion-header-anchor"></div><a class="notion-hash-link" href="#11a2f044e4fa8099b312d4f478af7a9d" title="jarocki.me"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://github.com/BartoszJarocki/jarocki.me">jarocki.me</a></span></span></h3><ul class="notion-list notion-list-disc notion-block-9a37c826813b41308be64d40d18176ae"><li>전반적으로 맘에 들지만 search 없음</li></ul><ul class="notion-list notion-list-disc notion-block-360aee9c91e14684ac7bcbff88ac4f18"><li>og와 seo에 쓸만한 내용 있음</li></ul><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-11a2f044e4fa80d08360d4ddb0259afa" data-id="11a2f044e4fa80d08360d4ddb0259afa"><span><div id="11a2f044e4fa80d08360d4ddb0259afa" class="notion-header-anchor"></div><a class="notion-hash-link" href="#11a2f044e4fa80d08360d4ddb0259afa" title="NotionNext"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://github.com/tangly1024/NotionNext">NotionNext</a></span></span></h3><ul class="notion-list notion-list-disc notion-block-aa2a071f043e409db0b9e85e8bd9bb8c"><li>Javascript로 되어 있지만 <code class="notion-inline-code">next.js</code>를 사용하고 있음</li></ul><ul class="notion-list notion-list-disc notion-block-11a2f044e4fa80729f1ae4ec9445a479"><li>활발히 업데이트 및 이슈 관리를 하고 있는 것으로 보임</li></ul><ul class="notion-list notion-list-disc notion-block-d6c6426a41a042dbbfdb6810d9a303cf"><li>중국어이고 예시가 너무 뒤죽박죽임</li></ul><ul class="notion-list notion-list-disc notion-block-11a2f044e4fa80f69012f823be1a6fa8"><li>기능 다양함, 테마 다양함</li></ul><ul class="notion-list notion-list-disc notion-block-11a2f044e4fa809dacb6cad7eba46658"><li>한국어 지원 안함</li></ul><div class="notion-blank notion-block-11a2f044e4fa80fb8b4ec8cbe26b2b3f"> </div><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-11a2f044e4fa801e94ebfc31a549a4d8" data-id="11a2f044e4fa801e94ebfc31a549a4d8"><span><div id="11a2f044e4fa801e94ebfc31a549a4d8" class="notion-header-anchor"></div><a class="notion-hash-link" href="#11a2f044e4fa801e94ebfc31a549a4d8" title="결론"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">결론</span></span></h2><div class="notion-text notion-block-11a2f044e4fa80a8a811f3b2e233e211"><code class="notion-inline-code">NotionNext</code>를 선택함.</div><div class="notion-text notion-block-11a2f044e4fa80429901ce720e51f0e2">OG, 검색, SSG, SSR 등 다양한 기능을 지원하고 테마도 다양함.</div><div class="notion-text notion-block-cbe919cfcde248f4ae5719e448a4ef85">필요한 기능은 적당히 커스텀 하는 것으로 충분할 것 같음.</div><div class="notion-blank notion-block-11a2f044e4fa80079d7bfb82c1410d2b"> </div></main></div>]]></content:encoded>
        </item>
    </channel>
</rss>