첫 번째 버전과 달라진 것이 뭐가 있는지 기록을 해야할 것 같다.
1. 윈도우 98테마를 적용했다.
- 이건 당연히 온전히 내 능력으로 한건 아니고 구글링을 통해 css 코드를 발견했다.
98.css
A design system for building faithful recreations of old UIs.
jdan.github.io
엑스형은 2005년 배경이긴하지만 대충 그 언저리 느낌이 나려면 윈도우98 감성이 필요하다고 생각했기 때문에
굉장히 열심히 찾았다.
사실 css에 대해 아는거라곤 생활코딩에서 어찌어찌 연습해본게 다였어서 기억을 되짚어가며 만들어야 했다.
2. 시작페이지를 만들었다.
- 바로 엑스형이 제목인 페이지로 접속하는게 아니라 "Go back to 2005?" 문구가 쓰인 팝업창에서 OK 버튼을 눌러야 접속 가능하도록 만들었다. 별거 아니지만 사용자 입장에서 진짜 그 홈페이지에 선택해서 들어가는 느낌이 나도록했다.
<!doctype html>
<html>
<head>
<title>엑스형</title>
<link rel="stylesheet" href="https://unpkg.com/98.css@0.1.4/build/98.css" />
<meta charset="utf-8">
<style>
body {
margin: inherit;
}
</style>
</head>
<body style="background-color: #a9a9a9;">
<div class="window" style="margin: 32px; width: 283px">
<div class="title-bar">
<div class="title-bar-text">
Welcome to my 엑스형's Webpage
</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body">
<p>Go back to 2005?</p>
<section class="field-row" style="justify-content: flex-end">
<a href = "mainpage.html"><button>OK</button>
<button>Cancel</button>
</section>
</body>이게 새로 작성한 index 파일이다. 사실 저 팝업창은 역시 98 css 홈페이지에서 제공한 코드를 그대로 썼다.
이렇게 뜬다. 정말 별거 아닌거 같지만 이 페이지를 만들어야겠다고 아이디어 낸것부터 실행까지 꽤 시간이 걸렸다...
3. 카테고리를 세분화했다.
- 기존 페이지는 멤버 이름만 나열한 정말 가장 기본 중의 기본이었는데, 이번에 수정할때는 홈페이지의 구조 자체를 좀 더 구체적으로 구성했다.
카테고리를 이렇게 만들 생각은 없었는데, 98 css 에서 트리형 카테고리를 끌고와서 쓰다보니 이렇게 구상해야겠다는 아이디어가 바로 떠올랐다.
정보 부분은 사실 별다른건 없어서 패스하겠다. 그냥 누르면 명대사와 사진이 나오는게 다다.
▶엑스형 명대사 보러가기
- 이게 사실 내가 만들고 싶었던 가장 메인 기능인데, 아직.. 구현하지 못했다. 저걸 만들기 위해서는 database를 사용해야하는데.. 아직 거기까지 하는 방법을 몰라서 미뤄뒀다. 이 블로깅을 끝마치면 이거부터 시작해야겠다.
▶방명록
- 이것 역시 꼭 구현해야할 기능이다. 이 웹페이지를 들리는 사람들이 한 마디씩 쓰고 갈 수 있도록 하는 기능. 애초에 엑스형에 과몰입해서 할 말이 많은 인간이기 때문에 이 기능이 꼭 활성화됐으면 좋겠다.
4. 웹 폰트
- 와 정말 이 기능때문에 머리 터지는 줄 알았다.
위 캡쳐를 보면 알 수 있듯이 내 웹페이지는 '둥근모꼴'을 사용하고 있다. 2005년 감성은 사실 이게 아니긴 하지만 어쨌든 레트로 감성을 살리기 위해서는 꼭 이 폰트를 사용하고 싶었다.
하지만 문제는 내 컴퓨터에는 둥근모꼴이 설치 되어 있는데 다른 사람들 컴퓨타+모바일+태블릿에서는 둥근모꼴로 로드가 되지 않는다는거 였다.
폰트가 뭐라고 그냥 넘어갈 수도 있었는데 정말 포기할 수가 없었다. 폰트하나로 웹페이지가 주는 전체적 느낌이 너무 달라진다고 생각했기 때문에
그래서 내가 할 수 있는 가장 쉬운 방법인 '웹폰트'를 사용해봤다.
eot, woff 등등의 파일로 변환을해서 font-family 블라블라를 하는 방법을 한 과장없이 4-5번은 시도해봤으나 실패했고
결국 구글 웹폰트처럼 한글 폰트를 지원해주는 사이트에서 둥근모꼴을 찾아서 가져다가 썼다.
위 사이트에 가면 무료 글꼴들의 주소만 가져와서 폰트를 사용할 수 있다.
<!doctype html>
<html>
<head>
<title>엑스형</title>
<link rel="stylesheet" href="https://unpkg.com/98.css@0.1.4/build/98.css" />
<meta charset="utf-8">
<style>
@font-face {
font-family: 'DungGeunMo';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/DungGeunMo.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
text-align: center;
font-family: 'DungGeunMo';
}
a {
color:black;
text-decoration: none;
}
ul {
margin: auto;
font-family: "DungGeunMo";
}
#listbox{
margin: auto;
text-align: left;
}
</style>
</head>사용은 대략 이런식으로 했다. 솔직히 내가 짠 코드가 얼마나 효율성 있는지 얼마나 로딩이 오래걸리는 쓰레기 코드인지 알 방법이 없다. 다만 진짜 로딩이 오래걸리긴한다...
이게 이 방식이 웹 서버에서 폰트 정보를 불러와야해서 그렇다고 한다.
하지만 폰트가 주는 느낌을 포기할 수 없었기에...
결국 이 방식을 선택했다.
일단 눈에 보이는게 바뀌었기 때문에 흡족하긴 하다.
5. 그 외
- 메인 사진을 gif 로 업로드했다. (더욱 옛날 느낌이 난다)
- 배경음악 플레이어를 만들려고 가장 먼저 시도했으나, 내가 지금 할 수 있는 기능이 아닌거 같아서 빠르게 포기했다.
- 실제 버디버디 2005년 웹사이트를 구경했었다. 디자인적 참고를 하기 위해서
들어가보니 홈페이지 가장 밑에 이런 문구가 있더라 (Copyrightⓒ 2005 XBrother Co., Ltd. All rights reserved.)
그래서 나도 그냥 따라해봤다. 의미는 없지만 그래도 뭔가 더 있어보인다.
여기까지의 소감:
결국 추가해봤자 디자인적 요소를 업그레이드 한게 다다. 여전히 html 문서 수준이라는 말이다.
그럼에도 불구하고 대충 끝마쳤을때의 성취감은 대박이었다. 진짜 뭔가 옛날 느낌나는 웹사이트를 구현했다는 사실에... 감격스러웠다.
이제 진짜 js를 이용해서 사용자 반응형 웹사이트를 만들어야한다.
1. 가장 먼저 database를 사용하는 방법
2. github이 아닌 내 컴퓨터에서(?) 호스팅 하는 방법
3. css를 좀 더 제대로 사용해서 페이지 구역이 나눠져 있는 진짜 같은 웹페이지 만들기
가 세번째 목표가 되지 않을까 싶다.
힘내보자아아앙
'programming > 엑스형 프로젝트' 카테고리의 다른 글
| 명대사 + 사진 그리드 만들기 (0) | 2020.12.17 |
|---|---|
| Alert box 디자인하기 (0) | 2020.12.15 |
| alert 메세지 창에 함수 실행하기 (0) | 2020.12.15 |
| 랜덤 명대사 추출 (0) | 2020.12.14 |
| step 1 (0) | 2020.11.18 |
