프론트엔드 백룸즈 (CSS) 구현 기법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
프론트엔드 개발자, 특히 CSS 및 SASS 기술을 활용한 웹 개발자. 중급 수준의 기술 이해가 필요하며, 크로스브라우저 호환성과 성능 최적화에 관심 있는 개발자에게 유용.
핵심 요약
- SASS의
@extend
기능을 활용해 CSS 코드의 중복을 제거하고, 성능 최적화를 달성함. - Safari 호환성을 위해 그리드 크기와 카메라 위치 계산 방식을 조정하여 렌더링 문제를 해결함.
- 3x3rem 크기의 방 단위로 매핑하여 메모리 사용량을 줄이고, 4x12 그리드로 경로를 축소하여 안정성 향상.
섹션별 세부 요약
1. 초기 3D 미로 설계
- 7x7 그리드에서 12x12 그리드로 확장하고, 벽지와 천장 추가로 실감 나는 환경 구현.
- 원본 4Chan 게시물의 카메라 각도와 일치시켜 렌더링 테스트 수행.
- Safari 호환성 문제로 인해 12x12 그리드의 높은 픽셀 수가 원인으로 판단.
2. Safari 호환성 개선
- 방 크기를 3x3rem으로 축소하여 메모리 사용량 최적화.
- 경로를 4x12 그리드로 축소하여 렌더링 성공.
- 카메라 위치 계산을 위한 수학적 공식 개발 (12x12 → 4x12로 경로 축소).
3. SASS 최적화 기법
$east
변수에 좌표 배치 정보 저장 후@each
루프를 사용해 반복 처리.@extend
기능으로 CSS 규칙의 중복 제거:
```scss
%wood { transform: translate3d(2.97rem, .5rem, 5.5rem); }
z floor tile:nth-of-type(1) span:before, ... { @extend %wood; }
```
- 최적화 전후의 코드량 비교:
@extend
사용 시 3배 이상의 코드 공간 절약.
4. 추가 기능 및 최종 구현
- 2층 추가 및 벽장식 배치로 환경 완성.
- 스토리 라인 구축 및 스크린샷 이벤트 추가.
- 오디오 재생을 위해 최소한의 JavaScript 사용 (CSS만으로는 불가능).
결론
@extend
기능을 활용한 SASS 최적화는 성능 향상에 효과적.- Safari 호환성을 위해 그리드 크기와 카메라 위치 계산 방식을 조정해야 함.
- 오디오 재생은 CSS만으로 불가능하므로, 최소한의 JavaScript 사용이 필수적임.