왼쪽과 오른쪽에서 이전 버전, 기본 계획, 그리고 최종 버전인 이 멋진 건축 도면을 함께 볼 수 있도록 해주는 시각화 컴포넌트를 구현하기 위해 NPM에서 새로운 패키지를 설치할 수 있습니다.

그리고 그것은 리액트 비교 슬라이더라고 불릴 겁니다.

약 7만 건의 주간 다운로드를 기록할 정도로 인기 있는 패키지인데, 이 커서 같은 선을 드래그 앤 드롭하면서 배경을 보여주는 방식으로 작동합니다. 또는 이 경우에는 두 개의 다른 이미지 간을 움직이게 됩니다.

여기 우리 시각화기 안에서 바로 사용할 수 있어요. 페이지, 시각화기라고 할게요.

여기 있는 모든 함수들을 접어서 보기 편하게 만들게요.

자세히 살펴볼 부분은 JSX 부분이 될 것 같습니다. 지금 패널을 닫고 있는 이 패널 아래로 내려가 주세요.

그리고 바로 아래에 패널 클래스 이름을 가진 새로운 div를 렌더링하여 비교해 보겠습니다.

그 안에서 panel-header 클래스 이름을 가진 div 요소를 렌더링할 수 있으며, 그 안에 panel-meta 클래스 이름을 가진 또 다른 div 요소를 만들어서 p 태그를 적용할 수 있습니다.

비교를 나타내는 텍스트와 '전후'라고 적힌 h3 태그를 의미합니다.

그리고 그 div 바깥쪽에 'hint'라는 클래스 이름을 가진 다른 div를 렌더링할 수 있습니다. 그 안에 '드래그하여 비교'라고 표시할 수 있습니다.

지금 뒤로 돌아가서 이 현재 프로젝트 바로 위에 있는 내용을 스크롤하시면, 이 패널 헤더를 감싸는 div 바로 아래에서 비교 결과를 보실 수 있습니다. 거기서 또 다른 div를 만들어 클래스 이름을 부여할 수 있습니다.

비교 단계입니다. 그리고 거기서 이전과 똑같은 작업을 할 수 있습니다. 소스 이미지와 현재 이미지를 액세스하는 거죠.

둘 다 가지고 있을 때만 이 React 비교 슬라이더를 렌더링하고 싶고, 이 슬라이더를 바로 위쪽에 가져와야 합니다. 설치한 패키지에서 가져오는 거죠.

이 React 비교 슬라이더는 몇 가지 다른 props를 받아들일 거예요. 그럼 하나씩 렌더링 해 보겠습니다.

이전에 촬영한 이미지나 현재 이미지를 사용할 수 없을 경우에는, 그냥 간단하게 처리할 수 있습니다.

비교 클래스 이름을 갖는 div 요소를 대체 항목으로 반환하도록 설정할 것입니다.

대시 폴백 안에 프로젝트닷 소스 이미지가 존재한다면, 그것만 렌더링하면 돼요.

그래서 그건 project.source 이미지이고, alt 태그는 'before' 가 될 거예요.

그리고 클래스 이름은 compare-img로 설정해야 합니다. 하지만 이 경우에는 React 비교 슬라이더에 몇 가지 더 프로프를 추가해야 합니다.

첫 번째 프로퍼티는 기본값인데, 50으로 설정할 겁니다. 따라서 처음에 50%를 볼 수 있습니다. 이전 이미지의 50%와 새로운 이미지의 50%를 말이죠.

너비 100% 그리고 높이는 auto로 스타일을 적용할게요. 그리고 나서 아이템 1이 어떻게 보여질지 선택할 수 있습니다.

이 항목 1은 React 비교 슬라이더 이미지이며, React 슬라이더에서 가져온 것입니다.

소스 세트를 프로젝트 질문점으로 설정할 텐데요, 소스 이미지는 반드시 소문자로 작성해주세요.

