부록 3. 웹 보조 도구: 눈누·Bulma·Coolors

관련 차시: 6차시 Pages 배포 · 7차시 Markdown과 Mermaid

눈누, Bulma, Coolors는 핵심 Git 흐름이 아닌 선택 참고 도구입니다. 포트폴리오의 글꼴, 버튼, 색상을 다듬고 싶을 때 시간이 남으면 하나만 골라 적용합니다. 세 도구를 모두 설치하거나 한 번에 바꾸지 않습니다.

왜 필요한가

Git과 배포를 익히는 것이 먼저입니다. 다만 같은 HTML/CSS라도 글꼴과 색상, 여백이 정리되면 결과물을 읽기 쉬워집니다. 보조 도구는 이때 작은 변경을 돕는 역할입니다. 도구마다 라이선스와 적용 범위가 다르므로, 디자인을 바꾸기 전에 출처와 사용 조건을 확인합니다.

핵심 개념

도구	쓰는 곳	확인할 점
눈누	무료·오픈 웹폰트 모음	폰트마다 상업적 이용 가능 범위와 허용 조건이 다름. 개별 폰트의 라이선스를 먼저 확인
Bulma	클래스 이름으로 버튼, 카드, 레이아웃을 만드는 경량 CSS 프레임워크	공식 문서의 설치 방법과 라이선스 확인. 필요한 클래스만 사용
Coolors	조화로운 색상 조합을 추천하는 팔레트 도구	색상 코드를 그대로 쓰기 전에 명암 대비와 접근성 확인

• 눈누: noonnu.cc
• Bulma: bulma.io
• Coolors: coolors.co

따라하기

1. 핵심 실습을 먼저 완료합니다.
2. 도구 하나만 선택해 적용합니다.
3. 라이선스와 출처를 확인합니다.
4. 작은 변경으로 커밋하고 Pages에서 확인합니다.

적용 예시

색상은 style.css의 변수로 모아 두면 나중에 바꾸기 쉽습니다.

:root {
  --page-bg: #f7f7f7;
  --page-text: #222222;
  --card-bg: #ffffff;
}

body {
  background: var(--page-bg);
  color: var(--page-text);
}

main {
  background: var(--card-bg);
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem;
}

Bulma는 필요한 클래스만 붙여 봅니다. 설치와 최신 사용법은 공식 문서를 따릅니다.

<a class="button is-primary" href="index.html">홈으로</a>

폰트는 눈누에서 고른 폰트의 라이선스를 확인한 뒤 font-family에 적용합니다. 기본 글꼴을 함께 적어 두면 웹폰트가 로드되지 않아도 읽을 수 있습니다.

body {
  font-family: "적용할 폰트", sans-serif;
}

확인법

• 선택한 도구의 라이선스와 출처를 확인했다.
• 한 번에 하나의 도구만 적용했다.
• 브라우저에서 글자와 버튼이 읽기 쉽다.
• git diff로 변경 범위를 확인했다.
• 커밋과 push 후 Pages 주소에서도 같은 결과가 보인다.

주의

• 눈누 폰트를 모두 같은 라이선스로 가정하지 않습니다. 폰트별로 확인합니다.
• Bulma를 쓰지 않아도 괜찮습니다. 필요한 경우에만 최소 클래스를 적용합니다.
• Coolors 색상은 예쁜 것만 고르지 말고 글자 대비를 확인합니다.
• 외부 폰트나 라이브러리가 많아지면 페이지가 느려질 수 있습니다.
• 비밀번호, 토큰, 개인정보를 예시 코드나 스크린샷에 넣지 않습니다.