Personal Dashboard
본문
개요
이직 준비 기간의 할 일과 일정을 기록하려고 만들기 시작해, 포트폴리오 페이지와 하나로 합친 개인 대시보드입니다. 칸반 보드, 캘린더, 지식 아카이브를 한 앱에 통합했습니다.
AI와 협업해 프레임워크 없이 HTML·CSS·JavaScript 기반의 SPA 구조를 만들었습니다. 제안받은 구현 방식을 비교해 필요한 구조를 선택하고, 라우팅과 상태 유지가 의도대로 동작하는지 직접 검증했습니다.
구현
- 외부 프레임워크 없이 location.hash와 hashchange만으로 페이지 전환 구현
- 글라스모피즘 UI를 기반으로 시각적 완성도와 실용성을 함께 고려
- 다크모드 상태를 별도 페이지까지 유지되도록 처리
- 문제 정의·판단·AI 협업·검증·확장 과정을 SVG 로드맵으로 구성하고, 각 단계를 선택하면 상세 경험을 확인할 수 있도록 구현
트러블슈팅
글라스 요소가 겹칠 때 렌더링이 깨짐
여러 글라스 요소가 겹치는 지점에서 크롬 컴포지터 레이어가 충돌했습니다. GPU 레이어를 명시적으로 분리해 해결했습니다.
다크모드에서 버튼 텍스트가 사라짐
backdrop-filter가 적용된 부모 안에서 z-index 스태킹 컨텍스트가 충돌해, 호버 시 텍스트가 보이지 않았습니다. isolation 속성으로 새 스태킹 컨텍스트를 만들어 해결했습니다.
툴팁이 컨테이너 밖으로 나가지 못함
overflow: hidden 컨테이너 안에 갇힌 툴팁이 잘렸습니다. 좌표를 직접 계산해 position: fixed로 렌더링하도록 바꿔 해결했습니다.