그리고 alt 태그와 before 클래스 이름, 그리고 compare-img와 같이 클래스 이름을 추가할 수 있습니다. 이제 저희는...

아이템 하나를 복사해서 아이템 둘로 이름을 변경하면 됩니다. 그리고 동일하게 사용하겠습니다.

슬라이더는 사용하지만, 원본 이미지가 아닌 현재 이미지 또는 프로젝트에 대한 질문이라고 표시하겠습니다.

이런 이미지처럼, 그리고 alt 태그는 뒤에 붙어서 '이미지 비교'라고 표시될 거예요. 자, 이제 다시 돌아가서 여기 큰 화면이 보이시죠? 그런데 아래에는 멋진 시각화 컴포넌트가 있습니다.

이렇게 하면 저희가 무엇을 했는지 정확히 확인할 수 있어서 완벽한데, 제가 아주 세로로 긴 층도 파일을 업로드한 것 같아요. 그래서 층도는 가로로 된 것으로 사용해 보겠습니다. 몇 가지 아주 기본적인 층도 파일을 찾아볼게요.

음, 예를 들어 이건 어떻든가, 아니면 이쪽도 괜찮을 것 같아요. 약간 더 작네요. 저장하고, 이것도 함께 업로드할게요. 선택해 보려고 하니, 웹p 형식인 것 같아요. 현재는 웹p는 지원하지 않아서요.

JPEG 파일은 괜찮은 것 같지만, WebP 파일도 허용할 이유가 없다고는 생각하지 않습니다. 일단 Accept 헤더 부분을 확인해 보니, 현대 시대에 .webp 파일을 허용하지 않는 것은 정말 받아들이기 어렵습니다.

네, 여기 '허용' 아래에 추가하면 이제 업로드를 할 수 있고 리디렉션되는 것을 확인할 수 있을 것 같습니다.

렌더링되고 있어요. 보기 좋네요.

AI가 실제로 무언가를 하고 있는 걸 볼 때마다 항상 기분이 좋아요.

여기에서 최종 결과를 확인할 수 있습니다. 곧 내보낼 수 있을 거예요. 그런데 바로 아래에 보면, 놀랍게도 옆으로 비교해서 볼 수 있는 차이점을 확인할 수 있습니다.

자, 오른쪽에서 왼쪽으로 살펴보겠습니다. 여기 계단이 있고, 그 위에 방이 있어요. 제일 위에 있는 방에 주목해 보세요. 가구 하나도 없이 텅 비어 있는 걸 눈여겨보세요.

침대가 여기로 들어가고, 다른 침대는 저기 둬도 되겠다고 알아낸 거예요. 그리고 아래쪽 침실을 한번 보세요. 침대 대신 사무실로 만들기로 결정했나 봐요.

여기 욕실이 있고, 그리고 마지막으로 큰 방이 있습니다.

이 아파트는 조금 이상하지만, 기존에 2D 요소들이 스케치되어 있어서인지, 이 부분은 훨씬 잘 처리한 것 같아요. 그러면 100% 정확해질 거예요.

그리고 완벽하게 만들어진 김에, 저희가 여기 있는 동안 내보내기 버튼도 추가하는 게 좋겠습니다. 그래야 저희가 아주 쉽게 내보낼 수 있을 겁니다.

저에게는 주니가 이 작업에 정말 적합하다고 생각합니다. 그럼 한번 열어보고, 간단하게 핸들 내보내기를 작성해 달라고 시켜볼까요?

브라우저 뷰어 페이지에서 현재 렌더링된 이미지를 다운로드하는 기능입니다. 그리고 이것만으로도 얘가 작업을 제대로 할 수 있는지 한번 확인해 보겠습니다.

다시 말씀드리지만, 저는 항상 두 분과 제가 동일한 결과를 얻을 수 있도록 매우 상세한 안내를 작성하려고 노력합니다. 하지만 Juni가 매우 짧은 지시 사항만으로도 훌륭하게 구현하는 것을 고려하면, 그러한 노력이 필요 없을 것 같습니다.

