📖 Mockup Server 사용 설명서

이 서버는 UI/UX 가이드·목업(순수 HTML)을 함께 보고 올리고 고치는 공간입니다. 아래 순서대로 따라 하시면 됩니다.

1. 로그인

1. 서버 주소로 접속하면 로그인 화면이 나옵니다.
2. 관리자에게 받은 아이디와 비밀번호를 입력하고 로그인을 누릅니다.
3. 로그인하면 준비된 목업의 첫 화면(index.html)이 바로 보입니다.

2. 목업 보기

• 메인 화면: 로그인 직후 보이는 화면이 index.html 입니다. 주소창의 / 로 언제든 돌아올 수 있습니다.
• 개별 파일 보기: 파일은 주소창에 파일 경로를 그대로 적으면 열립니다. 예) /sample.html, /project-a/home.html
• 목록에서 보는 방법은 아래 파일 관리 화면을 참고하세요.

3. 파일 관리 화면 들어가기

업로드·편집·삭제는 파일 관리 화면에서 합니다. 주소창에 /admin 을 입력해 들어갑니다. (상단 메뉴의 링크로도 이동할 수 있습니다.)

이 화면에는 올라온 모든 파일 목록과 각 파일의 보기 / 편집 / 삭제 버튼이 있습니다.

4. 파일 업로드 (이미지 포함)

이미 만들어 둔 파일(내 컴퓨터의 HTML, CSS, JS, 이미지 등)을 올릴 때 씁니다.

방법

1. /admin 화면의 ① 파일 업로드 칸으로 갑니다.
2. 하위폴더는 선택 사항입니다. 예: project-a 라고 적으면 project-a/ 아래에 올라갑니다. 비워 두면 최상위에 올라갑니다.
3. 파일 선택에서 올릴 파일을 고르고 업로드를 누릅니다. (파일 이름은 고른 파일 이름이 그대로 사용됩니다.)

5. 새 HTML 만들기

내 컴퓨터에 파일이 없고, 브라우저에서 바로 빈 HTML을 만들어 편집하고 싶을 때 씁니다. (업로드와 다릅니다!)

1. /admin 화면의 ② 빈 HTML 새로 만들기 칸에 만들 파일 경로를 적습니다. 예: index.html, project-a/home.html
2. 새로 만들기를 누르면 빈 HTML이 생성되고 곧바로 편집 화면으로 이동합니다.

6. 편집

1. /admin 목록에서 고칠 파일의 편집을 누릅니다. (HTML/CSS/JS 등 텍스트 파일만 편집할 수 있습니다. 이미지는 편집 불가.)
2. 편집기에서 내용을 고친 뒤 저장을 누릅니다.
3. 편집 화면 우측의 새 탭에서 미리보기 ↗ 로 결과를 바로 확인할 수 있습니다.

7. 삭제

/admin 목록에서 파일의 삭제 버튼을 누르면 확인 후 삭제됩니다. 화면에서는 되돌릴 수 없으니 신중히 진행하세요.

8. 활동 로그 보기 / 다운로드

상단 메뉴의 로그(/admin/logs)에서 로그인·업로드·편집·삭제 기록을 날짜별로 볼 수 있습니다.

• 왼쪽에서 월/날짜를 고르면 해당 날짜의 기록이 오른쪽에 표시됩니다.
• 편집 기록에는 무엇이 바뀌었는지 diff 가 함께 보입니다.
• 날짜 화면 우측의 ⬇ 다운로드 로 그 날짜의 로그 파일을 내려받을 수 있습니다.

9. 비밀번호 변경

상단 메뉴의 비밀번호 변경(/account/password)에서 본인 비밀번호를 바꿀 수 있습니다.

1. 현재 비밀번호를 입력합니다.
2. 새 비밀번호를 입력하고, 같은 값을 새 비밀번호 확인에 한 번 더 입력합니다.
3. 변경을 누르면 완료됩니다. 다음 로그인부터 새 비밀번호를 사용하세요.

10. 자주 묻는 질문 / 팁

로그인했는데 빈 화면이 떠요.

메인으로 보여줄 index.html 이 아직 없어서입니다. /admin 에서 index.html 을 업로드하거나 새로 만들어 주세요.

이미지/CSS가 깨져서 나와요.

HTML 안에서 에셋을 상대 경로로 부르고, 그 파일도 같은 위치에 올렸는지 확인하세요. 예: HTML에서 img/logo.png 를 썼다면 img/logo.png 도 업로드되어 있어야 합니다.

올릴 수 있는 파일 종류는?

HTML, CSS, JS, 이미지(png/jpg/gif/svg/webp 등), 폰트, json/txt 등입니다.