이 애플리케이션의 내비바를 시작하려면 브라우저를 에디터 옆에 두고 작업할 수 있습니다. 링크들을 모두 볼 수 있도록 이 폭으로 유지하고 왼쪽에는 WebStorm을 열겠습니다.

컴포넌트라는 새 폴더를 만드세요. 이 폴더는 앱 폴더 밖에 있어야 하고, 컴포넌트 폴더 안에 navbar.tsx라는 새 파일을 생성해주세요.

그 안에서 RAFCE를 활용하여 새 네비바 컴포넌트를 빠르게 만들 수 있습니다. 그런 다음 홈페이지 내에 간단히 불러오시면 됩니다.

앱 라우트 홈으로 이동하신 다음, 여기 H1이 있습니다. 그 H1을 div로 감쌀 수 있습니다.

음, 여기에서 div를 바로 오도록 여러 줄로 되돌려 보겠습니다.

이 div는 'home'이라는 클래스명을 가지게 될 것이고, 그 안에 우리가 components에서 가져온 자체 닫힘 navbar 컴포넌트를 렌더링할 수 있습니다.

네비게이션 바입니다. 로컬호스트 5.1.7.3으로 접속하시면 상단에서 네비게이션 바를 확인하실 수 있습니다. 이제 새로운 터미널을 열어볼까요.

이건 앱을 실행하는 데 사용할게요. 그리고 다른 하나는 터미널로 간단히 이름을 지어서, 그 안에서 npm install lucid react를 실행할 텐데, 아이콘들을 설치하게 됩니다.

애플리케이션 스타일링은 이 최종 디자인과 최대한 유사하게 맞추고 싶습니다.

설명란에 있는 비디오 키트 링크로 이동하신 후 앱.css 파일을 찾아보시면 디자인 파일을 얻으실 수 있습니다. 확인해보세요.

여기 있는 모든 것을 지우시고, 비디오 키트에 있는 것을 복사하신 후, 여기 붙여넣으시면 됩니다.

디자인에 기본 초기화 설정과 함께 테마 컬러도 추가할 예정이며, 무엇보다 중요한 점은 버튼을 만들 때 시간을 낭비하지 않도록 컴포넌트 스타일을 적용하는 것입니다.

모양이 어떻게 나올지 이미 알고 있습니다. 다양한 카드, 내비게이션 바, 인증 모델 등도 마찬가지입니다.

물론, 언제든지 이 CSS가 어떻게 생겼는지 궁금하시다면, 그냥 이 app.css 파일에서 참고하시면 됩니다.

솔직히 말씀드리면, 이 CSS가 어떻게 생겼는지 우리가 관심을 가질 가능성은 거의 없을 것 같아요. 솔직히 말씀드리면, 이 전체 UI는 제미나이 AI 스튜디오에서 생성된 것이거든요.

앞으로 사용자 인터페이스는 점점 더 다양한 AI 도구들을 통해 만들어질 가능성이 높습니다. 저희에게 주어진 역할은 스타일을 적용하는 것이 아니라, 이러한 AI 에이전트들을 조율하여 훌륭한 소프트웨어를 개발하고, 이를 출시하는 것입니다.

걱정 마세요, 이 과정에서 어떻게 하는지 알려드릴 테니까요. 자, 그럼 이제 navbar 컴포넌트로 넘어가서 구현해 보도록 하겠습니다.

간단하게 HTML5 헤더 컴포넌트로 만들고 navbar 클래스를 적용해서 시작할 수 있을 거예요. 그리고 물론 현재 어플리케이션 버전을 열어서 여기에서 확인할 수도 있겠죠.

내비바 내에서는 클래스 이름이 inner인 새로운 nav 요소를 만들고, 그 안에는 클래스 이름이 left로 설정된 새로운 div 요소를 만들겠습니다.

브랜드 클래스 이름을 가진 div 안에 박스를 표시할 수 있습니다. 해당 박스는 애니메이션 효과를 통해 나타날 예정입니다.

루시드 리액트를 사용해서 로고 클래스 이름이 설정된 클래스를 만들고, 저희 애플리케이션의 이름을 나타내는 스팬 요소를 렌더링할 예정입니다.

