Next.js의 로우코드 디자인: 시각적 개발 도구 데모

### Next.js의 로우코드 디자인: 브라우저 기반 비주얼 개발 도구
* 🛠 뉴사우스웨일스 주립 도서관의 Carho는 사용자가 코드를 건드리지 않고도 웹 콘텐츠를 업데이트할 수 있는 **Next.js의 시각적 개발 개념 증명**을 소개합니다.
* 🎨 Next.js 및 Tailwind CSS로 구축된 이 도구를 사용하면 **브라우저에서 직접 디자인을 변경하여 코드에 반영**할 수 있으므로 기존의 디자인-개발 간 핸드오프가 필요하지 않습니다.
* 👩 디자이너는 **브라우저 UI에서 텍스트, 이미지, 스타일, 레이아웃을 직접 수정**할 수 있으며 변경 사항은 기본 코드베이스에 즉시 적용됩니다.
* 🔄 이 프로젝트는 **React의 디버그 데이터를 활용**하여 컴포넌트의 특정 인스턴스를 대상으로 하고, **Next.js API 경로를 사용**하여 로컬 파일에 액세스하고 수정하며, **빠른 새로고침을 트리거**하여 UI를 업데이트합니다.
* ✅ 이 접근 방식의 장점은 **디자인 파일이 코드베이스가 되어 핸드오프 비효율을 없애고, 이해관계자의 즉각적인 피드백이 가능**하며, **실제 데이터 사용**을 보장한다는 점입니다.
* ❌ 단점으로는 **디자이너가 CSS에 대한 전문 지식**이 필요하고, **잠재적인 디자인 제한**이 있으며, **특정 개발 환경을 설정**해야 한다는 점이 있습니다.
* 🔍 향후 계획에는 **다른 React 프레임워크(개츠비, Create React App)를 탐색**하고 **다른 프런트엔드 프레임워크(Angular, Vue, Svelte)와의 호환성 조사**가 포함됩니다.
* 👏 Carho는 프로젝트 코드를 공유하고 피드백에 대한 관심을 표명하며 이 도구의 실험적인 특성을 인정하고 **컨퍼런스에서 발표할 기회**를 준 **Next.js와 Vercel에 감사를 표명**하며 마무리했습니다.

Carho는 디자인 및 개발자 핸드오프 비효율성을 없애기 위해 Next.js에서 시각적 개발을 위한 브라우저 기반 도구를 개발 중입니다.

hey everybody, I'm Carho. I'm here to talk to you about low-code design in Next.js at the Next.js conference. Just quickly about me, I'm from the State Library New South Wales, Australia. I work as the DX Lab technical lead there, and I also have a design background. I started out life as a designer doing print and web design and industrial design as well. So, low-code design. If you're not familiar with low-code design, think of it as a way of visually building your software, using a UI (user interface) to build code, to write code for you. It's become quite popular in the last few years. I'm here to talk about it in Next.js. So, I've been working on a proof of concept that brings visual development to Next.js. It's a browser-based tool, so it works entirely in your browser, and it means it helps you change styles and more without touching any code. The reason for me investigating this project is I've noticed that there's been a few problems with design and developer

handoff over the years a typical workflow starts off with the designer sending a finished kind of file sketch or figma photoshop whatever to the developer but quite often there's a few problems such as it not using the real data. It uses mock data fake data. Also, the file isn't totally fluid. It's just kind of the static sort of renderings of what it could look like so there's a few issues there. Also, things like hover and focus active states quite often than not in the file as well. There are also many inefficiencies of hand-off this design file. Many many hours have been spent on this design file. I've done these myself also. It takes a long time to implement it in code as well and a bit extra time for pairing just to kind of make sure you fix the things that the designer notices. So it feels like double handling the solution let's just get rid of hand off entirely. Well, let's try to and design directly in the browser design with production code means that there's no back and forth.

between design and development, it's just one workflow. So, I've got a bit of a demo to show everybody, and it uses Next.js and Tailwind CSS. Tailwind CSS is a utility-first CSS library. So, this is a Next.js page. Really simple. It's got an image, some text as well, and I have a UI that I've been working on that lets you make updates to the contents of this page. So, let's just say I select trumpet. I can also select the date as well, and also the image. And I'll select this text here, and I can increase the font size of it, make it a bit bigger. I can also make it more bold. Actually, I can change the contents of it as well. This talented gentleman is not only playing the trumpet, he's playing the piano as well. I can change the background color as well. Let's make it a little bit more vibrant like that, or like that. Stick with that for now, and update our text color, perhaps like that. So, I'm making changes in the browser, but

they're actually being changed inside the code as well, so let's just say let's keep an eye out for the um class names here. And this is tailwind css, by the way, so it's all utility css, makes this project a lot easier to build um. And I will change it to yellow, and there we go, text just got changed to yellow. I can also um have access to a layers panel, so I'm able to do things like this and select a div and make a few changes like so, change the margin and the padding as well. And once again, these changes are reflected in the code as well, so hopefully you can sort of see how how much time could be saved if the designer just had access to this and was able to just make these changes without having to harass the developer to to do these changes. I've got another demo here, and this is a little bit more involved, so the code here just got a little bit of an array with a couple of things, and then I have a demo card component right.