이것이 정말 간단하다는 것을 보실 수 있습니다. 다운로드 링크를 생성하고 다운로드하는 것뿐입니다.

정말로 작동하는지 한번 확인해 볼까요. 여기로 다시 가서 새로고침하고 내보내기를 클릭해 보겠습니다. 자, 됐어요. 새 페이지에서 열리고 이제 오른쪽 클릭해서 다운로드할 수 있어요. 이게 제가 원했던 전부예요. 그럼 계속 진행해 봅시다.

이 변경 사항을 적용하려면 `git add .`, `git commit -m "시각화 도구 구현 및 내보내기"` 명령어를 실행해 주세요.

그리고 `git push`를 실행하신 후, GitHub로 이동하셔서 브랜치를 살펴보세요. 저희는 이 브랜치를 최신 상태로 만들어야 합니다. `git pull origin main --rebase` 명령어를 사용하면 됩니다. 잘 진행되었습니다.

그리고 이제 git add . 하고 git commit -m "implement visualizer and" 실행하고 git push 하시면 됩니다. 이 경우에는요.

우리가 git push -f 를 해야 합니다. 만약 다시 돌아가시면, main 보다 앞에 있다는 걸 보실 수 있을 거예요. 그러면 새로운 풀 리퀘스트를 열 수 있겠죠. 풀 리퀘스트로 가셔서 생성하시면 돼요.

호스팅 이미지 변경 사항을 메인 브랜치에 반영하는 새로운 풀 리퀘스트가 있습니다. 최신 커밋 시각화 도구도 확인하실 수 있고, 내보내기 기능도 모두 여기에 있습니다. 그래서 이제 이 풀 리퀘스트를 생성하고, 마지막 풀 리퀘스트도 진행하겠습니다.

이 프로젝트에서는 코드 래빗이 알아서 처리하도록 할 수 있을 것 같습니다. 잠시만 기다려보고, 어떤 결과물을 보여줄지 확인해 보겠습니다. 이번 PR에서는 리액트를 사용하여 시각화 기능 구현을 간단히 완료했습니다.

슬라이더 의존성 비교했는데, 정말 간단해서 수정할 부분도 많지 않습니다. 내보내기 기능과 관련해서는 주요하게 수정해야 할 부분이 한 가지 있습니다. 현재 이미지에 대해서...

해당 URL은 원격 HTTPS 주소이며, 다운로드 속성은 브라우저에서 무시됩니다.

브라우저는 이미지를 다운로드하는 대신 해당 이미지로 이동하게 됩니다. 저희 쪽에서는 괜찮습니다. 테스트했을 때 이미 이런 일이 발생한 것을 확인했습니다.

알려주신 내용을 염두에 두고, 이제 main 브랜치에 병합해도 될 것 같습니다. 그리고 코드 내에서 git checkout main 명령어를 실행해서 main 브랜치로 이동한 다음, git pull 명령어를 실행하여 최신 변경 사항을 모두 가져오세요. 그런 다음 테스트해 보실 수 있습니다.

혹시 모든 프로젝트들이 다 있는지, 그리고 시각화 도구와 내보내기 기능이 제대로 작동하는지 확인해 보세요. 모두 잘 작동한다면, 이제 완료된 겁니다. 방금 이 단일 프로젝트에서 구축하신 내용을 한 번 살펴보세요.

진정으로 AI 기반의 SaaS 애플리케이션을 선구적으로 개발하셨습니다.

인증 기능을 먼저 구현해주셨는데요, 최근에 제대로 테스트를 해보지 않아서, Pewter로 로그인하면서 다시 테스트해보는 것이 좋겠습니다.

이후에 현대적인 React 및 Vita 애플리케이션을 구축하시고, 드래그 앤 드롭 업로드를 처리하며, 이미지를 Base64로 변환하시고, 구현하셨습니다.

