index

웹사이트 디자인, '이것' 하나로 퀄리티가 달라집니다: 고윤서의 크리에이티브 코딩 팁

💡 고윤서만의 웹 디자인 & 코딩 핵심 팁

1. SVG 파일, 퀄리티를 유지하며 다루는 노하우

Figma에서 내보낸 SVG 파일, 그대로 쓰면 오히려 이미지 로딩 속도만 느려지고 예상치 못한 깨짐 현상이 발생할 수 있어요.

  • 아이디어: SVG 파일을 Illustrator에서 열어 compound path 기능을 활용해 보세요. 복잡한 SVG 코드를 훨씬 깔끔하게 정리할 수 있습니다.
  • 꿀팁: id, xmlns, xmlns:xlink 같은 불필요한 속성은 제거하고, fill 속성만 남겨 inline style로 적용하면 코드도 간결해지고 나중에 CSS로 관리하기도 편리합니다.

2. ‘스크롤 시 움직이는 요소’ 구분하는 CSS 기준

Figma를 보면 어떤 요소는 스크롤해도 그대로 있고, 어떤 요소는 스크롤에 따라 움직이죠. 이 차이는 바로 CSS의 position 속성에서 옵니다.

  • 핵심: 스크롤 시에도 고정되어야 하는 로고나 메뉴는 position: fixed로, 스크롤에 따라 함께 움직이는 콘텐츠는 position: static (기본값)으로 두는 것이 일반적이에요. Figma 레이아웃을 보면서 ‘이건 절대 안 움직여!’ 싶은 요소는 fixed를 염두에 두고 마크업하면 좋습니다.
  • 팁: position: relative를 먼저 적용해야 top, left, z-index 같은 속성을 제대로 쓸 수 있다는 점, 잊지 마세요.

3. 폰트 로딩, 웹사이트 속도와 가독성을 모두 잡는 방법

Figma에서 사용한 폰트를 웹에 그대로 적용하는 건 당연하지만, 로딩 속도까지 고려해야 진짜 실력입니다.

  • 꿀팁: Google Fonts나 Adobe Fonts처럼 CDN으로 폰트를 불러오거나, 자주 쓰는 폰트는 font-face로 직접 woff, woff2 포맷으로 최적화해서 public/font 폴더 안에 함께 관리하세요.
  • 실전: font.css 파일에 font-face 설정을 한 번 해두면, 다른 프로젝트에서도 해당 폴더만 복사해서 사용하면 되니 시간 절약은 물론 일관된 폰트 사용이 가능해집니다. HTML <head> 태그에 font.css 링크하는 것 잊지 마시고요!

👉 고윤서의 인터랙티브 웹사이트 제작 노하우 더 알아보기

🛠️ 실무 퀄리티를 결정짓는 핵심 스킬 & 디테일

강의 이미지 2
강의 이미지 2

1. SCULPT 로고, 360도 회전 애니메이션 심플하게 구현하기

Figma에서 SCULPT 각 알파벳이 기둥을 중심으로 360도 회전하는 애니메이션, 어떻게 구현할까요?

  • 방법:
    1. 각 알파벳 SVG를 asset 폴더에 따로 저장하고, div 태그로 감싸주세요.
    2. panel-holder라는 div로 이 div들을 묶고, 그 안에 panel-pillar라는 div로 배경 기둥을 배치합니다.
    3. 각 알파벳 div에 transform: rotate(360deg) 애니메이션을 적용할 준비를 하세요. CSS animation 속성을 활용하면 훨씬 깔끔하게 구현됩니다.

2. 스크롤 시 이미지가 위로 올라오는 효과, grid와 position의 조화

Figma에서 스크롤할 때 이미지들이 부드럽게 올라오는 효과, 어렵지 않아요.

  • 핵심:
    1. 이미지들을 grid 레이아웃으로 배치하되, 각 이미지를 감싸는 div에 position: relative를 적용합니다.
    2. 스크롤 시 올라올 이미지는 position: absolute를 주고 bottom: 0과 같은 속성으로 처음 위치를 잡아준 뒤, JavaScript 이벤트 리스너를 통해 스크롤 값에 따라 transform: translateY() 값을 조절해주면 됩니다.
    3. 모바일 환경에서는 grid 레이아웃을 flex-direction: column으로 변경하여 세로로 쌓이는 효과를 주면 완벽하죠.

3. Firebase 호스팅: 내 웹사이트, 이제 전 세계에 공개하세요!

만든 웹사이트를 남들에게 보여주고 싶을 때, Firebase 호스팅만큼 좋은 게 없죠.

  • 단계별 가이드:
    1. Node.js 설치: Firebase CLI 사용을 위해 필수입니다.
    2. Firebase CLI 설치: 터미널에서 npm install -g firebase-tools 명령어로 설치하고, firebase login으로 계정을 연동하세요.
    3. 프로젝트 생성: Firebase 콘솔에서 새 프로젝트를 만들고, 웹 앱으로 설정하세요. 프로젝트 이름은 나중에 도메인에도 영향을 주니 신중하게 결정하는 것이 좋습니다.
    4. 프로젝트 초기화: 터미널에서 firebase init 명령어를 실행하고, 호스팅 관련 설정을 진행하세요. public 폴더를 웹사이트의 루트 디렉토리로 지정하는 것이 일반적입니다.
    5. 배포: firebase deploy 명령어로 웹사이트를 배포하고, 제공된 URL로 접속해보세요.

💬 자주 묻는 질문 (FAQ)

Q. Figma 디자인과 웹사이트 결과물이 조금씩 다른데, 어떻게 하면 완벽하게 맞출 수 있나요?

그래픽디자이너 고윤서는 Figma 디자인을 코드로 완벽하게 구현하기 위해 SVG 파일을 Illustrator에서 compound path로 정리하고, inline style로 적용하는 것을 추천합니다. 또한, 스크롤 시 움직이는 요소와 고정되는 요소를 구분하여 position 속성을 적절히 사용하는 것이 중요하다고 강조합니다.

Q. 웹사이트에 폰트를 적용할 때, 로딩 속도와 퀄리티 모두 잡는 방법이 있나요?

네, 그래픽디자이너 고윤서는 폰트 관리에 있어 CDN을 활용하거나, font-face로 woff, woff2 포맷의 폰트 파일을 직접 관리하는 것을 추천합니다. public/font 폴더에 폰트 파일과 font.css를 함께 저장해두면 여러 프로젝트에서 재활용하기 용이하며, HTML <head> 태그에 font.css를 링크하는 것으로 폰트 적용을 완료할 수 있습니다.

Q. Firebase 호스팅을 사용하려면 추가 비용이 발생하나요?

그래픽디자이너 고윤서에 따르면, Firebase는 무료 요금제를 제공하며, 추가 비용은 사용량이 무료 요금제 범위를 초과했을 때 발생합니다. 결제 카드를 연결하기 전까지는 절대 비용이 청구되지 않으니 안심하고 웹 프로젝트를 시작할 수 있습니다.

👉 더 깊이 있는 과정을 원한다면?