홈페이지 UI 개발을 시작하려면 App, Routes, Home 폴더로 이동하시면 됩니다.

이곳이 그것이 위치하게 될 곳입니다. 바로 여기, 'home'이라는 클래스 이름을 가진 div가 있고, 그 위쪽에는 navbar가 있습니다.

하지만 이 헤더 1 대신, 이제 히어로 섹션에 사용될 본격적인 섹션을 렌더링해 보겠습니다.

완성된 결과물을 살펴보는 대신, 현재 열려있는 것을 확인하고, 완전히 비어있는 상태에서 무언가를 추가해 보겠습니다.

발표를 위한 클래스 이름을 가진 div 요소를 추가하고, 그 안에 점(dot)을 나타내는 클래스 이름을 가진 div 요소, 그리고 또 다른 클래스 이름을 가진 div 요소를 추가할 예정입니다.

이름을 펄스(pulse)로 설정할 건데요. 자체적으로 닫히는 div 안에 맥동하는 점이 들어갈 예정입니다.

이 div 아래에 p 태그를 넣어 'Roomify 2.0 소개'라고 표시할 예정입니다. 아직은 아니지만요.

1.0 버전은 완료되었지만, 사람들의 기대감을 계속 불러일으켜야 하잖아요. 바로 이 div 아래에 멋진 공간을 빠른 속도로 만들 수 있다는 내용을 h1 태그로 표시해 보겠습니다.

이렇게 룸리파이로 생각을 정리한 다음, 그 아래에 p 태그 클래스 이름을 사용하여 자막을 추가할 수도 있습니다.

자막으로 설정하면 룸이파이가 인공지능 기반의 디자인 환경이라는 것을 말씀드릴 수 있습니다. 룸이파이는 여러분이 시각적으로 디자인을 구상하는 데 도움을 드립니다.

건축 프로젝트를 이전보다 훨씬 빠르게 렌더링하고 배송할 수 있으며, 웹스톰과 유사한 깔끔한 인터페이스를 가지고 있습니다.

이 작은 문제가 완벽한 환경을 만들었네요. 이제 헤드라인과 서브타이틀이 준비되었으니, 이것 또한 함께 진행해 보겠습니다.

주요 행동 유도 버튼을 추가하려면 'actions' 클래스 이름을 가진 div 요소를 생성합니다. 'actions' 안에 앵커 태그를 포함하여 표시할 수 있습니다.

해시 업로드를 가리키는 링크를 만들고, 이전에 만들었던 것처럼 CTA 클래스 이름을 설정해주세요. 그러면 '지금 바로 시작하기'라는 문구와 함께 화살표가 표시될 것입니다.

루시드 리액트에서, 아이콘 클래스 이름을 설정할 거에요.

자, 이렇게 됐네요. 시작하기를 클릭하세요. 그런 다음 이 앵커 태그 아래에 버튼도 표시할 수 있어요.

이 버튼은 저희가 직접 만들어서 사용할 수 있는 재사용 가능한 버튼 컴포넌트가 될 것입니다.

데모를 시청하라는 안내가 표시될 것이며, 큰(large) 크기와 'demo' 클래스 이름으로 아웃라인의 변형을 렌더링할 것입니다.

자, 이제 시작해서 데모를 확인해 보겠습니다.

이제 아래쪽에 업로드 div를 표시할 수도 있습니다. 버튼들과 액션들을 포함하고 있는 이 div 아래로 이동해서, upload라는 ID를 가진 div를 렌더링하겠습니다.

업로드 대시 셸 클래스 이름을 부여할 거예요. 이제 어디로 가고 있는지 대략적으로 짐작하실 수 있을 겁니다.

하지만 사용자분들이 이 업로드 영역이 무엇에 관한 것인지 조금 더 명확하게 알 수 있도록, 그 안에 또 다른 자기 닫힘 div를 만들어 넣어서 설명하는 것이 좋겠습니다.

그리드 오버레이로 설정된 클래스 이름을 가진 요소 아래에 다른 div가 위치하며, 이 div는 특정 클래스 이름을 갖도록 설정될 것입니다.

업로드 대시보드 카드 내에 업로드 대시 헤드 클래스 이름을 가진 또 다른 div를 포함할 예정입니다.

이런 식으로요. 그리고 UploadHead 안에서는 upload-icon이라는 클래스 이름을 부여하여 업로드 아이콘을 렌더링할 거예요. 그리고 그 안에는 레이어를 렌더링할 거에요.

아이콘 클래스명을 가진 Lucid React에서 전달받은 내용입니다.

네, 좋습니다. 이제 이 부분을 설명하기 위해 H3 태그로 '층도면 업로드'라고 추가하고, 그 아래에 p 태그로 'JPEG, PNG 형식 지원'이라고 적어줘야 합니다.

파일 형식은 최대 10메가바이트까지 지원됩니다. 이제 아주 명확하게 보이죠. 그리고 이 div 아래에 p 태그도 추가해 보겠습니다.

이미지 업로드 기능이 있는 부분을 만들고, 나중에 기능을 구현할 예정입니다. 또한 다른 분들이 업로드하신 프로젝트들을 현재 섹션 아래에 표시해야 합니다.

이 섹션은 바로 헤로 섹션인데, 이제 이걸 접을 수 있고, 그 다음에 프로젝트를 위한 새로운 섹션을 만들 거예요. 프로젝트라고 클래스 이름을 지정할게요.

그 안에서 div 요소를 렌더링 할 텐데, 그 div는 클래스 이름을 section-inner로 갖게 됩니다.

섹션 헤더 클래스를 가진 div 요소를 만들고, 그 안에 또 다른 div 요소를 렌더링할 것입니다.

