✅ Manus 1,000 크레딧 (클릭)
크레딧 유효기간은 10월 1일까지. 꼭 등록 후 사용하세요.
📢 공지 사항
Manus의 웹 빌더 기능을 활용해 포트폴리오 사이트 만드는 과정을 편집한 자료입니다. 웹 빌더 기능 구현에 필요한 핵심 프롬프트를 정리한 것일 뿐, 실제로 필요한 수정 범위와 횟수는 사람마다 다를 수 있습니다.
🏠 Manus로 만든 픽셀룸 사이트 (클릭)
처음부터 완벽하게 말할 필요 없이 전체 구조를 말하고, 결과를 보면서 마음에 안 드는 부분을 하나씩 수정합니다.
기존 포트폴리오(www.floatingpaper.com)의 내용을 기반으로, 독립된 사이트 ‘픽셀룸'을 만들고 싶어.
[메인 페이지]
- 첨부한 작업실 사진을 아이소메트릭 픽셀 아트로 변환해서 메인 화면에 적용.
- 방의 형태, 가구 배치, 색, 시점은 절대 바꾸지 말 것. 새 가구를 추가하거나 기존 가구를 다시 그리지 말고, 이 이미지 위에 기능과 움직임만 더할 것.
- 작업실 사진의 내 모습을 픽셀 캐릭터로 포함. 각 캐릭터는 방문자가 사이트에 들어올 때마다 랜덤으로 바뀐다.
- 픽셀룸 안의 모니터, 벽 시안, 책꽂이, 캐릭터를 각각 누를 수 있게 해줘. 마우스를 올렸을 때 효과 없음. 모니터는 Work, 벽 시안은 Process, 캐릭터는 About, 책꽂이는 Instagram 피드를 연결.
- 상단 메뉴, footer 없음
[아이소메트릭 픽셀 아트]
- 디지털 픽셀이 아님. 모눈종이 위에 사람이 색연필로 픽셀을 하나씩 채운 것처럼 선과 픽셀 경계가 약간 불규칙하고 종이 질감이 느껴짐.
- 방 바깥은 솔리드한 색으로 두고, 작업실 주변에만 아주 옅은 모눈이 보이게 해줘.
한국 시간에 맞춰 픽셀룸의 조도를 자동으로 바꿔줘.
- 새벽, 낮, 늦은 오후, 저녁, 밤 장면이 필요해.
- 시간대마다 방의 밝기와 배경색은 달라도 되지만, 방의 크기와 위치는 모든 장면에서 정확히 같아야 해.
- 왼쪽 상단에는 내가 확인할 수 있게 AUTO, AM, PM, LATE, EVE, NIGHT 버튼을 세로 한 줄로 넣어줘. 버튼은 모두 같은 정사각형 크기.
- 저녁과 밤에는 천장 한지등을 사용자가 직접 눌러 켜고 끌 수 있게 해줘. 별도의 조명 버튼은 없음. 한지등을 눌렀을 때만 불 켜진 장면과 꺼진 장면이 바뀌게 해줘.
[유영하는 픽셀 썸네일]
- 기존 포트폴리오의 Work 내용을 모두 가져와줘.
- Work 화면에서는 프로젝트 사진이 화면 안에서 천천히 떠다니게 해줘.
- 페이지를 새로 열 때마다 사진의 순서와 처음 위치가 달라지면 좋겠어.
- 사진은 사용자가 끌어서 옮길 수 있어야 해.
- 기본 사진은 아날로그 픽셀 질감으로 보이고, 마우스를 올리면 선명한 원본 사진이 보이게 해줘.
[상세 패널]
- 사진을 누르면 상세 내용이 화면 위에 떠야 해.
- 프로젝트 상세 내용은 사진이 위, 제목과 설명이 아래로 이어지게 해줘.
- 가로 사진과 세로 - 사진이 섞여 있어도 이미지 일부가 잘리면 안 돼. 사진을 자동으로 넘길 수 있고, 사용자가 화살표로 직접 넘길 수도 있게 해줘.
- 상세 패널의 폭, 글자 크기, 여백은 원본 포트폴리오에서 보이는 느낌을 최대한 유지해줘.
[메인으로 돌아오는 작은 방 이미지]
- Work 화면의 왼쪽 아래에는 메인 작업실로 돌아가는 작은 픽셀룸 이미지를 넣어줘.
- 흰 박스나 테두리는 없이 방만 투명하게 보이게 해줘. 이 작은 방 이미지도 지금 한국 시간의 작업실 장면과 맞춰서 바뀌면 좋겠어.
[About]
캐릭터를 누르면 About 내용이 작업실 위에 떠서 열리게 해줘.
- About에 나눠 둔 Contact, Floating Paper, 고경아 Kyeongah Ko 내용을 한 화면 안에서 위에서 아래로 읽을 수 있게 해줘.
- 세 내용은 글자 크기와 제목의 무게를 똑같이 맞추고, 얇은 선으로만 구분해줘.
- 중간에 Floating Paper 로고를 넣되, 로고 위아래에는 충분한 흰 여백을 줘.
- 내용이 길면 패널 안에서 아래로 스크롤해서 읽게 해줘.
[Process]
벽에 붙은 시안을 누르면 Process 내용이 작업실 위에 열리게 해줘.
- 한 번에 한 단계씩 보여줘. 각 단계는 가장 위에 단계 번호와 제목, 가운데에는 원본 이미지, 아래에는 상세 설명이 오게 해줘.
- 1단계부터 4단계까지 이미지가 끝나는 위치와 글이 시작하는 위치는 모두 같아야 해.
- 좌우 화살표로 다음 단계와 이전 단계를 볼 수 있게 해줘.
- 첫 단계에는 왼쪽 화살표를 보이지 않게 해줘. 화살표에는 배경이나 테두리를 넣지 말아줘.
[공통]
- About, Process, Work 상세 패널은 같은 폭으로 맞춰줘.
- 닫기 버튼은 오른쪽 위 끝에 사방 여백을 똑같이 두고, 얇고 연하게 보여줘.
- 패널 안의 스크롤 바는 오른쪽 끝에 붙여줘.
실버 책꽂이를 누르면 Instagram 피드가 작업실 위에 열리게 해줘.
- 임베드 코드로 전달한 게시물 6개만, 내가 정한 순서대로 보여줘. 각 게시물은 실제 게시물 링크와 같은 썸네일을 사용해야 해.
- 피드는 3열로 보여주고, 썸네일을 누르면 실제 Instagram 게시물이 새 창에서 열리게 해줘.
- 피드 배경의 색, 테두리 없음. 닫기 표시만 오른쪽 상단.