지루한 2D 평면도를 사실적인 탑다운 3D 건축 렌더링으로 바꿔주는 이 프롬프트를 활용하여 최종 파일들을 모두 Pewter에 호스팅하여 온라인상의 모든 사용자가 공개적으로 접근할 수 있도록 했습니다.

서버리스 워커를 생성하여 처리하셨고, 키-값 저장소에서 데이터를 저장하고 가져오셨으며, API 키 관리는 물론이고 다섯 가지 서비스 설정을 모두 생략하고 하셨습니다.

제가 말씀드리는 거예요, 여기서는 페우터 백엔드에 필요한 환경 설정 외에는 아무것도 없다는 거고, 신용카드 정보 입력 없이도 그걸 처리하셨다는 거예요. 이게 바로 페우터의 힘입니다. 모든 것이 하나의 생태계 안에 존재하거든요.

인공지능, 호스팅, 스토리지, 워커, 단순하고, 깔끔하고, 통합적입니다.

인프라스트럭처 비용도 없고, 오직 개발만 가능하죠. 그리고 솔직히 말씀드리면, Juni 같은 도구 덕분에 복잡한 로직을 더 빠르고 즐겁게 작성할 수 있었습니다.

저기, 저희가 이걸 얼마나 다양한 사례에 적용했는지 한번 살펴보세요. 코드래빗은 버그를 잡는 데도 아주 유용했습니다.

엔지니어로서 실력 향상에 실질적으로 도움이 되는 인공지능 지원이라고 할 수 있습니다.

여기까지입니다. 그럼 다음은 무엇일까요? 각 프로젝트에서 공유 또는 공유 취소 기능을 구현하실 수 있습니다. AI 에이전트를 사용하셔도 좋고, 직접 구현해 보셔도 괜찮습니다.

설명이 너무 길어지거나 가르치는 방식에 갇히는 상황은 원치 않으실 겁니다. 중요한 건 배우시는 것이니까, 어떻게 진행될지 대략적으로 설명드리겠습니다.

사용자가 공유 버튼을 클릭하면, 해당 프로젝트를 사용자의 개인 키 값 저장소에서 제거하고 공개 KV 네임스페이스로 이동시킨 후, 사용자 메타데이터를 연결해주셔야 합니다.

예를 들어 사용자 이름, 사용자 ID, 그리고 타임스탬프와 같은 정보들을 말이죠. 그리고 '공유 해제'를 클릭했을 때는, 해당 정보를 퍼블릭 KV 스토리지에서 제거하고 사용자 개인 스토리지로 다시 옮겨야 합니다.

그게 다입니다. 이미 기본적인 구성 요소, 작업자, 저장 공간, 인증, 호스팅까지 갖추셨습니다.

단순히 점들을 연결하면 됩니다. 한번 시도해 보시고 어떻게 되는지 확인해 보세요.

혹시 어려움에 처하거나 해결책을 검증하고 싶으시다면, 설명란 아래에 최종 코드 베이스 링크가 연결되어 있습니다. 완전히 무료로 이용하실 수 있습니다. 하지만 무엇보다 중요한 것은, 특히 주변 사람들이 힘들어할 때 스스로를 자랑스럽게 여기시는 것입니다.

인공지능에 대해 이야기하고 있죠. 그런데 인공지능은 두려워할 필요가 없어요.

극복해야 할 대상이에요. 그러니까 계속 만들고, 계속 실험하고, 망가뜨렸다가 고치면서 인공지능을 배우세요. 뒤처지지 않으려면요.

설명란 아래에 저희가 앞으로 출시할 최고의 과정 중 하나인, 대기자 명단 링크를 남겨놓겠습니다. 여기서는 궁극적으로 AI 개발 과정을 다루게 될 예정입니다.

에이전트 엔지니어링에 대해 깊이 파고들 예정입니다. 거기서 만나요. 아, 그리고 잊지 마시고, 아직 로컬 호스트 환경에 있습니다. 페터(Pewter)나 온라인 전반에 이 프로젝트를 배포하는 방법을 알려드리겠습니다.