이것을 Roomify라고 부르겠습니다. 이제 이 div 아래에, span을 추적하면서, 링크 클래스 이름을 가진 ul, 즉 순서 없는 목록을 만들 수 있습니다.

그리고 그 안에서 href 속성이 비어 있는 앵커 태그를 표시할 수 있습니다.

나중에 필요하면 추가할 수 있습니다. 우선, 첫 번째는 '제품', 두 번째는 '가격', 세 번째는 '커뮤니티', 네 번째는 '기업'이라고 설정하겠습니다.

일반적으로 훌륭한 AI SaaS 도구의 랜딩 페이지에 사용되는 링크들이 이런 것들입니다. 나중에 이를 확장하여 다중 페이지 랜딩 페이지를 만들거나, 혹은 단일 페이지 랜딩 페이지를 만들 수 있습니다.

이 안의 여러 섹션들을 만들고, 아래로 내려서 actions라는 클래스 이름을 가진 또 다른 div를 만들 수 있습니다. 그 안에 버튼을 클릭했을 때 반응하도록 설정할 거예요.

여기서는 사용자 인증을 진행해야 합니다. 그래서 handle auth click 함수를 호출할 거예요.

저희가 조만간 구현할 예정인 기능입니다만, 현재는 비동기 콜백 함수로 남아 있어서 저희가 로직을 구현할 때까지 비어 있는 상태로 기다리게 될 겁니다.

로그인 클래스 이름을 설정하고, 그 안에 '로그인'이라고 표시하겠습니다.

오른쪽에 바로 보이실 겁니다. 이제 이 버튼 아래에 href이 해시 업로드이고, CTA, 즉 행동 유도 클래스명을 가진 앵커 태그를 렌더링하겠습니다.

이 버튼이 가장 중요한 버튼이 될 겁니다. 그래서 이렇게 조금 더 눈에 띄게 만들고 싶습니다.

지루한 평면도를 실제로 의미있는 인테리어로 바꾸는 것부터 시작해 봅시다. 그리고 이 애플리케이션에서 버튼을 몇 번 사용할 예정이므로, 재사용 가능한 버튼 컴포넌트를 만드는 것이 좋습니다.

챗CN을 사용해보시면 아시겠지만, 여러 컴포넌트들이 있고, 그 안에 또 UI라는 폴더가 있습니다. 그리고 보통 그 안에 버튼(button.tsx)처럼 간단한 컴포넌트가 있을 거예요.

여기서는 ChatZN을 사용하지 않기 때문에, 확장 가능하도록 버튼과 같은 간단한 컴포넌트를 만드는 접근 방식을 알려드리겠습니다.

혹은 이 경우에는 인공지능을 이용해서 그걸 만들 수 있는 방법을 알려드리고 싶습니다. 간단히 Command-Shift-B를 누르고 Juni를 검색하시면 됩니다.

혹시 아직 그걸 안 하셨다면, IDE나 텍스트 편집기에 설치하신 다음에, 무엇을 해야 할지 알려드릴 수 있습니다. 이게 우리가 처음으로 시켜줄 작업이 될 거예요. 그리고 최근에 저는 AI가 어디로 향하게 될지에 대해 더 많이 트윗하고 있어요.

제가 코드를 한 줄도 직접 작성하지 않고 전체 애플리케이션을 만들었다고 말씀드렸지만, 여덟 년 동안 코딩하는 방법을 알아야 가능했을 겁니다. 그러니 인공지능이 여러분의 기술을 대체하는 것이 아니에요. 오히려 여러분의 기술을 더욱 강화해 줄 겁니다.

하지만 코딩하는 방법을 알아야 하고, 이 비디오에서 바로 그 내용을 얻게 될 겁니다.

하지만, 머지않아 AI가 여러분의 코드 80% 이상을 작성하게 될 겁니다.

하지만, 그렇다고 해서 당신이 덜 중요하다는 건 아니에요. 오히려 이해력과 판단력, 그리고 설계 능력이 그 어느 때보다 중요해졌다는 뜻이에요. 저는 그냥 코딩하는 그런 느낌적인 느낌을 말하는 게 아니에요. 다음 시대의 개발에 대한 이야기를 하고 있는 거예요.