이 클래스의 이름은 '카피(copy)'로 하겠습니다. 왜냐하면 실제 텍스트 내용이 이 안에 포함될 것이기 때문입니다. 예를 들어, '프로젝트'라고 표시할 H2 태그나, 그 아래에 '입니다.'라고 표시할 P 태그 등이 있겠죠.

최근 작업물과 공유된 프로젝트들을 한 곳에 모아 보여드립니다.

이제 아래로 스크롤하시면 프로젝트 섹션을 확인하실 수 있습니다.

물론, 이 경우에는 프로젝트 그리드도 함께 표시해야 합니다. 따라서 이 P 태그 아래로 두 개의 div를 더 내려서, 클래스 이름이 'projects-dash-grid'로 설정된 div를 렌더링해야 할 것입니다.

현재로서는 그 안에서 project-card 및 group 클래스 이름을 가진 div 요소를 렌더링할 수 있습니다.

그리고 나서 이 카드 안에서 preview라는 클래스 이름이 설정된 div 요소를 렌더링할 수 있습니다.

이런 느낌으로 나올 거예요. 미리보기 안에 데모 이미지를 렌더링할 수 있습니다. 그래서 이미지라고 입력한 다음에 소스를 넣어주세요.

영상 키트 링크에 설명란에 이미지 소스 링크를 제공해 드리겠습니다. 이렇게 하면 직접 복사해서 붙여넣으실 필요가 없거든요. 기본적으로는 이런 모양의 이미지를 가리키는 URL이 될 거예요. 아마 더 나은 걸 찾을 수도 있겠습니다.

그러면 혹시 분께서는 조금 다르게 보일 수도 있습니다. 그리고 저는 이 이미지에 '프로젝트'라는 대체 텍스트를 추가해 드릴게요.

이것은 완성된 인테리어 디자인 평면도 예시입니다.

자, 그럼 아래로 내려가서 배지 클래스를 가진 div와 커뮤니티라고 표시된 span도 렌더링해 보겠습니다. 이렇게 하면 이 프로젝트를 저희가 만들었는지, 아니면 다른 분이 만드셨는지 알 수 있을 겁니다.

다른 분들에 의해 커뮤니티가 만들어졌을 수 있습니다. 그런 다음 이 두 개의 div를 아래로 이동시키고 동일한 클래스 이름을 부여하여 카드 바디를 생성한 다음 그 안에 div를 만들 수 있습니다.

그리고 나서 '프로젝트'와 같은 문구를 표시하는 h3 태그를 렌더링할 수 있습니다. 프로젝트 이름은 원하시는 대로 지정하실 수 있는데, 저는 '맨해튼'이라고 하겠습니다.

여기에서 바로 확인하실 수 있으며, 이 h3 바로 아래에 meta라는 클래스 이름을 가진 div를 렌더링할 수 있습니다. 이 meta는 프로젝트에 대한 메타데이터를 의미합니다.

시계 아이콘을 12 크기 이하로 두고, 그 아래에는 날짜를 표시하는 스팬 요소를 배치할 수 있습니다. 여기에는 어떤 날짜든 넣으실 수 있습니다.

2027년 1월 1일을 기준으로 로케일 날짜 문자열을 사용하여 보기 좋게 표시해 보겠습니다.

이 텍스트 아래에 JSM 또는 JS Mastery라고만 표시하는 또 다른 스팬을 렌더링할 수 있습니다.

이 프로젝트를 누가 만들었는지 알려드리는 기본적인 내용입니다. 마지막으로 두 개의 div를 아래로 내려서 클래스 이름이 설정된 또 다른 div를 렌더링할 수 있습니다.

그리고 루시드 아이콘 리액트에서 가져온 위쪽 화살표 아이콘을 18 사이즈로 렌더링할 수 있습니다. 그래서 이제 호버하면 전체 카드가 클릭 가능하게 나타납니다.

네, 지금은 확대해서 보고 있지만, 배율을 100%로 줄이면 여기 반 정도 너비에서도 괜찮아 보일 거예요.

혹시 조금 더 늘린다면, 저희가 우리만의 층도면을 업로드할 수 있는 아래쪽에 더욱 보기 좋을 거예요.

커뮤니티 계획을 둘러보실 수 있으며, 이를 통해 해당 페이지로 연결될 것입니다.

그리고 이건 이미 멋지네요. 물론, 보기 좋은 UI도 있지만, 제가 도입부에서 보여드린 AI 기능을 실제로 어떻게 구현할 수 있는지에 대해 더 관심이 있으실 거라고 생각합니다.

기본적이고 지루한 2D 평면도를 이렇게 보이는 무언가로 바꿔요. 자, 다음으로 해 봐요.

하지만 그 기능이 큰 비중을 차지할 예정이므로, 현재까지 진행된 변경 사항들을 `git add . git commit -m 구현 홈페이지 UI` 명령어를 통해 적용할 수 있습니다.

그리고 git push를 하셨는데, 이제 다음 섹션에서는 실제로 새로운 브랜치를 만들어 분리된 브랜치에서 적절하게 개발하고, 검토 후에 다시 병합할 수 있도록 하고 싶습니다.

정상적으로 구현이 되었다면 홈 브랜치로 이동하시면 됩니다. 그렇게 하려면 `git checkout -b` 명령어를 실행하고 브랜치 업로드 파일을 호출할 수 있습니다. 다음 강의에서 정확히 그렇게 할 것입니다.

그러면 해당 브랜치가 자동으로 전환되었을 것이고, 이제 구현을 시작할 준비가 되었습니다.