so this is all within the page. So let's go inside the demo card component, and I'll open up my UI. Zoom out a little bit and say I select this text here. Once again, keep an eye out for the title. Okay, so right now it's white. So I've got this selected. I can make it green. I can make it blue. And notice that the other component is also changing because they're the same instances of the different instances of the same component. So how is this possible? I'll give a little bit of a breakdown. I use React's debug data, and you can access it with a code like this: target instance debug source. Very, very useful. And it looks a bit like this. So for that particular element, the line number and the column number of that bit of code is described, and also the direct absolute file path of the component. Um, super, super useful. So I send these to the API, and I'm using Next.js API routes. And then in this API, it has access to the local hard drive. So use FS module to

read and save the file. Also, use Babel and Prettier to make changes to class names and add elements as well. And also update the text. And then, once the file is saved, Fast Refresh is triggered and the state is all kept. So, there's a few advantages to this approach. The design file becomes the code base, so there's no more Sketch files that sit in the hard drive, anywhere, never to be touched after they've been passed on. There's no handoff, so there's no time wasted with between developers and designers. Everything's in version control, so it's all in kit. Also, these changes, design changes, designer might have an idea and one wants to see it, they can deploy this and get feedback from stakeholders straight away. Also, uses real data and conforms better to any design systems that are in the code. There are of course some disadvantages. The designer needs to know CSS pretty well, I think. Also, CSS can be a bit restrictive for design. It's not like you can just move things around, so it might restrict creativity a little bit. And also

of course, we need to set up a dev environment with this particular setup. So for this project, um, I'm still just working on it. It's a very early prototype just to see how, um, how it works. I'd like to explore, um, other React, um, frameworks such as Gatsby and Create React App, and also investigate other front-end frameworks such as Angular and Vue and Svelte. Thanks so much for checking out this talk. Here's the code, and please check it out. Uh, feedback, it'd be great to hear from you. Um, I'm not sure if this is going to go anywhere, but it was a fun project. And thanks so much for Next.js, uh, and Vercel for, uh, inviting me along. And the slides were made with, uh, React Spectacle. Cool. [Music]

Low Code Design in Next.js - Kaho Cheung

Vercel’s Frontend Cloud provides the developer experience and infrastructure to build, scale, and secure a faster, more personalized web.

Vercel

js에 시각적 개발 도입하기: 로우코드 접근 방식

뉴사우스웨일스 주립 도서관의 DX Lab 기술 책임자인 Carho는 디자인 및 개발자 핸드오프 프로세스를 개선하기 위해 Next.

js용 브라우저 기반 로우코드 디자인 툴을 도입하고 있습니다.

이 도구를 사용하면 브라우저에서 시각적으로 개발할 수 있으므로 디자이너가 완성된 파일을 개발자에게 보낼 필요가 없어지고 두 역할 간의 비효율적인 커뮤니케이션과 주고받는 커뮤니케이션이 줄어듭니다.

프로덕션 코드와 실제 데이터로 디자인을 가능하게 함으로써 전체 디자인 및 개발 프로세스를 간소화하여 궁극적으로 기존의 핸드오프가 필요 없게 합니다.

js 및 Tailwind CSS로 워크플로 간소화하기

실시간 업데이트 기능이 있는 간단한 웹 페이지에 Next.

js와 Tailwind CSS를 사용하는 데모입니다.

js와 Tailwind CSS의 조합은 효율적이고 협업적인 디자인 및 개발을 가능하게 하며, 디자이너가 개발자의 개입 없이 변경할 수 있어 시간을 절약할 수 있습니다.

이 데모는 디자이너와 개발자 간의 워크플로우를 간소화할 수 있는 잠재력을 보여줍니다.

UI 개발을 위한 React의 디버그 데이터 사용

UI 요소는 React의 디버그 데이터와 Next.

js API 경로를 사용하여 쉽게 조작할 수 있습니다.

이 접근 방식을 사용하면 디자인 파일이 코드 베이스가 되므로 별도의 스케치 파일이 필요하지 않습니다.

이 방법을 사용하면 이해 관계자로부터 실시간 피드백을 받고 디자인 시스템을 더 잘 준수할 수 있지만 디자이너가 CSS를 잘 이해해야 하며 잠재적으로 디자인 창의성이 제한될 수 있습니다.

개발 환경의 다양한 프런트엔드 프레임워크 살펴보기

이 프로젝트는 초기 프로토타입으로 React, Gatsby, Create React App은 물론 Angular, Vue, Svelte를 탐색하는 것을 목표로 합니다.

피드백을 받는 것이 목표이며, 슬라이드에 대한 크레딧은 Next.

js, Vercel 및 React Spectacle에 있습니다.