정보들을 모아보자

최근 웹사이트와 앱을 만드는 방식이 빠르게 바뀌고 있습니다.예전에는 기획 → 디자인 → 개발 순서로 진행되었다면, 이제는 프롬프트만으로 UI와 코드까지 생성하는 시대가 되었습니다.이번 글에서는 요즘 많이 언급되는 AI UI 도구 6가지를 정리해 보겠습니다.RelumeUizardFigma MakeStitchFramer AIv0각 서비스가 어떤 역할을 하는지, 그리고 실무에서 어떻게 활용되는지 중심으로 살펴보겠습니다. 1. Relume한 줄 요약웹사이트 사이트맵과 와이어프레임을 자동 생성해 주는 AI 도구입니다.주요 기능텍스트 입력 → 사이트맵 자동 생성사이트맵 → 와이어프레임 자동 생성디자인 시스템(Style Guide) 생성Figma / Webflow / React export다양한 웹 UI 컴포넌트 제..

최근 디자인 커뮤니티나 개발자 커뮤니티에서 Affinity라는 이름을 자주 볼 수 있습니다.특히 Adobe 대체 프로그램으로 많이 언급되면서 관심을 갖는 사람들이 늘고 있습니다. 그렇다면 Affinity와 Adobe는 어떤 차이가 있을까요? 그리고 Affinity.studio 사이트는 무엇을 하는 곳일까요? 이번 글에서는 두 서비스의 특징과 차이를 쉽게 정리해 보겠습니다. Affinity.studio는 어떤 사이트인가Affinity.studio는 그래픽 디자인 소프트웨어 Affinity를 소개하고 다운로드할 수 있는 공식 웹사이트입니다.이 프로그램은 원래 세 가지 디자인 프로그램으로 구성되어 있었습니다.Affinity Designer – 벡터 디자인 (Illustrator와 유사)Affinity Pho..

일단 에드센스 광고비멤버쉽 - 유료 구독슈퍼챗제휴마케팅쇼핑스토어채널판매

Next.js는 전체 레이아웃을 공유하기 때문에 각 레이아웃별로 폴더를 나누어주어야 합니다.폴더명에 ()를 사용하는 경우 URL에 반영되지 않습니다.폴더 구조의 변경에 따라 layout.tsx 파일 내에 있는 globals.css 파일경로 수정이 필요합니다. app/ (dashboard)/ layout.tsx home/ page.tsx ← /home (open)/ layout.tsx page.tsx ← / about/ page.tsx ← /about 대시보드 유무에 따른 폴더 분기였습니다.

Shadcn/ui는 React + Tailwind 기반의 UI 컴포넌트 라이브러리입니다.컴포넌트가 프로젝트 안으로 복사되기 때문에 직접 수정해서 쓸 수 있어 쉽게 수정할 수 있습니다. /projrct 폴더에 Shadcn/ui를 설치합니다.옵션은 기본으로 설치합니다. npx shadcn@latest init 간단하게 설치가 완료되었습니다. The Foundation for your Design System - shadcn/uiA set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.ui.shadcn.com

Next.js는 React 기반의 풀스택 프레임워크입니다. / 폴더에 Next.js를 설치합니다.설치 과정 중에 project 폴더가 생성됩니다. 나머지 옵션은 기본으로 설치합니다. npx create-next-app@latest 간단하게 설치가 완료 되었습니다. Next.js by Vercel - The React FrameworkNext.js by Vercel is the full-stack React framework for the web.nextjs.org