Chrome의 기본 새 탭 페이지는 그 목적에는 부합하지만, 미적인 매력이나 개인 맞춤 기능이 부족합니다.온라인 경험을 향상시키고자 하는 사용자의 경우, 홈페이지를 맞춤 설정하면 기능을 크게 향상시킬 수 있습니다.
많은 최신 브라우저가 기존 새 탭 페이지를 더 이상 지원하지 않는 시대에, 저는 크롬의 맞춤 설정 옵션을 살펴보았습니다.날씨 업데이트, RSS 피드, 할 일 목록 등의 요소를 갖춘 맞춤형 홈페이지를 만드는 것은 간단하면서도 보람 있는 작업이었습니다.
맞춤형 홈페이지를 만드는 이유는?
확장 프로그램도 유용하지만 개인 대시보드가 더 빛납니다
Chrome에 기본으로 제공되는 새 탭 페이지는 최근 탭과 북마크에 접근할 수 있는 간결한 환경을 제공하지만, 포괄적인 정보를 원하는 사용자의 요구를 충족하지 못하는 경우가 많습니다.더 많은 기능을 원하는 사용자에게 Chrome의 기능에만 의존하는 것은 불편할 수 있습니다.
저에게 새 탭 페이지는 브라우저를 실행할 때마다 필수 정보를 표시하는 중요한 개인 대시보드 역할을 합니다.탭 위젯, start.me, Momentum과 같은 다양한 확장 프로그램이 대시보드 기능을 제공하지만, 사용자 맞춤 설정이 제한되는 경우가 많습니다.자신만의 홈페이지를 만들면 콘텐츠와 디자인을 완벽하게 제어할 수 있을 뿐만 아니라 HTML, CSS, JavaScript 기술도 향상시킬 수 있습니다.
사용자 정의 페이지 설정
Chrome을 개선하는 데 필요한 것은 4개의 파일뿐입니다.
맞춤형 홈페이지를 만드는 데 복잡한 개발 도구는 필요하지 않습니다.홈페이지는 기본적으로 HTML 파일과 디자인을 위한 CSS, 그리고 상호작용을 위한 JavaScript로 구성됩니다.먼저 다음 파일을 포함하는 디렉터리를 만드세요.
- index.html: 홈페이지 레이아웃의 핵심입니다.
- style.css: 페이지의 스타일, 글꼴, 색상을 관리합니다.
- main.js: 대화형 기능과 스크립트를 소개합니다.
- manifest.json: Chrome에 확장 프로그램의 목적을 알려주는 구성 파일입니다.
이 프로젝트는 기본적으로 정적 웹 페이지입니다.index.html 파일은 상단에 날씨, 중앙에 눈에 띄는 디지털 시계, 하단에 동기 부여 명언, RSS 피드, 그리고 작업 목록을 위한 섹션으로 구성된 레이아웃을 보여줍니다.manifest.json 파일은 매우 중요한데, 이 페이지를 Chrome 확장 프로그램으로 변환하여 단 한 줄의 코드만으로 기본 새 탭 페이지를 재정의할 수 있도록 합니다.
"chrome_url_overrides": { "newtab": "index.html"}
뉴델리의 현재 날씨를 표시하기 위해 OpenWeather API를 활용했습니다.이 스크립트는 현재 날씨에 따라 온도와 아이콘 조정을 포함한 최신 날씨 데이터를 가져오며, 페이지가 새로 고침될 때마다 새로 고쳐집니다.
const OPENWEATHER_KEY = 'enterAPIkeyhere';fetch(`https://api.openweathermap.org/data/2.5/weather?q=New Delhi&appid=${OPENWEATHER_KEY}&units=metric`).then(res => res.json()).then(data => { document.getElementById('mini-weather').textContent = `${Math.round(data.main.temp)}°`; document.getElementById('mini-location').textContent = data.name; });
또한, 브라우저를 새 탭에 열어두는 경우가 많기 때문에 페이지의 유용성을 높이기 위해 큰 시계를 추가했습니다.시계는 setInterval() 함수를 사용하여 현재 시간을 인식 가능한 오전/오후 형식으로 업데이트하여 레이아웃에 동적인 요소를 더합니다.
RSS 피드의 경우, MakeUseOf 피드를 자동으로 포함시키면서 사용자가 자유롭게 추가할 수 있도록 했습니다. RSS 피드를 파싱하는 함수를 만드는 것은 다소 어려웠지만, 코딩 어시스턴트의 도움으로 기사 정보를 추출하는 함수를 효율적으로 작성할 수 있었습니다.
const DEFAULT_FEEDS = ['https://www.makeuseof.com/feed/'];fetch(`https://api.allorigins.win/get?url=${encodeURIComponent(DEFAULT_FEEDS[0])}`).then(res => res.json()).then(data => parseRSS(data.contents));
이 설정은 클릭 가능한 헤드라인과 함께 썸네일, 저자 이름, 발췌문, 발행일을 표시합니다.콘텐츠 또는 CORS(Cross-Origin Resource Sharing) 장애로 인해 피드 로딩 문제가 발생할 경우, 대체 프록시를 통해 일관된 성능을 보장합니다.
마지막 구성 요소는 Chrome의 동기화 저장 기능을 활용하는 할 일 목록입니다.이를 통해 Google 계정에 연결된 모든 기기에서 할 일에 접근할 수 있습니다.이러한 간편함 덕분에 탐색 세션 간에도 할 일이 지속적으로 저장됩니다.
const storageSet = async (key, value) => { if (window.chrome?.storage?.sync) { return new Promise(res => chrome.storage.sync.set({ [key]: value }, res)); } localStorage.setItem(key, JSON.stringify(value));};
작업을 쉽게 추가할 수 있으며, 목록 형식으로 표시되고 자동으로 저장됩니다.완료된 작업을 삭제하거나 활성 작업과 완료된 작업 간에 전환하는 옵션도 제공됩니다.제 구조를 활용하려면 공식 GitHub 저장소에서 전체 코드와 지침을 확인하세요.
시각적 매력 강화
대시보드의 미적 감각이 중요합니다
기능성이 가장 중요하지만, 즐거운 사용자 경험을 위해서는 프레젠테이션도 필수적입니다.매력적인 홈페이지는 보기 좋은 색상뿐만 아니라 균형 잡힌 디자인도 갖춰야 합니다.저는 반응형 기능과 아이콘을 제공하는 Bootstrap을 활용하여 깔끔하고 매력적인 시각적 인터페이스를 만들었습니다.
특히 어두운 환경에서도 편안한 시청 경험을 제공하기 위해 어둡고 은은한 색상 팔레트를 선택했습니다. CSS를 통해 부드러운 수직 그라데이션과 흐릿한 비네트 효과를 적용하여 페이지 디자인에 깊이감과 대비를 더했습니다.
body { background-image: linear-gradient(180deg, #040607 0%, #071017 100%); color: #eef6f8; overflow: hidden;}.card { border-radius: 1rem; background: rgba(255, 255, 255, 0.1);}
최종 결과물은 Chrome의 원래 디자인과 완벽하게 조화를 이루는 세련되고 방해 없는 인터페이스입니다.익숙한 디자인을 유지하면서 과도한 리소스 사용을 최소화하는 것이 핵심입니다.
Chrome에 사용자 지정 홈페이지 추가
사용자 정의 확장 구현
코딩이 완료되면 다음 단계에 따라 사용자 지정 홈페이지를 Chrome 확장 프로그램으로 로드하세요.
- chrome://extensions 로 이동하여 오른쪽 상단 모서리에 있는 개발자 모드 토글을 활성화합니다.
- 압축 해제된 파일 로드 버튼을 선택하세요.
- 홈페이지 파일이 있는 폴더를 찾아 폴더 선택을 클릭하세요.
이제 맞춤 홈페이지를 Chrome 확장 프로그램으로 이용할 수 있습니다.확장 프로그램 폴더 내 파일을 수정하면 페이지를 새로 고침할 때 Chrome에 자동으로 반영됩니다.
코드에 필요한 권한에 따라 확장 프로그램은 처음 실행 시 또는 나중에 chrome://extensions 페이지를 통해 권한을 요청하는 메시지를 표시할 수 있습니다.이 확장 프로그램은 Edge, Brave, Opera, Vivaldi 등 다른 Chromium 기반 브라우저와도 별도의 설정 없이 호환됩니다.
브라우저의 모양을 새로 고치세요
귀하의 선호도에 맞춰 제작된 홈페이지
이제 새 탭을 열 때마다 날짜, 날씨, 뉴스 헤드라인, 진행 중인 작업에 대한 간략한 개요가 표시됩니다.이 모든 내용은 제가 직접 디자인한 레이아웃으로 표시되며, 방해 요소가 없습니다.
나만의 크롬 홈페이지를 만드는 것은 생각보다 훨씬 쉽습니다. HTML, CSS, JavaScript에 대한 기본적인 이해가 있다면, 이 프로젝트는 실용적인 도구를 제작하는 동시에 실력을 향상하는 데 매우 유용합니다.초보자에게도 탄탄한 시작점을 제공합니다.
HTML, CSS, JavaScript 몇 줄만 추가하고 약간의 노력만 더하면 여러 개의 번거로운 확장 프로그램을 쉽게 대체하여 일상 활동에 완벽하게 맞는 솔루션을 제공할 수 있습니다.매일 브라우저에서 보내는 시간을 고려하면, 몇 시간만 더 투자하여 나만의 브라우저를 만드는 것은 분명 가치 있는 일입니다.
답글 남기기