그리고 앞으로 여러분이 갖춰야 할 중요한 기술이라고 생각하기 때문에, 제가 궁극의 AI 개발 강좌를 만들기 시작했는데요. 지금은 대기자 명단만 운영하고 있는데, 설명란에 링크를 남겨드릴 테니 참여하실 수 있을 거예요.

곧 첫 번째 강의를 공개할 예정이니, 최신 정보를 놓치지 않으려면 꼭 등록하세요. 자, 이제 AI의 도움을 받아 재사용 가능한 버튼과 같은 간단한 요소를 만드는 저의 접근 방식을 미리 보여드리겠습니다.

바리언트, 크기, 전체 너비 여부 속성을 갖는 React TypeScript 버튼을 만들도록 알려드리겠습니다.

그리고 클래스 이름도 알려드리겠습니다. Shatzian에서 사용하는 것처럼 BEM 스타일 클래스를 적용할 예정이며, 예를 들어 btn-variant나 btn-size처럼 사용할 수 있습니다.

기본값을 기본적으로 Primary와 Medium으로 설정하고, 모든 Props를 결합한 클래스와 자식 요소를 반환하도록 하겠습니다. 그리고 어떻게 작동하는지 한번 살펴봅시다.

그리고 아주 빠르게, Junie는 계획을 세우고, 여러분의 애플리케이션 구조를 이해하고, 수정해야 할 파일을 열어서 새로운 버튼 컴포넌트를 구현할 거예요. 이 작업은 아주 간단했기 때문에 프롬프트도 간단했답니다.

이제 이 버튼 컴포넌트를 네비바 안에서 사용해 보겠습니다. 컴포넌트, 네비바 폴더로 이동해서 두 개의 새로운 변수를 만들어 볼까요.

하나는 'signed in'이라고 하고, 일단은 false로 기본 설정하겠습니다. 그리고 다른 하나는 사용자 이름인데, 사용자 이름으로 설정하시면 됩니다.

이 경우에는 그냥 에드리아న్‌이라고 부르겠습니다. 일단 그것들을 만드신 후에, 아래 링크로 가셔서 현재 진행 중인 작업들을 확인해 주세요.

단일 로그인 버튼을 하나만 두는 대신, 저희는 로그인 상태인지 확인하는 검사를 통해 감싸고 싶습니다.

로그인하지 않은 상태라면, 로그인 버튼을 렌더링하게 되는데, 다른 무언가를 그 옆에 둘 수 있도록 빈 리액트 프래그먼트로 감싸게 될 겁니다. 이 경우에는 그냥 이 앵커 태그를 바로 옆에 다시 가져올 수 있습니다.

업로드하시고 시작하시면 됩니다.

지금 로그인하지 않은 상태라면, 다시 빈 React Fragment를 렌더링하고, 그 안에 greeting 클래스 이름을 가진 span 요소를 넣어 사용자 이름을 표시할 수 있습니다.

만약 사용자 이름이 존재한다면, '안녕하세요, 사용자 이름님'이라고 말할 수 있습니다. 그렇지 않다면, '로그인되었습니다'라고 표시하겠습니다. 사용자 이름에 접근할 수 없는 경우에 해당합니다.

그리고 나서, 저희가 새로 만들었던 버튼 컴포넌트를 작은 크기로 설정하고 클릭 시 handle auth click 함수를 클래스 이름과 함께 렌더링할 수 있을 겁니다.

버튼으로 연결하고, 이 버튼은 로그아웃이라고 표시할 수 있습니다. 또한, 이 버튼을 저희 컴포넌트 버튼으로 변경하고, 클래스 대신 사용할 수도 있습니다.

로그인 이름은 제가 알려드리겠습니다. S, M 사이즈이고, 고스트 버전입니다. 이제 다시 돌아가시면 됩니다.

로그인 화면을 볼 수 있고 시작하기 버튼도 확인되지만, 'is signed in' 값을 true로 변경하시면 접속하실 수 있습니다.

안녕하세요, 에이든 씨. 로그아웃되는지 확인해 보겠습니다. 인증 기능 구현이 완료되면 바로 작동할 거예요. 다음 단계로 인증 기능을 구현할 예정입니다.