[⚙️ 코드 구현] 포트폴리오 만들기 5차_teampro.html 완성
▲ 이어져요~!
url, view, css, template 이름 변경
제작자인 제가 봐도 헷갈리는 이름이라서 모두 싹-! 변경했어요.
urls.py
views.py
template
싹 정리해 주니까 안 헷갈리고 괜찮아졌어요. 대신 파일명이 너무 길어서 그런지 골 아프네요.. 가독성이 떨어져요.
작업 도중에 계속 이렇게 파일명 변경하고 하는 게 좋지 않다는 생각이 드네요. 😣
초기 단계 때 더 섬세하게 계획할 걸 그랬어요.
Miravelle page 변경
미라벨이 무엇인지 소개 영상으로 유튜브 링크를 걸어두었지만, 맨 왼쪽 화면처럼 소개하는 페이지를 따로 만들어두려고요.
▼main/urls.py 추가
from django.urls import path
from .views import base_views, info_views
app_name = "main"
urlpatterns = [
# base_views.py
...
#info_views.py
...
path("project/miravelle/what-is-miravelle/", info_views.TeamInfo, name="miravelle-info"), # 미라벨이 무엇이냐
]
▼main/views/info_views.py 추가
from django.shortcuts import render
...
# 미라벨이 무엇이냐?
def TeamInfo(request):
return render(request, "team-project/miravelleinfo.html")▼ HTML 추가
...
<!--Miravelle 소개-->
<i><h1>Miravelle✨</h1></i>
<section class="miravelle-section">
...
<div class="card-container">
<div class="miravelle-card">
<img src="{% static "image/miravelle/miravelle-logo.png" %}" alt="Miravelle">
<h3>What is Miravelle?</h3>
<a href="{% url "main:miravelle-info" %}">More Information</a>
</div>
...
</div>
</section>아이콘 추가
Font Awesome : https://fontawesome.com
<i class="fa-solid fa-magnifying-glass"></i>
해당 코드를 HTML에서 쓰고 싶으면 head부분에 해당하는 곳에
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
이 링크를 추가해주세요!
▼ 적용 전
▼ 적용 후
miravelleinfo.html 완성
▼ HTML
더보기
{% extends "base.html" %}
{% load static %}
{% block content %}
<link rel="stylesheet" href="{% static "css/miravelleinfo.css" %}">
<section>
<div class="center-content">
<!--해드라인-->
<img class="miravelle-image" src="{% static "image/miravelle/miravelle-logo.png" %}" alt="miravelle-logo">
<h1>Miravelle : AI 기반 맞춤형 3D 콘텐츠 생성 서비스</h1>
<!--미라벨 소개-->
<h2>🙋🏻 Miravelle 소개</h2>
<p>Miracle(기적) + Belle(아름다움)의 합성어입니다.</p>
<p>생성하고자 하는 3D 모델을 더 쉽고 빠르며 아름답게 만들어주는 AI 서비스입니다.</p>
<h3>3D 모델 생성 시 소요되는 시간과 비용 절약 ‼</h3>
<img class="miravelle-image" src="{% static "image/miravelle/miravelle-prompt.png" %}" alt="프롬프트 적용 전/후">
<p>→ 이미 게임🎮, 영화🍿, 애니메이션👾 산업에서 많은 3D 모델이 필요합니다.</p>
<p>→ 해당 산업에서 3D 모델들을 구상하고 만드는 데 소요되는 시간과 비용을 절약 및 절감하고자, 프로젝트를 시작하였습니다.</p>
<p>→3D 모델을 생성하는 데, 1시간 이상 또는 하루 이상 걸리는 작업 시간이 Miravelle에서는 5분 ~ 10분 사이에 생성됩니다. </p>
<h3>초보자도 쉽게 접근 가능한 3D 모델 생성 사이트‼</h3>
<img class="miravelle-image" src="{% static "image/miravelle/mainpage.png" %}" alt="미라벨 메인 화면">
<p>→ AI를 사용하여 쉽고 아름다운 3D 모델을 만들고 공유할 수 있는 사이트를 제공하고 싶습니다.</p>
<p>→ 이는, 작은 스타트 업도 *MMORPG 혹은 환상적인 영화를 만들 수 있는 부가 가치를 기대할 수 있습니다.</p>
<blockquote>
<p style="font-size: 14px;">*MMORPG?</p>
<p style="font-size: 14px;">대규모 다중 사용자 온라인 롤플레잉(역할 연기) 게임(Massively Multiplayer Online Role-Playing Game)의 줄임말로 게임 장르명입니다.</p>
<p style="font-size: 14px;">예: 메이플스토리(2D), 메이플스토리2(3D), 로스트 아크(3D), 검은 사막(3D) 등등</p>
</blockquote>
<!--미라벨 주요 기능 소개-->
<h2>🙋🏻 Miravelle 주요 기능</h2>
<h3>Agent를 이용한 프롬프팅 3D 모델링 생성</h3>
<img class="miravelle-image" src="{% static "image/miravelle/workspace-page/improve-prompt.gif" %}" alt="프롬프트 향상 gif">
<p>→ AI 에이전트가 사용자의 텍스트 프롬프트를 개선하여 최적화된 3D 모델 생성을 지원합니다.</p>
<p>→ 프롬프트 자동 개선 및 세부화를 통한 더 아름다운 모델 결과물을 제공합니다.</p>
<h3>내가 만든 Asset을 조회 및 다운로드</h3>
<img class="miravelle-image" src="{% static "image/miravelle/asset-page/miravelle-myasset.jpg" %}" alt="마이 에셋 화면">
<img class="miravelle-image" src="{% static "image/miravelle/asset-page/asset-togle3.png" %}" alt="마이 에셋 확인">
<p>→ 개인 창작물 관리 및 저장소와 프롬프트 내역을 확인 가능하고, FBX 형식으로 에셋 다운로드를 지원합니다.</p>
<h3>Three.js를 이용한 3D View 상세보기</h3>
<img class="miravelle-image" src="{% static "image/miravelle/model-detail.gif" %}" alt="모델 상세보기">
<p>→ 웹 브라우저에서 직관적인 3D 모델 탐색 및 조작이 가능합니다.</p>
<p>→ 다양한 각도와 조명에서 모델 미리보기 기능을 제공합니다.</p>
<!--서비스 아키텍처-->
<h2>🙋🏻 Miravelle Architecture</h2>
<img class="miravelle-image" src="{% static "image/miravelle/architecture/Architecture_v2.png" %}" alt="아키텍처">
<!--기술 스택-->
<h2>🙋🏻 Miravelle 기술 스택</h2>
<img class="miravelle-image" src="{% static "image/miravelle/technology/miravelle-technology.png" %}" alt="기술 스택">
</div>
</section>
{% endblock content %}▼ CSS
더보기
/* section 여백 조정 */
section {
padding-top: 30px;
padding-bottom: 50px;
}
/* 제목 스타일 */
h1 {
font-size: 32px;
margin-top: 20px;
text-align: center;
color: black;
}
h2 {
font-size: 22px;
background-color: grey;
color: white;
padding: 10px;
margin-top: 40px;
}
/* 인용문처럼 */
h3 {
font-size: 20px;
font-weight: bold;
font-style: italic;
color: green;
background-color: rgb(255, 253, 253);
border-left: 4px solid green;
border-top: 2px dashed rgb(228, 228, 228);
border-bottom: 2px dashed rgb(228, 228, 228);
border-right: 4px solid green;
padding: 10px;
margin: 40px 0;
}
/* 단락 스타일 */
p {
font-size: 16px;
line-height: 1.6;
margin: 10px 0;
text-align: left;
color: #333;
}
/* 작은 텍스트 */
p[style*="font-size: 14px"] {
font-size: 14px !important;
color: #555;
font-style: italic;
}
/* 인용문 설정 */
blockquote {
background-color: rgb(255, 253, 253);
border: 1px solid rgb(204, 204, 204);
padding: 10px 20px;
margin: 20px 0;
font-style: italic;
}
/* 전체 레이아웃 가운데 정렬 및 여백 */
.center-content {
max-width: 900px;
margin: 0 auto;
padding: 20px;
}
/* 이미지 통일화 */
.miravelle-image {
width: 100%;
height: auto;
display: block;
margin: 20px auto;
border-radius: 8px;
transition: transform 0.3s ease;
}miravellemainpage.html 완성
▼ HTML
더보기
{% extends "base.html" %}
{% load static %}
{% block content %}
<link rel="stylesheet" href="{% static "css/miravelleinfo.css" %}">
<section>
<div class="center-content">
<!--해드라인-->
<img class="miravelle-image" src="{% static "image/miravelle/miravelle-logo.png" %}" alt="miravelle-logo">
<h1>Welcome to Miravelle !! </h1>
<!--기본 화면 소개-->
<h2>🙋🏻 Welcome Miravelle !!</h2>
<h3>메인 화면</h3>
<img class="miravelle-image" src="{% static "image/miravelle/mainpage.png" %}" alt="미라벨 메인 화면">
<p>→ Miravelle에 접속하시면 다른 유저가 생성한 3D 모델 게시물로 반겨줍니다.</p>
<p>→ 왼쪽 상단의 "Miravelle"을 누르면 메인 화면으로 이동합니다.</p>
<p>→ 다른 유저가 생성된 3D 모델의 좋아요/싫어요 등 상호 평가를 확인할 수 있습니다.</p>
<p>→ "Creat to text✏️", "Creat to 3D Model Prompt🤖"와 "감정 표현"을 사용하려면 로그인이 필요합니다. </p>
<!--회원가입 화면-->
<h2>🙋🏻 회원 가입</h2>
<h3>회원 가입 화면</h3>
<img class="miravelle-image" src="{% static "image/miravelle/login-register/register.png" %}" alt="회원 가입 화면">
<p>→ 회원 가입으로는 "ID", "Name", "Password", "Check Password", "Email", "Message"로 구성돼 있습니다. </p>
<h3>회원 가입 에러 처리 - ID 중복</h3>
<img class="miravelle-image" src="{% static "image/miravelle/login-register/register-error1.png" %}" alt="회원 가입 ID 중복 에러">
<p>→ ID는 중복하여 가입하실 수 없습니다. </p>
<h3>회원 가입 에러 처리 - 흔한 비밀번호</h3>
<img class="miravelle-image" src="{% static "image/miravelle/login-register/register-error2.png" %}" alt="회원 가입 짧은 비밀번호">
<p>→ 너무 짧거나 간단한 Password는 사용하실 수 없습니다. </p>
<h3>회원 가입 에러 처리 - 비밀번호 재입력</h3>
<img class="miravelle-image" src="{% static "image/miravelle/login-register/register-error3.png" %}" alt="회원 가입 비밀번호 재입력">
<p>→ 비밀번호 재입력이 다르다면 오류 문구가 발생합니다. </p>
<h3>회원 가입 에러 처리 - Email 중복</h3>
<img class="miravelle-image" src="{% static "image/miravelle/login-register/register-error4.png" %}" alt="회원 가입 Email 중복">
<p>→ Email은 중복하여 가입하실 수 없습니다. </p>
<h3>회원 가입 완료</h3>
<img class="miravelle-image" src="{% static "image/miravelle/login-register/register-done-page.png" %}" alt="회원 가입 완료 화면">
<p>→ 회원 가입이 완료된다면 로그인 화면으로 넘어갑니다. </p>
<p>→ 가입했던 ID는 자동으로 입력되지만 비밀번호는 따로 입력하셔야 합니다. </p>
<!--로그인된 화면 소개-->
<h2>🙋🏻 로그인</h2>
<h3>로그인 화면</h3>
<img class="miravelle-image" src="{% static "image/miravelle/login-register/login-page.png" %}" alt="로그인 화면">
<p>→ 가입하였던 ID와 Password 입력창이 가장 먼저 보입니다.</p>
<p>→ 만일 가입되지 않은 유저라면 "Register"를 눌러 회원 가입 화면으로 이동할 수 있습니다.</p>
<h3>로그인 에러 처리 - Password 미입력</h3>
<img class="miravelle-image" src="{% static "image/miravelle/login-register/login-error.png" %}" alt="로그인 화면 비밀번호 빈칸">
<p>→ Password 입력을 누락하였다면 입력 필수라는 안내문이 나타납니다.</p>
<h3>로그인된 메인 화면</h3>
<img class="miravelle-image" src="{% static "image/miravelle/loggined-main.png" %}" alt="로그인된 메인 화면">
<p>→ 로그인이 된다면 상단에 "MY Assets", "Workspace" 칸이 나타납니다.</p>
<p>→ 이제 "Creat to text✏️", "Creat to 3D Model Prompt🤖"와 "감정 표현"을 사용할 수 있습니다.</p>
<h2>🙋🏻 게시물 상세 보기</h2>
<h3>Detail</h3>
<img class="miravelle-image" src="{% static "image/miravelle/model-detail.gif" %}" alt="게시물 상세보기">
<p>→ 게시물을 누르면 상세 보기가 가능합니다.</p>
<p>→ 해당 3D 모델에 감정 표현을 남길 수 있습니다.</p>
<p>→ 해당 3D 모델의 텍스처 스타일, 프롬프트, 생성일 확인이 가능합니다.</p>
<p>→ 생성된 3D 모델을 다양한 각도에서 확인이 가능하고, 확대/축소도 가능합니다.</p>
</div>
</section>
{% endblock content %}miravelleworkspace.html
▼ HTML
더보기
{% extends "base.html" %}
{% load static %}
{% block content %}
<link rel="stylesheet" href="{% static "css/miravelleinfo.css" %}">
<section>
<div class="center-content">
<!--해드라인-->
<img class="miravelle-image" src="{% static "image/miravelle/miravelle-logo.png" %}" alt="miravelle-logo">
<h1>Miravelle Workspace 🕶</h1>
<!--Creat to text 버튼 gif-->
<h2>🙋🏻 3D 모델 생성하러 가기</h2>
<h3>Creat to text✏️</h3>
<img class="miravelle-image" src="{% static "image/miravelle/go-to-Workspace.gif" %}" alt="모델 생성하기">
<p>→ 로그인된 메인 화면에서 "Creat to text✏️" 버튼을 누르면 3D 모델을 생성하는 Workspace로 이동하게 됩니다.</p>
<!--worksapce 화면 소개-->
<h2>🙋🏻 Workspace 화면</h2>
<h3>Workspace 소개</h3>
<img class="miravelle-image" src="{% static "image/miravelle/workspace-page/workspace.png" %}" alt="workspace">
<p>→ Workspace의 왼쪽에는 Model 생성과 Texture를 작업하는 버튼이 존재합니다.</p>
<blockquote>
<p style="font-size: 14px;">기본적으로 Model 페이지로 시작합니다.</p>
</blockquote>
<p>→ Workspace의 오른쪽에는 Prompt 입력 칸과 진행률 바와 Art Style, Enhance Prompt, Generate Model 버튼이 존재합니다.</p>
<p>→ Art Style : *Realistic과 *Sculpture로 2가지로 선택 가능합니다.</p>
<blockquote>
<p style="font-size: 14px;">*Realistic : 사실적인 묘사</p>
<p style="font-size: 14px;">*Sculpture : 섬세한 묘사</p>
</blockquote>
<!--모델 생성 gif-->
<h2>🙋🏻 3D 모델 생성하기</h2>
<h3>Enhance Prompt 버튼 사용하기</h3>
<img class="miravelle-image" src="{% static "image/miravelle/workspace-page/improve-prompt.gif" %}" alt="Enhance Prompt">
<p>→ 3D 모델 생성을 하기 위해선 프롬프트(Prompt)를 작성해야 합니다.</p>
<p>→ 프롬프트(Prompt)를 처음 작성하더라도 "Enhance Prompt" 버튼으로 부족한 프롬프트를 AI가 향상시켜줍니다.</p>
<h3>Generate Model로 모델 생성하기</h3>
<img class="miravelle-image" src="{% static "image/miravelle/workspace-page/created-model.png" %}" alt="생성된 모델">
<p>→ "Generate Model" 버튼을 누르면 입력된 프롬프트를 바탕으로 5분~10분 이내로 3D 모델이 생성됩니다.</p>
<!--Texture 작업 이미지 및 gif-->
<h2>🙋🏻 생성된 모델에 Texture 입히기</h2>
<h3>왼쪽 Texture 버튼 사용하기</h3>
<img class="miravelle-image" src="{% static "image/miravelle/workspace-page/create-texture.png" %}" alt="텍스처링">
<p>→ 생성된 3D 모델 화면 그대로 Texture 버튼을 누르면 해당 모델을 텍스처링 하게 됩니다.</p>
<p>→ "Refine Mesh" 버튼을 누르면 퍼센트 게이지가 올라가면서 텍스처링 작업이 시작됩니다.</p>
<h3>텍스처링이 완료된 모델</h3>
<img class="miravelle-image" src="{% static "image/miravelle/workspace-page/created-texture.gif" %}" alt="텍스처링 완료">
<p>→ 텍스처링이 완료되면 Workspace에서도 생성된 모델을 다양한 각도에서 확인 가능합니다.</p>
<p>→ 텍스처링이 완료되어야 "Publish" 버튼이 활성화됩니다.</p>
<h3>Publish 버튼 사용하기</h3>
<img class="miravelle-image" src="{% static "image/miravelle/workspace-page/publish.gif" %}" alt="게시 목록에 등록하기">
<p>→ 활성화된 "Publish" 버튼을 누르면 생성된 3D 모델이 메인 화면에 자동으로 게시됩니다.</p>
</div>
</section>
{% endblock content %}마무리
분명 12시에 시작했던 작업이,, 부지런히 해도 21시 30분에 끝나네요. 😂
저의 대단한 집중력과 엉덩이 힘에 무한한 박수를 보냅니다.. 👏🏻
이번에 HTML에 아이콘을 어떻게 추가하는지 알 수 있었어요!
CSS도 계속 쓰고, 작성하다 보니까 느낌이 오네요! 😋
오늘도 정말 재밌었어요 ㅎㅎ
'⚙️ 포트폴리오 코드 구현' 카테고리의 다른 글
| [⚙️ 코드 구현] 포트폴리오 만들기 5차_teampro.html 완성 (0) | 2025.04.16 |
|---|---|
| [⚙️ 코드 구현] 포트폴리오 만들기 4차_index.html 수정, main.html 추가 (0) | 2025.04.15 |
| [⚙️ 코드 구현] 포트폴리오 만들기 3차_index.html 작성하기 (0) | 2025.04.13 |
| [⚙️ 코드 구현] 포트폴리오 만들기 2차_폴더 구조 변경 및 서버 실행 (0) | 2025.04.12 |
| [⚙️ 코드 구현] 포트폴리오 만들기 1차_개발 환경 세팅 (0) | 2025.04.11 |