[Genie95] #0. Windows95 테마 포트폴리오 웹사이트 만들기

태초에 MS-DOS라는 것이 있었다. 우리 엄마는 개발자는 아니지만 컴퓨터를 잘 다뤘다. 그래서 아주 갓난쟁이일 때부터 처음 본 컴퓨터가 CLI 기반이었고, 지금까지도 컴퓨터하면 아주 투박한 모니터에 코드가 빼곡한 쉘이 떠오른다.

 

30살에 개발을 처음 시작하면서 내가 생각하는 개발자의 stereotype은 MS-DOS에서 쉘에 명령어를 입력하는 투박한 모습으로 남아있는듯 하다.

 

그래서 나의 첫 개발 포트폴리오는 내가 생각하는 컴퓨터의 모습을 그리면 어떨까 생각했다. 내가 처음으로 컴퓨터를 배울 때 사용한 Windows 95 테마를 차용하여 포트폴리오 웹사이트 페이지를 만들어보려 한다.

 

관련 내용을 검색하면서 React95라는 github repo를 발견하였고, 여기서 여러 영감을 얻을 수 있는 웹사이트를 발견했다.

https://github.com/React95/React95 

GitHub - React95/React95: A React components library with Win95 UI

 

개인적으로 Janne과 Insaf의 웹사이트가 제일 맘에 들어 이와 유사하게 만들 것이다.

https://insafkhamzin.com/

Insaf Khamzin

https://janneilkka.com/

Janne Koivisto's Website

 

Windows 95는 아니지만 98 CSS 에셋을 종합해놓은 github 페이지도 참고하고자 한다.

https://jdan.github.io/98.css/

98.css

 

---

프로젝트 진행 단계를 간단하게 공유하자면,

1. 리서치 및 기획

✅ 디자인 컨셉 정하기 (Windows 95/98 감성을 정확히 정의)

✅ 호스팅 방식 선택:

• 직접 서버 운영 (라즈베리파이, 개인 서버 등)

• 클라우드 이용 (AWS, Linode, DigitalOcean 등)

✅ 운영체제 선택: Linux 배포판 선택 (Ubuntu/Debian 추천)

✅ 도메인 구매처 및 비용 조사

 

2. 개발

✅ 로컬 개발 환경 구축

• 필수 툴 설치 (VSCode, Git, 필요하면 Node.js)

• Windows 95/98 스타일의 HTML/CSS 기본 레이아웃 제작

• JavaScript를 활용한 인터랙션 추가 (선택 사항)

 

✅ 버전 관리 & CI/CD 구축

• GitHub 저장소 생성

• GitHub Actions로 자동 배포 설정

 

✅ 서버 구축

• Linux 서버 설치 및 설정 (직접 구축 or 클라우드)

• 웹서버 (Nginx/Apache) 설치 및 설정

• SSH 접속 및 보안 설정

 

✅ 도메인 & DNS 설정

• 도메인 구매 후 설정

• DNS 레코드 (A, CNAME 등) 구성

 

✅ 배포 테스트

• 웹사이트를 서버에 업로드 및 테스트

• 도메인 주소로 접속 확인

 

3단계: 블로그 기록 & 추가 개선

✅ 제작 과정 블로그 연재

• Linux 서버 구축 과정

• 웹사이트 개발 및 배포 방법

• CI/CD 자동화 설정

 

✅ 추후 개선 사항

• JavaScript를 활용한 인터랙션 추가

• 모바일 반응형 디자인 적용

• 방문자 분석 기능 추가 (선택)

 

---

 

이 프로젝트에서 필요한/습득할 수 있는 기술 스택은 다음과 같다.

• 프론트엔드: HTML, CSS (필요하면 JavaScript)
• 백엔드: 정적 호스팅 (Nginx/Apache) 또는 간단한 서버
• 서버: Linux 기반 웹서버 (직접 구축 또는 클라우드 이용 - AWS)
• 도메인: 맞춤 도메인 구매 및 설정 (AWS Route 53 이용)
• CI/CD: GitHub 저장소를 활용한 자동 배포

---

 

다음 포스팅부터는 프로젝트를 진행하는 과정과 겪은 시행착오를 순서대로 공유할 예정이다. 최소 2주 ~ 최대 한달 안에 프로젝트를 완료하는 것을 목표로 한다. 🚀