다아아아 기록

[WSL 2 설치]Linux용 Windows 하위 시스템 요청한 작업을 수행하려면 권한 상승이 필요합니다.

다아아아 — Wed, 17 Jun 2026 15:29:53 +0900

docker를 이용하여 Spring Boot 기반의 웹사이트를 제작하고 있다.

이전 글에서는 Windows 환경에서 Docker와 Spring Boot 개발 환경을 구성하기 위한 전체 흐름을 정리했다.

https://all-kim.tistory.com/1

[Windows+Docker+Spring Boot+VScode] Window에서 Docker를 이용한 Spring Boot 환경 세팅_(1)

Docker를 이용하여 Spring Boot 기반의 웹사이트 제작을 진행하려고 한다. 프로젝트를 시작하기 전에 먼저 개발 환경 세팅이 필요하다. 일반적으로는 Spring Boot 프로젝트를 먼저 생성한 후 Docker를 연

all-kim.tistory.com

이번 글에서는 WSL 2 설치 과정에서 발생한 오류와

이를 수동 설치 방식으로 해결한 과정을 기록하려고 한다.

WSL 2 설치 중 발생한 오류

WSL 2 설치를 진행하기 위해 PowerShell을 관리자 권한으로 실행한 후 아래 명령어를 입력했다.

wsl --install

일반적으로 해당 명령어를 실행하면 WSL 기능이 활성화되고, 기본 Linux 배포판인 Ubuntu 설치까지 함께 진행된다.

하지만 내 PC에서는 아래와 같은 오류가 발생하면서 설치가 더 이상 진행되지 않았다.

설치 중: Linux용 Windows 하위 시스템
액세스가 거부되었습니다.

처음에는 WSL 관련 구성 요소가 최신 상태가 아니어서 발생한 문제라고 생각했다. 그래서 아래 명령어를 통해 WSL 업데이트를 시도했다.

wsl --update

그러나 업데이트 역시 정상적으로 진행되지 않았다.

Linux용 Windows 하위 시스템 요청한 작업을 수행하려면 권한 상승이 필요합니다.

PowerShell을 관리자 권한으로 실행했음에도 권한 상승이 필요하다는 메시지가 출력되었다.

이 오류가 발생했을 때는 관리자 권한 확인, Windows 기능 활성화 여부 확인, Microsoft Store를 통한 Ubuntu 설치 등 여러 가지 해결 방법을 시도해볼 수 있지만 이번 프로젝트는 강의실 PC에서 진행하고 있었기 때문에 시간을 아끼기 위해 WSL 2를 수동으로 설치하는 방식으로 진행했다.

WSL 2 수동 설치

아래 사이트로 이동하여 'wsl_update_x64.msi'을 다운로드하여 설치한다.

https://learn.microsoft.com/ko-kr/windows/wsl/install-manual

이전 버전의 WSL에 대한 수동 설치 단계

wsl install 명령을 사용하는 대신 이전 버전의 Windows에 WSL을 수동으로 설치하는 단계별 지침입니다.

learn.microsoft.com

해당 페이지에서 Linux 커널 업데이트 패키지 항목을 찾은 뒤 wsl_update_x64.msi 파일을 다운로드한다.

다운로드가 완료되면 wsl_update_x64.msi 파일을 실행하여 설치를 진행한다.

설치 과정은 일반적인 Windows 설치 프로그램과 동일하게 진행되며 별도의 복잡한 설정 없이 안내에 따라 설치하면 된다.

설치가 완료되면 WSL 2를 사용할 준비가 된다.

이번 경우에는 오류의 정확한 원인을 해결하는 것보다 프로젝트 환경을 빠르게 구성하는 것이 우선이었기 때문에 수동 설치 방식을 선택했지만

추후 같은 오류가 발생하는 상황이 온다면 다른 방법으로 해결하는 방법에 대해 글을 작성하도록 하겠다.

[WSL 2 설치] Linux용 Windows 하위 시스템 액세스가 거부되었습니다.

다아아아 — Wed, 17 Jun 2026 14:40:41 +0900

Docker를 이용하여 Spring Boot 기반의 웹사이트 제작하고 있다.

이전 글에서는 Windows 환경에서 Docker와 Spring Boot 개발 환경을 구성하기 위한 전체 흐름을 정리했다.

https://all-kim.tistory.com/1

[Windows+Docker+Spring Boot+VScode] Window에서 Docker를 이용한 Spring Boot 환경 세팅_(1)

all-kim.tistory.com

이번 글에서는 WSL 2 설치 과정에서 발생한 오류와

이를 수동 설치 방식으로 해결한 과정을 기록하려고 한다.

WSL 2 설치 중 발생한 오류

WSL 2 설치를 진행하기 위해 PowerShell을 관리자 권한으로 실행한 후 아래 명령어를 입력했다.

