[포트폴리오] 우주를 담다, 가상의 브랜드 'COSMOS ARCHIVE' 웹사이트 제작기 (반응형 웹)
안녕하세요, '둥둥'입니다. 🌌
오늘은 조금 특별한 작업물을 소개해드리려 합니다. 평소 클라이언트의 의뢰를 받아 작업하는 경우도 많지만, 가끔은 제가 표현하고 싶은 주제로 자유롭게 기획하고 코딩한 개인 포트폴리오를 만들곤 합니다.
이번에 공개하는 사이트는 **'COSMOS ARCHIVE(코스모스 아카이브)'**라는 이름의 프로젝트입니다. ※ 참고해주세요: 이 사이트는 실제 존재하는 기업이나 단체가 아닌, 저의 **웹 퍼블리싱 실력과 디자인 구현 능력을 보여드리기 위해 제가 상상해서 만든 '가상의 브랜드'**임을 미리 밝혀둡니다.
🚀 프로젝트 컨셉: 미지의 우주로의 초대
"우주의 가장 깊은 곳을 탐험할 준비가 되셨나요?"
단순히 정보를 나열하는 딱딱한 홈페이지가 아니라, 접속하자마자 우주 한복판에 있는 듯한 몰입감을 주고 싶었습니다. 전체적으로 어두운 배경에 텍스트와 이미지가 돋보이도록 디자인하여, 브랜드(가상)의 신비로운 이미지를 강조했습니다.
💻 주요 구현 기능 (Technical Point)
HTML5와 CSS3를 웹 표준에 맞게 사용하여 구조를 잡았고, 다음과 같은 기능에 중점을 두었습니다.
1. 시맨틱 마크업 (Semantic Markup) <header>, <nav>, <section> 등 의미에 맞는 태그를 사용하여 검색 엔진 최적화(SEO)와 웹 접근성을 고려했습니다.
2. 반응형 헤더 & 햄버거 메뉴 PC 화면에서는 메뉴가 나열되지만, 모바일 환경에서는 **햄버거 버튼(Hamburger Menu)**으로 변환되도록 구현했습니다. (소스 코드의 .hamburger 클래스 부분)
3. 직관적인 갤러리 프리뷰 안드로메다 은하, 화성, 오리온 성운 등 고해상도 이미지를 카드 형태로 배치하여, 사용자가 클릭하고 싶게끔 유도하는 UI를 구성했습니다.
🎨 결과물 확인하기
백문이 불여일견! 제가 상상력을 더해 만든 이 가상의 우주 아카이브가 궁금하시다면 아래 링크를 눌러 직접 체험해 보세요.
👉 [COSMOS ARCHIVE 샘플 사이트 보러가기] https://changjunyun.github.io/sample_test/index.html
📷 이미지 출처 표기 (Image Sources)
본 포트폴리오 사이트에 사용된 우주 이미지는 상업적/비상업적 이용이 가능한 Wikimedia Commons의 이미지를 사용했습니다.
- Andromeda Galaxy: Wikimedia Commons (Andromeda Galaxy with h-alpha)
- Mars: Wikimedia Commons (OSIRIS Mars true color)
- Orion Nebula: Wikimedia Commons (Orion Nebula - Hubble 2006 mosaic)
🤝 제작 의뢰 및 문의
비록 이번 프로젝트는 가상의 회사를 컨셉으로 잡았지만, 이런 스타일의 감각적인 랜딩 페이지나 기업 홈페이지 제작이 필요하신가요?
- 나만의 브랜드 아이덴티티를 살린 홈페이지
- PC와 모바일 모두 완벽하게 지원하는 반응형 웹
- 깔끔한 코드와 유지보수하기 쉬운 구조
제작 관련하여 궁금한 점이 있다면 언제든 편하게 문의주세요. 아래 오픈채팅 링크를 클릭하시면 저와 바로 1:1 상담이 가능합니다.
[카카오톡 1:1 문의하기] 👇👇👇 https://open.kakao.com/o/sizsMV9h
여러분의 상상을 현실의 웹사이트로 만들어 드리겠습니다. 감사합니다!