다크 그리드 배경

다음

다크 그리드 배경은 거의 검은 바탕에 밝고 대비가 낮은 선을 그린 것입니다. 다크 모드 섹션, 게임과 개발자용 인터페이스, 프레젠테이션 슬라이드에 어울립니다. 아래에서 색을 고르고 SVG를 복사하세요.

다크 그리드 만들기

  1. 1

    배경부터 설정하기

    두 번째 단계의 배경 선택기에서 #0b0f19처럼 거의 검은 색을 고르세요.

  2. 2

    은은한 선 색 고르기

    선 색을 어두운 회청색, 예를 들어 #1f2937로 설정하세요.

  3. 3

    캔버스와 셀 크기 정하기

    와이드스크린 슬라이드에 맞게 960 x 540을 입력하고 그리드 크기를 30으로 설정하세요.

  4. 4

    선을 얇게 유지하기

    선 두께를 1로 설정한 뒤, 마지막 단계에서 SVG를 복사하세요.

핵심은 대비

어두운 바탕에서는 너무 밝은 선이 새장처럼 보입니다. 그리드는 눈에 보이기보다 느껴져야 합니다. 바탕보다 몇 단계만 밝은 선으로 시작하고, 화면에서 사라져 보이면 조금씩 밝게 올리세요.

스타일 배경 선 색 셀 크기
은은한 다크 모드 #0b0f19 #1f2937 30
슬레이트 패널 #0f172a #334155 40
레트로 터미널 #000000 #22c55e 16

레트로 터미널 행은 일부러 강하게 잡았습니다. 순수한 검은 바탕에 밝은 초록은 게임이나 해커 느낌에는 좋지만, 긴 본문을 두기에는 적합하지 않습니다.

슬라이드 크기 예시

16:9 슬라이드를 960 x 540px에 30px 셀로 만들면 32개 열과 18개 행, 총 576개 셀이 됩니다. 두 치수 모두 30으로 나누어떨어지므로 잘린 사각형이 생기지 않습니다. 1920 x 1080px에 60px 셀을 쓰면 같은 32 x 18 배치를 두 배 크기로 얻을 수 있습니다.

어두운 배경에서의 주의점

선 두께가 소수일 때 일부 디스플레이에서 얇은 선이 어른거릴 수 있습니다. 선 두께 1이 보통 가장 안정적입니다. 페이지가 라이트 모드와 다크 모드를 전환한다면, 이 도구는 고정된 색 한 쌍만 만들므로 각각의 SVG를 따로 생성해서 자체 코드에서 바꿔 쓰세요.

사용 방법

SVG를 콘텐츠 뒤에 붙이거나 파일로 저장하세요. 배경 색이 SVG의 일부이므로, 그 위에 놓이는 컨테이너는 자체 색을 갖거나 투명해야 합니다. 이 생성기는 각 셀의 위쪽과 왼쪽 가장자리만 그리므로, 캔버스의 오른쪽과 아래쪽 가장자리에는 닫히는 선이 없습니다.

페이지의 나머지와 맞추기

거의 검은 바탕과 충분한 대비를 이루는 글자 색을 고르세요. 순백은 어두운 방에서 눈부실 수 있으므로 오프화이트가 낫습니다. 그리드 위의 테두리, 카드, 버튼은 선과 같은 회청색 계열을 써서, 그리드가 별도의 질감이 아니라 같은 팔레트의 일부처럼 느껴지게 하세요.

자주 묻는 질문

배경 #0b0f19에 선 #1f2937이면 차분한 출발점이 됩니다. 선이 잘 안 보이면 조금 더 밝게 만드세요.

이 도구로는 불가능합니다. 색이 고정된 SVG 하나를 만듭니다. 라이트 버전과 다크 버전을 각각 만들어, 자체 페이지 코드에서 전환하세요.

아니요. 결과물은 선 색이 하나인 균일한 그리드입니다. 페이드 같은 효과는 편집기나 스타일시트에서 별도의 레이어가 필요합니다.

선 색이 배경과 너무 가깝습니다. 밝기를 조금 올리거나, 선 두께를 1에서 1.5로 늘려 보세요.

관련 도구

이 도구는 다른 언어로도 제공됩니다

사용 가이드와 활용 사례