wsl --install

일반적으로 이 명령어를 실행하면 Windows에서 WSL 기능이 활성화되고

기본 Linux 배포판인 Ubuntu 설치까지 함께 진행된다.

하지만 내 PC에서는 아래와 같은 오류 메시지가 출력되면서 설치가 더 이상 진행되지 않았다.

설치 중: Linux용 Windows 하위 시스템 액세스가 거부되었습니다.

라며 진행이 되지 않았다.

사실 이럴경우 경우 관리자 권한 확인, Windows 기능 활성화 여부 확인, WSL 업데이트 등 여러 가지 해결 방법을 시도해볼 수 있다.

하지만 이번 프로젝트는 강의실 PC에서 진행하고 있었고

권한 설정이나 Windows 환경을 깊게 수정하는 방식보다는 시간을 아끼기 위해 WSL 2를 수동으로 설치하는 방식으로 진행했다.

WSL 2 수동 설치

아래 사이트로 이동하여 'wsl_update_x64.msi'을 다운로드하여 설치한다.

https://learn.microsoft.com/ko-kr/windows/wsl/install-manual

이전 버전의 WSL에 대한 수동 설치 단계

wsl install 명령을 사용하는 대신 이전 버전의 Windows에 WSL을 수동으로 설치하는 단계별 지침입니다.

learn.microsoft.com

해당 페이지에서 Linux 커널 업데이트 패키지 항목을 찾은 뒤 wsl_update_x64.msi 파일을 다운로드한다.

다운로드가 완료되면 wsl_update_x64.msi 파일을 실행하여 설치를 진행한다.

설치 과정은 일반적인 Windows 설치 프로그램과 동일하게 진행되며 별도의 복잡한 설정 없이 안내에 따라 설치하면 된다.

설치가 완료되면 WSL 2를 사용할 준비가 된다.

이번 경우에는 오류의 정확한 원인을 해결하는 것보다 프로젝트 환경을 빠르게 구성하는 것이 우선이었기 때문에 수동 설치 방식을 선택했지만

추후 같은 오류가 발생하는 상황이 온다면 다른 방법으로 해결하는 방법에 대해 글을 작성하도록 하겠다.

[티스토리 스킨] 티스토리 스킨 무료 공유 (apple 디자인.md)

다아아아 — Wed, 17 Jun 2026 13:51:48 +0900

이전에 티스토리 스킨 제작 과정을 블로그에 작성했었다.

티스토리에서 기본 제공하는 Odyssey 스킨을 기반으로 ChatGPT와 getdesign.md를 활용하여 Apple 스타일 느낌으로 수정한 스킨이다.

이전 제작 과정이 궁금하다면 아래 글을 참고하면 된다.

https://all-kim.tistory.com/2

[티스토리 스킨 제작] Chat GPT와 티스토리 스킨 제작 + 적용하기

티스토리를 아주 예전에 하다가 잊어버리고 살았다.최근에 다시 블로그를 만들게 되었는데, 스킨 적용하는 법부터 까먹었다... 만들어진 스킨을 적용해보니 내 마음에 살짝 안 들어서 내가(Chat G

all-kim.tistory.com

해당 글에서는 스킨을 제작하는 과정을 설명했는데

이번 글에서는 실제로 스킨을 다운로드하고 적용하는 방법을 간단하게 정리해보려고 한다.

또한 스킨을 적용한 후 마음에 들지 않는 부분이나 추가로 수정하고 싶은 부분이 있다면 이전 글을 참고하여 직접 수정해서 사용할 수도 있다.

1. 스킨 다운로드

먼저 GitHub 저장소에서 스킨을 다운로드한다.

https://github.com/itskimdaah/tistory-skin-modern-blog

GitHub - itskimdaah/tistory-skin-modern-blog: Modern and responsive Tistory skin with clean UI and mobile optimization.

Modern and responsive Tistory skin with clean UI and mobile optimization. - itskimdaah/tistory-skin-modern-blog

github.com

다운로드 방법은 우측 상단의 Code → Download ZIP 버튼을 이용하면 된다.

2. 티스토리에 스킨 등록

스킨 다운로드가 완료되었다면 티스토리 관리자 페이지로 이동한다.

블로그 관리 → 꾸미기 → 스킨 변경 → 스킨 등록 메뉴로 이동한다.

3. 스킨 파일 업로드

스킨 등록 화면에서 추가 버튼을 클릭한다.

다운로드한 스킨 파일들을 모두 등록한 뒤 저장한다.

(파일이 누락되면 정상적으로 동작하지 않을 수 있으니 전체 파일을 업로드하는 것을 권장한다.)

4. 스킨 적용

저장한 스킨을 적용한다.

5. 배너 이미지 설정

스킨 적용 후 스킨 편집 메뉴로 이동한다.

배너 이미지 항목에서 원하는 이미지를 등록한 뒤 적용 버튼을 클릭한다.

적용이 완료되면 블로그를 새로고침하여 변경된 스킨을 확인할 수 있다.

현재 GitHub에 등록된 파일에는 배너 이미지는 포함되어 있지 않다.

사진 요청이 있다면 제공할 수 있도록 하겠다.

[Highcharts] 하이차트 Ctrl+C, Ctrl+V로 문서에 복사 붙여넣기_(2)

다아아아 — Wed, 17 Jun 2026 11:14:33 +0900

글이 길어서 그런가 한번에 글을 작성했더니

로드되는데 문제가 있어 글을 2개로 나눠 작성한다.

블로그에 다시 정리하기 위해 테스트를 진행했고 수정한 코드는 아래와 같다.

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Highcharts Ctrl+C Clipboard Demo</title>


	<script src="https://unpkg.com/highcharts/highcharts.js"></script>
	<script src="https://unpkg.com/highcharts/modules/exporting.js"></script>
	<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

	<style>
		body {
			font-family: Arial, sans-serif;
			margin: 20px;
		}

		.chartContainer {
			border: 2px solid transparent;
			border-radius: 8px;
			padding: 10px;
		}

		.chartContainer.selected {
			border-color: #bdbdbd;
		}

		.controls {
			text-align: center;
			margin-top: 15px;
		}
	</style>
</head>

<body>

	<h2>Highcharts 12.x Ctrl+C 이미지 복사</h2>
	<p>차트를 클릭한 뒤 Ctrl+C를 누르면 PNG 이미지가 클립보드에 복사됩니다.</p>

	<div id="container" class="chartContainer"></div>

	<div class="controls">
		<select id="ChType">
			<option value="column">column</option>
			<option value="pie">pie</option>
			<option value="line">line</option>
		</select>
	</div>

	<script>
		const albumName = [
			'2Cool4School', 'O!RUL8,2', 'School Love Affair', 'Dark&Wild',
			'화양연화 pt.1', '화양연화 pt.2', 'Young Forever',
			'WINGS', 'WINGS 외전', 'Love Yourself'
		];

		const albumNum = [
			101637, 118170, 191444, 199090,
			353063, 432740, 440367,
			827947, 749954, 1376915
		];

		let chart;
		let selected = false;

		function createChart(type) {

			const seriesData = type === 'pie'
				? albumName.map((name, i) => ({
					name: name,
					y: albumNum[i]
				}))
				: albumNum;

			chart = Highcharts.chart('container', {
				chart: {
					type: type
				},

				title: {
					text: 'BTS Album Sale Rate'
				},

				subtitle: {
					text: 'Ctrl+C → PNG Clipboard Copy'
				},

				credits: {
					text: 'MTFIS'
				},

				xAxis: {
					categories: albumName
				},

				yAxis: {
					title: {
						text: '앨범 판매량'
					}
				},

				exporting: {
					enabled: true,
					local: true,
					fallbackToExportServer: false
				},

				series: [{
					name: 'Sale Rate',
					data: seriesData
				}]
			});
		}

		async function copyChartToClipboard() {

			try {

				const svg = chart.getSVG();

				const svgBlob = new Blob(
					[svg],
					{ type: 'image/svg+xml;charset=utf-8' }
				);

				const url = URL.createObjectURL(svgBlob);

				const img = new Image();

				img.onload = async function () {

					const canvas = document.createElement('canvas');

					canvas.width = img.width;
					canvas.height = img.height;

					const ctx = canvas.getContext('2d');

					ctx.drawImage(img, 0, 0);

					canvas.toBlob(async function (blob) {

						await navigator.clipboard.write([
							new ClipboardItem({
								'image/png': blob
							})
						]);

						alert('차트가 클립보드에 복사되었습니다.');

					}, 'image/png');

					URL.revokeObjectURL(url);
				};

				img.src = url;

			} catch (err) {

				console.error(err);
				alert('복사 실패: 브라우저가 이미지 클립보드를 지원하는지 확인하세요.');
			}
		}

		document.getElementById('container').addEventListener('click', function () {

			selected = true;
			this.classList.add('selected');
		});

		document.addEventListener('keydown', function (e) {

			if (selected && e.ctrlKey && e.key.toLowerCase() === 'c') {

				e.preventDefault();
				copyChartToClipboard();
			}
		});

		document.getElementById('ChType').addEventListener('change', function () {

			createChart(this.value);

			document.getElementById('container')
				.classList.remove('selected');

			selected = false;
		});

		createChart('column');
	</script>

</body>

동작은 다음과 같다.

차트 생성 → 차트 클릭 → Ctrl + C → 차트 SVG 추출 → Canvas에 그림 → PNG 변환 → 클립보드 저장 → Ctrl+V

지금 보면 간단한 기능이지만 개발 초창기 시절의 삽질 기록을 남긴다는 의미로 정리해본다.

개인적으로 개발 블로그에서 가장 싫어하는 것 중 하나가 예제 코드는 있는데 복사는 막아놓은 글이기 때문에
내 블로그에 올라오는 모든 예제 코드는 복사가 가능하도록 작성하고 있다.
그래도 혹시 HTML 예제 파일 자체가 필요하다는 댓글이 있다면 수정 후 파일도 함께 첨부하도록 하겠다.

[Highcharts] 하이차트 Ctrl+C, Ctrl+V로 문서에 복사 붙여넣기_(1)

다아아아 — Wed, 17 Jun 2026 11:03:47 +0900

옛날 옛적 Chat GPT가 없던 시절...

첫 회사 생활을 시작한 나는 입사와 동시에 웹사이트 프로젝트에 투입되었다.

프로젝트는 웹사이트에서 차트를 이용해 각종 정보를 보여주는 시스템이였다.

여러 차트 라이브러리 중 하이차트를 사용하기로( = 사용하라고) 하였다.

프로젝트가 마무리되어 가던 어느 날.

웹에서 Ctrl+C로 차트를 복사한 뒤 한글, 워드, 엑셀 같은 문서에 Ctrl+V로 붙여넣기 할 수 있게 해달라는 요구사항이 있었다.

지금이야 GPT에게 만들어줘 한마디 하면 샘플 코드가 몇 초 만에 나오겠지만

그 당시 개발자 3개월 아주 초보 개발자 + 웹 처음으로 당황했건 기억이있다.

폭풍 구글링을 통해 만들었던...

예전에 한 번 블로그에 정리했던 내용인데

오랜만에 다시 보니 추억도 떠오르고 지금 기준으로는 꽤 간단한 기능이라 다시 기록해 보기로 했다.

요즘은 라이브러리도 많고 브라우저 API도 좋아져서 더 쉽고 깔끔한 방법이 있을 것이다.

동작하는 순서는 이렇다.

웹에서 하이차트를 클릭 → Ctrl+C → 문서(한글, 워드, 엑셀 등)에서 Ctrl+V로 붙여넣기

예전 소스는 이렇다.

<head>
	<title>Copy Highcharts to Clipboard Test</title>

	<!--차트 구역 경계선 스타일 지정-->
	<style>
		.chartContainer {
			border-color: rgba(0, 0, 0, .0);
			border-style: solid;
			border-width: 2px;
			border-radius: 2px;
		}
	</style>
	<!-- highchart 사용을 위한 CDN-->
	<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
	<script src="https://unpkg.com/highcharts/highcharts.js"></script>
	<script src="https://unpkg.com/highcharts/modules/exporting.js"></script>

</head>

<body id="body">
	<!-- 차트 들어가는 div구역 -->
	<div class="chartContainer" id="container"></div>
	<!-- 셀렉트 박스 들어가는 구역 -->
	<div style="text-align : center ">
		<select id="ChType">
			<option value="column">column</option>
			<option value="pie"> pie</option>
			<option value="line">line</option>
		</select>
	</div>
	<!-- 차트에서 추출한 이미지 들어가는 구역. 높이 1px, 투명도 .0으로 설정하여 숨김 -->
	<div id="imgContainer" class="copyable" style="height:1px; opacity: 0.0;"></div>
</body>

<script>

	//X축에 들어갈 배열
	var albumName = ['2Cool4School', 'O!RUL8,2', 'School Love Affair', 'Dark&Wild', '화양연화 pt.1',
		'화양연화 pt.2', '화양연화 Young Forever', 'WINGS', 'WINGS 외전', 'LoveYourslef'];
	//시리즈 데이터에들어갈 배열
	var albumNum = [101637, 118170, 191444, 199090, 353063, 432740, 440367, 827947, 749954, 1376915];
	//셀렉트의 첫번째 옵션값으로 차트의 초기 타입 설정
	var newType = ChType.options[0].value;
	//차트 생성 함수 호출
	chartCreate();

	//차트구역에 클릭이벤트 발생 시 경계선 스타일변경과 복사를 수행
	$(".chartContainer").click(function (e) {
		//차트 구역에 클릭이벤트 발생 시 경계선 표시
		$('.chartContainer').css('border-color', '#BDBDBD');
		//전체 body에 키 이벤트 발생 시 수행
		document.getElementById("body").onkeydown = function () {
			//발생한 키 이벤트가 ctrl+c일 경우 
			if ((event.keyCode == 67) && (event.ctrlKey == true)) {
				//다시 경계선을 숨김
				$('.chartContainer').css('border-color', 'rgba(0, 0, 0, .0)');
				//셀렉션 객체 생성
				var selection = window.getSelection();
				//레인지 객체 생성
				var range = document.createRange();
				//레인지가 copyable 노드를 포함
				range.selectNodeContents($(".copyable").get(0));
				//레인지를 삭제
				selection.removeAllRanges();
				//셀렉션에 레인지를 넣어줌
				selection.addRange(range);
				//클립보드에 현재 내용을 복사
				document.execCommand('copy');
				//셀렉션에서 모든 레인지를 삭제
				window.getSelection().removeAllRanges();
			}
		}
	});

	//셀렉트 박스 변경시 수행하는 함수
	$('#ChType').change(function () {
		//changeType함수에 인자로넘겨줄 series에 시리즈를 넣어준다.
		var series = chart.series[0];
		//셀렉트 박스에서 선택된 값을  newType에 넣어준다.  
		newType = jQuery('#ChType option:selected').val();
		//시리즈,타입 변경 함수 호출
		changeType(series, newType);
		//셀렉트 박스 변경 시 경계선을 투명하게 되돌림
		$('.chartContainer').css('border-color', 'rgba(0, 0, 0, .0)');
	})

	//차트 옵션 변경 함수
	function changeType(series, newType) {
		//로드 이후에 차트에 시리즈 변경
		series.chart.addSeries({
			type: newType,
			name: series.name,
			data: series.options.data
		}, false);
		//기존의 시리즈 내용 삭제
		series.remove();
		//기존에 있던 추출된 이미지 삭제
		$("#copyimage").remove();
		//다시 차트를 생성하기위한 obj 비우기
		obj = null;
		//함수 생성 함수 호출
		chartCreate();
	}

	//차트 생성 함수
	function chartCreate() {
		options = {
			//차트 타입
			chart: {
				type: newType
			},
			//우측 하단 로고
			credits: {
				text: 'MTFIS',
			},
			//차트 타이틀
			title: {
				text: 'BTS Album Sale Rate',
				//스타일 두껍게
				style: {
					fontWeight: 'bold'
				}
			},
			//색상 설정
			colors: [
				'#B40404'
			],
			//서브 타이틀 설정
			subtitle: {
				text: 'BTS(bangtanboys) total sales trend album by sale rate.'
			},
			//Y축 타이틀 설정
			yAxis: {
				title: {
					text: '앨범 발매 일순 / 단위 : 장'
				}
			},
			//X축에 들어갈 배열
			xAxis: {
				categories: albumName
			},
			series: [{
				data: albumNum,
				name: 'Sale rate'
			}],
			//exporting시 파일이름, exporting.url 설정
			exporting: {
				filename: 'BTS Album Sale Rate',
				url: 'http://export.highcharts.com/'
			}
		},
			chart = Highcharts.chart('container', options);

		//ajax통신에 사용할 테이터 생성
		obj = {},
			//exportUrl을 차트 옵션의 exporting.url을 넣어준다.
			exportUrl = options.exporting.url;
		//옵션을 보내고 문자열 형태로 받아오기 위해 JSON.stringify사용 
		obj.options = JSON.stringify(options);
		//이미지 파일은 png 
		obj.type = 'image/png';
		//동기 통신으로 설정. 데이터의 결과를 수신 받은 다음 진행 함
		obj.async = true;

		$.ajax({
			//전송 방식
			type: 'post',
			//전송 url
			url: exportUrl,
			//전송할 데이터
			data: obj,
			//전송 성공시 함수 수행
			success: function (data) {
				//imgContainer는 위 이미지가 들어갈 구역의 id 저장
				var imgContainer = $("#imgContainer");
				//이미지에 태그 설정
				$('<img>').attr('src', exportUrl + data).attr('width', '400px')
					.attr('id', 'copyimage')
					.attr('style', 'height:1px; opacity: 0.0;')
					//<img src="http://export.highcharts.com/+data" 
					//width="400px" id="copyimage" style="height:1px; opacity: 0.0;">
					//위의 이미지태그가 imgContainer에 들어가 이미지가 생성된다.
					.appendTo(imgContainer);
			}
		});
	}
</script>

당시에는 블로그 글을 작성하면서 한 줄 한 줄 주석을 엄청 자세하게 달아놨기 때문에 지금 봐도 대충 어떤 의도로 작성했는지 이해가 될것이다.

지금은 이 소스가 동작하지 않는다.

너무 오래된 방식이기 때문이다.

[티스토리 스킨 제작] Chat GPT와 티스토리 스킨 제작 + 적용하기

다아아아 — Tue, 16 Jun 2026 16:35:02 +0900

티스토리를 아주 예전에 하다가 잊어버리고 살았다.

최근에 다시 블로그를 만들게 되었는데, 스킨 적용하는 법부터 까먹었다...

만들어진 스킨을 적용해보니 내 마음에 살짝 안 들어서 내가(Chat GPT랑) 제작해보기로 하였다.

일단 이번 글에서는 티스토리 스킨을 만들고 적용하는 방법까지 작성하고, 나중에는 내가 만든 스킨도 공유해볼 생각이다.

전체 제작 및 적용 과정은 다음과 같다.

예제스킨 다운로드 → GPT와 제작 → 세세한 부분 수정 → 스킨 적용

1. 예제 스킨 다운로드

먼저 티스토리 스킨 메뉴에서 기본으로 제공되는 예제 스킨을 다운로드한다.

https://www.tistory.com/skin

스킨 - 티스토리

좀 아는 블로거들의 유용한 이야기, 티스토리. 블로그, 포트폴리오, 웹사이트까지 티스토리에서 나를 표현해 보세요.

www.tistory.com

티스토리 스킨 페이지에 들어가면 여러 가지 스킨이 있다.

그중 원하는 스킨을 선택한 후 '내 스토리에 적용하기'를 선택한다.

나는 odyssey 스킨을 이용하였다.

스킨을 내 블로그에 적용한 후, 블로그 관리 페이지로 이동한다.

스킨 관리 화면에서 현재 적용된 스킨을 다운로드한다.

다운로드한 파일은 압축 파일 형태로 되어 있기 때문에 압축을 해제한다.

압축을 풀면 여러 파일이 나오는데, 그중에서 가장 중요한 파일은 보통 아래 두 가지다.

skin.html
style.css

skin.html은 블로그의 구조를 담당하는 파일이고,
style.css는 블로그의 디자인을 담당하는 파일이라고 생각하면 된다.

이 두 파일을 ChatGPT에게 주고 수정해달라고 요청하면 된다.

2. Chat GPT와 제작

GPT한테 스킨을 제작해달라고 하거나 디자인을 바꿔달라거나 그러면 못생기게 만들어주기 때문에

디자인을 정확히 할 필요가있다.

그러기 위해 getdesign.md가 필요하다.

https://getdesign.md/

getdesign.md — DESIGN.md collection for AI coding agents

Browse independent design system analyses from popular websites. Drop one into your project as design reference for your coding agent.

getdesign.md

이 사이트에는 다양한 웹사이트의 디자인 시스템이 정리되어 있다.

원하는 느낌의 디자인을 고른 후 DESIGN.md를 클릭한다.

어떤 색을 쓰고, 어떤 여백을 쓰고, 어떤 버튼 스타일을 쓰고, 어떤 분위기의 디자인을 가지고 있는지를 정리해둔 문서라고 보면 된다.

그리고 해당 내용을 복사한다.

그다음 ChatGPT에게 아래 자료를 함께 전달한다.

skin.html
style.css
복사한 DESIGN.md 내용

티스토리 스킨을 수정하고 싶은데, 내가 준 DESIGN.md를 참고해서 모던하고 깔끔하게 디자인해줘.
글씨체는 나눔스퀘어를 사용해줘.
마우스 커서를 따라다니는 CSS나 JS도 추가해줘.
선택 가능한 요소들은 hover 시 위로 살짝 올라가거나 자연스러운 모션이 생기게 해줘.

라는 식으로 수정해달라고 한다.

나는 추가로 아래 내용도 부탁하였다.

글씨체 변경
마우스 포인터 효과 추가
버튼 hover 인터랙션 추가
카드 그림자 추가
프로필 영역 정렬
구독하기 버튼 스타일 수정

이렇게 말해도 디자인이 구리게 나오는 경우가 많다.

그럴때는 디자인 md를 사용해서 디자인해달라고 잡도리를 하면 정신을 차린다.

내가 준 DESIGN.md의 색상, 여백, 카드 스타일, 버튼 스타일을 더 정확히 반영해서 다시 수정해줘.
기존 디자인 느낌이 너무 일반적이니까 DESIGN.md 기준으로 다시 정리해줘.

참고로 한번 틀어진 디자인을 구석구석 GPT로 수정한다면 점점 이상해지고 복잡해지기 때문에

어느정도 만든다면 자신이 요청한 내용들을 한번 정리해서 새로운 대화로 다시 한번에 요청하면 어느정도 깔끔하고 원하는 디자인으로 만들 수 있다.

예를 들어 처음에는 버튼만 수정하고 싶었는데, 계속 수정하다 보면 어느 순간 CSS가 너무 길어지고, 어디가 어디에 적용되는지 알기 어려워진다.

그래서 어느 정도 방향이 잡혔다면 지금까지 요청한 내용을 한 번 정리해서 새로운 대화에서 다시 요청하는 것도 좋다.

예를 들면 이렇게 다시 요청한다.

지금까지 수정한 내용을 정리하면 다음과 같아.

나눔스퀘어 폰트 사용

DESIGN.md 기반의 모던하고 깔끔한 디자인

카드형 레이아웃

hover 시 살짝 올라가는 인터랙션

커스텀 마우스 커서

프로필 가운데 정렬

구독하기, 글쓰기, 관리 버튼 스타일 통일

이 조건을 기준으로 skin.html과 style.css를 다시 깔끔하게 정리해줘.

이렇게 한 번 정리해서 요청하면, 코드가 훨씬 깔끔해지고 원하는 방향에 가까워진다.

GPT가 수정해준 파일을 받은 후 다시 블로그 관리 페이지로 돌아간다.

블로그 관리 페이지에서 편집으로 들어간다.

html 편집을 선택한다.

HTML 탭에는 수정된 skin.html 내용을 복사해서 붙여넣고,
CSS 탭에는 수정된 style.css 내용을 복사해서 붙여넣는다.

그다음 적용 버튼을 누른다.

그러면 블로그에 수정된 스킨이 적용된다.

3. 세세한 부분 수정

스킨을 적용한 후에는 왼쪽 미리보기 화면이나 실제 블로그 화면을 확인한다.

그리고 마음에 안 드는 부분을 하나씩 ChatGPT에게 수정해달라고 요청하면 된다.

예를 들면 이런 식이다.

구독하기 버튼 색상을 변경해줘.
프로필을 가운데 정렬해줘.
카드에 그림자를 조금 더 연하게 넣어줘.
hover했을 때 버튼이 살짝 올라오게 해줘.
검색창 부분만 그림자를 제거해줘.

이렇게 구체적으로 말할수록 원하는 결과가 잘 나온다.

“예쁘게 해줘”보다는
“구독하기 버튼의 배경색을 연한 보라색으로 바꾸고, hover하면 살짝 위로 올라가게 해줘”처럼 말하는 것이 좋다.

또한 원하는 특정 부분이 있다면 개발자 도구를 사용하면 편하다.

먼저 티스토리 스킨 편집 화면에서 적용 버튼을 클릭한다.

그다음 내 블로그를 새 페이지로 연다.

블로그 화면에서 F12 키를 누르면 개발자 도구가 열린다.

개발자 도구 왼쪽 위에 보면 마우스 커서처럼 생긴 아이콘이 있다.

이 버튼을 클릭하면 화면에서 원하는 요소를 직접 선택할 수 있다.

예를 들어 구독하기 버튼을 수정하고 싶다면,
개발자 도구의 선택 버튼을 누른 후 블로그 화면에서 구독하기 버튼을 클릭한다.

그러면 개발자 도구에 해당 버튼의 HTML 구조와 CSS 스타일이 나온다.

여기서 클래스명을 확인할 수 있다.

그러면 ChatGPT에게 이렇게 요청하면 된다.

.subscribe-btn 클래스를 가진 구독하기 버튼을 수정하고 싶어.
버튼을 더 길게 만들고, 배경색은 연한 보라색으로 바꾸고, hover하면 살짝 위로 올라가게 해줘.

이렇게 클래스명을 같이 알려주면 ChatGPT가 훨씬 정확하게 수정해준다.

물론 CSS를 어느 정도 할 수 있다면, CSS 탭에서 해당 클래스를 직접 찾아서 수정해도 된다.

스킨을 수정하면서 블로그에 들어갈 이미지들도 같이 만들었다.

나는 아래 이미지들을 제작하였다.

블로그 배너
프로필 이미지
블로그 로고
프로필 배경 이미지
타이틀 헤더 이미지

이미지를 만들 때에도 그냥 “배너 만들어줘”라고 하면 원하는 느낌이 안 나올 수 있다.

내 블로그가 어떤 내용을 다루는지, 어떤 분위기를 원하는지 자세히 설명하는 것이 좋다.

역시 이미지도 잡도리가 필요하다.

4. 스킨 적용

모든 수정이 끝났다면 마지막으로 적용 버튼을 클릭하여 스킨을 최종 적용한다.

적용 후에는 실제 블로그에 들어가서 화면을 확인한다.

오랜만에 티스토리를 다시 시작하려니 스킨 적용하는 법부터 까먹었지만

생각보다 어렵지 않게 수정할 수 있었다.

빠른 시일 내에 내가 만든 스킨도 공유해보도록 해야겠다.

[Windows+Docker+Spring Boot+VScode] Window에서 Docker를 이용한 Spring Boot 환경 세팅_(1)

다아아아 — Thu, 11 Jun 2026 16:19:34 +0900

Docker를 이용하여 Spring Boot 기반의 웹사이트 제작을 진행하려고 한다.

프로젝트를 시작하기 전에 먼저 개발 환경 세팅이 필요하다.

일반적으로는 Spring Boot 프로젝트를 먼저 생성한 후 Docker를 연결하여 배포 환경을 구성할 수도 있다.

하지만 프로젝트 후반부에 Docker를 연결할 경우 환경 차이로 인해 머리 아파지는 경우가 있다.

그래서 나는 개발 환경을 구성하는 첫 단계에서 Docker를 먼저 설치한 후 Spring Boot 프로젝트 개발부터 배포까지 Docker 기반으로 진행할 계획이다.

이번에 제작할 사이트에 대한 내용은 다음에 정리하도록 하고

이번 글에서는 Windows 환경에서 Docker와 VSCode를 이용해 Spring Boot 개발 환경을 세팅하는 과정을 정리하려 한다.

아래 순서로 진행할 예정이다.

WSL 2 → Ubuntu → Docker → VS Code 확장

이번 글에서는 먼저 WSL 2 설치부터 Ubuntu 초기 설정까지 작성하고 다음 글에서는 Docker 설치와 VS Code 확장 연결 과정을 정리할 예정이다.

1. WSL 2 설치

내가 작업하는 PC는 Windows 10 Home이다.

Docker 공식 문서도 WSL 2 백엔드를 Windows 개발 환경의 핵심 방식으로 안내하고 있고

VS Code와도 잘 연동되기 때문에 예전처럼 Hyper-V 기반으로 직접 쓰는 방식보다 WSL 2 + Docker Desktop 방식을 사용하도록 하겠다.

1.1 가상화 사용여부 확인

먼저 Docker는 내부적으로 Linux 가상 환경을 사용하기 때문에 CPU 가상화가 켜져 있는지 확인한다.

작업 관리자( Ctrl + Shift + Esc )를 열어 성능 탭에서 CPU를 선택하여 가상화가 켜져 있는지 확인한다.

1.2 WSL 2 설치

PowerShell을 관리자권한으로 실행한 후 아래 명령어를 입력한다

wsl --install

이 명령어는 WSL 기능을 켜고 기본 Linux 배포판인 Ubuntu를 설치한다.

정상적으로 설치가 완료된다면 다음 단계인 Ubuntu 설치 및 초기 설정으로 넘어가면 된다.

내 PC에서는 해당 명령어를 입력하였을 경우 '설치 중: Linux용 Windows 하위 시스템 액세스가 거부되었습니다.'라는 이유로 더 이상 진행 할 수 없었다. WSL 관련 구성 요소가 최신 상태가 아니어서 발생한 문제라고 생각했기에 아래 명령어를 입력하여 WSL 업데이트를 시도했다.

wsl --update

잘 될 리가 없다. PowerShell을 관리자 권한으로 실행했음에도 권한 상승이 필요하다는 메시지가 계속 출력되었다.

권한 설정이나 기타 상태를 확인했지만 원인은 찾지 못했다.

원인을 끝까지 추적하여 해결할 수도 있었지만 많은 시간을 사용하는 것은 비효율적이라 생각했기에 수동 설치를 하기로 한다.

아래 사이트로 이동하여 'wsl_update_x64.msi'을 다운로드하여 설치한다.

https://learn.microsoft.com/ko-kr/windows/wsl/install-manual

이전 버전의 WSL에 대한 수동 설치 단계

wsl install 명령을 사용하는 대신 이전 버전의 Windows에 WSL을 수동으로 설치하는 단계별 지침입니다.

learn.microsoft.com

2. Ubuntu 설치

Microsoft Store에서 Ubuntu를 검색하여 설치하려 했지만 실패하여 PowerShell을 통해 설치했다.

아래 명령어를 한 줄씩 순서대로 입력한다.

cd $env:USERPROFILE\Downloads
Invoke-WebRequest -Uri https://aka.ms/wslubuntu2004 -OutFile Ubuntu.appx -UseBasicParsing
Add-AppxPackage .\Ubuntu.appx

위 명령어는 현재 사용자 계정의 Downloads 폴더로 이동한 뒤 Ubuntu 설치 파일을 다운로드하고 Windows 앱 패키지로 설치하는 과정이다.

잘 설치가 된다면 '웹 요청을 쓰는 중 요청 스트림을 쓰는 중...(쓴 바이트 수: ....)' 라는 내용을 확인할 수 있다.

다운로드가 완료되면 아래 명령어를 입력한다.

Add-AppxPackage $env:USERPROFILE\Downloads\Ubuntu.appx

그 후 설치가 끝나면 시작 메뉴에서 설치된 우분투를 실행한다.

'Enter new UNIX username:'이 뜨면 사용자 이름을 입력하고 비밀번호까지 입력한다.

( 비밀번호를 입력할 때 터미널 화면에는 아무것도 표시되지 않는 것이 정상이다.)

사용자 이름과 비밀번호 설정이 완료되면 Ubuntu 초기 설정이 끝난다.