뷰티풀 프로그래밍

가성비 VIA되는 키보드 CIDOO QK61 V2 리뷰

KyeongRok Kim — Tue, 12 May 2026 22:02:57 +0900

VIA가 되는데 싸고 괜찮은 60% 배열 키보드가 있어서 구매 해보았습니다. 60%배열은 힙하고 많이 안쓰는 배열입니다. 진입장벽이 꽤 높습니다. 60%배열은 VIA가 필수가 아닌가 싶습니다. VIA가 안되면 커스텀 앱을 써야 하는데 리눅스 cli환경에서 키매핑 앱까지 쓰기는 쉽지 않기 때문입니다.

60%배열 쓰는 이유

방향키, 홈엔드키 공간에 마우스를 놓을 수 있어서 팔을 많이 안쓰고도 키보드, 마우스 조작 다 가능 합니다. 그리고 책상을 조금 넓게 쓸 수 있습니다.

60%배열에 VIA가 되어야 하는 이유

키보드가 부족하기 때문
필요한 키들을 다른 레이어에 매핑 해야 함
그것을 커스텀 할 수 있어야 하는데 VIA가 커스텀을 편하게 해주는 기능

방향키

처음 구매하면 방향키가 없어서 당황스러운데요 아래와 같이 2번 레이어에 있습니다. FN을 누르고 아래 자리를 눌러줘야 합니다. Fn+Alt, Fn+ App, Fn+Ctrl, Fn+? 이렇게 4개 키 입니다.

구매한 이유는

49,000원이라는 무난한 가격이라서
60%배열을 구매하고 싶었고
QMK가 된다고 해서
- 하지만 QMK풀로는 안되고 VIA만 된다는 점
레이어를 4개 쓸 수 있어서

레이어 기능

60%배열이라서 FUNCTION, HOME, END, 방향키 같은 것이 없기 때문에 영문 자리에 그 기능들이 들어가주기 위해 특정 키를 누르면 해당 레이어가 활성화 되는 기능 입니다.

스위치

CIDOO Pearl White라는 자체 리니어 스위치로 소리가 큼

아쉬운 점

앞에 썼지만 QMK는 풀 지원이 아니고 VIA만 지원함
- QMK는 유선만 되는거라고 합니다(무선인데 QMK되는게 있긴 있지만 비쌈)
- VIA는 키 매핑 펌웨어 인데 여러개의 레이어와 조금 더 유연한 매핑이 가능합니다.
- 프로그래밍 방식까지는 안됩니다.
소리가 커서 오피스에서 쓰려면 축을 교체해야 할 것 같습니다.

독거미 키보드(AULA 87)와 비교

PBT 키캡이라서 조금 더 좋음
키감 괜찮음
QK61은 VIA가 된다는 것
소리가 독거미키보드 보다 커서 오피스에서 쓰기에는 조금 부담스러움

소리가 너무 커서 오피스에서는 쓰기에 부담스러운 관계로 반품 할까 심히 고민 중 입니다.

하지만 49,000원에 독거미 키보드 수준의 키감이 있으면서 VIA라도 되는 점은 이 가격에는 없지 않나 싶네요.

VIA

4개의 레이어를 지원하며 키 매핑을 꽤나 자유롭게 해주는 앱 입니다. QMK를 지원해야 쓸 수 있습니다.

Any Key매핑

https://keychron.kr/via/40

VIA 레이어 Key설명

https://www.youtube.com/watch?v=oz0yCiogCAU

VIA 주요 레이어 명령어 정리

1. MO(Layer) : 레이어 일시 활성화

작동: 누르고 있는 동안만 이동. (가장 기본)
활용 예시: FN 키 그 자체.
- 설정: MO(1)
- 사용: FN을 누른 채로 1을 누르면 F1이 입력되고, 손을 떼면 다시 숫자 1이 입력되게 설정할 때 사용합니다.

2. TG(Layer) : 레이어 토글

작동: 한 번 누르면 켜지고, 다시 누르면 꺼짐.
활용 예시: 숫자 키패드 모드.
- 설정: 특정 키에 TG(2) 배치. (2번 레이어는 우측 자판이 숫자 패드처럼 작동하도록 매핑)
- 사용: 엑셀 작업을 시작할 때 한 번 눌러서 숫자 모드로 고정하고, 작업이 끝나면 다시 눌러 문자 모드로 복귀합니다.

3. TO(Layer) : 레이어 강제 전환

작동: 해당 레이어로 즉시 점프 (다른 레이어 무시).
활용 예시: 특정 게임 전용 모드.
- 설정: TO(3) (3번 레이어는 게임 전용 매크로나 단축키로만 구성)
- 사용: 게임을 시작할 때 눌러서 레이어를 고정합니다. 이 레이어에서 다시 원래 레이어(Layer 0)로 돌아오는 키(TO(0))를 반드시 하나 만들어둬야 합니다.

4. TT(Layer) : 탭-토글 하이브리드

작동: 빠르게 연타(보통 2~5번)하면 토글, 계속 누르고 있으면 일시 활성화.
활용 예시: 멀티미디어 컨트롤.
- 설정: TT(1)
- 사용: 볼륨 조절을 잠깐 할 때는 누른 채로 조절하고, 음악을 계속 들으면서 다음 곡/이전 곡을 자주 누를 것 같으면 연타해서 레이어를 고정해버립니다.

5. OSL(Layer) : 원샷 레이어

작동: 딱 한 번만 다음 키를 해당 레이어에서 입력하고 원래대로 복귀.
활용 예시: 한 번만 쓸 특수문자 입력.
- 설정: OSL(1)
- 사용: OSL 키를 한 번 탭한 뒤 1을 누르면 F1이 입력되고, 그 다음부터는 손을 떼지 않아도 자동으로 다시 숫자 1이 입력됩니다. 손가락 힘이 덜 들어가는 방식입니다.

6. LT(Layer, KC) : 레이어-탭 (가장 추천)

작동: 탭하면 일반 키, 홀드하면 레이어 전환.
활용 예시: 스페이스바를 FN 키로 쓰기.
- 설정: LT(1, KC_SPC)
- 사용: 그냥 치면 스페이스, 꾹 누르고 있으면 FN 키가 됩니다. 엄지손가락으로 레이어 전환을 할 수 있어 손의 이동 동선을 획기적으로 줄여줍니다.

7. LM(Layer, Mod) : 레이어-모디파이어 조합

작동: 레이어 이동과 동시에 특정 기능키(Ctrl 등)가 눌린 상태를 유지.
활용 예시: 그래픽/영상 편집 단축키.
- 설정: LM(2, MOD_LCTL) (2번 레이어로 가면서 Ctrl은 누른 상태 유지)
- 사용: 포토샵 등에서 Ctrl과 조합된 복잡한 단축키를 쓸 때 유리합니다. 2번 레이어의 A키를 KC_S로만 해둬도, 실제 입력은 Ctrl + S가 됩니다.

간략 메뉴얼

CIDOO QK61 기계식 키보드의 주요 조작법과 단축키 정보를 정리해 드립니다. 이 모델은 유선, 블루투스, 2.4GHz 무선의 세 가지 모드를 지원하며 VIA 소프트웨어를 통해 키 매핑이 가능합니다.

1. 페어링 방법
블루투스 (최대 3대):

FN + Q / W / E 를 3~5초간 길게 누르면 페어링 모드로 진입하며 해당 키가 깜박입니다.

연결할 기기에서 "CIDOO QK61"을 찾아 선택하세요.

기기 전환 시에는 FN + Q/W/E를 짧게 누릅니다.

2.4GHz 무선:

리시버를 PC에 꽂고 모드를 2.4G로 바꿉니다.

연결이 안 될 경우 FN + R을 길게 눌러 페어링을 시도하세요 (R 키 녹색 점멸).

2. 주요 기능 단축키
OS 전환:

FN + A: Windows 모드

FN + S: Mac 모드

배터리 잔량 확인:

FN + Right Shift를 길게 누르면 숫자키 1~0에 불이 들어옵니다 (1=10%, 0=100%).

공장 초기화:

FN + Space를 3초간 길게 누릅니다.

Win키 잠금: FN + Win

3. LED 백라이트 설정
효과 변경: FN + \ (역슬래시)

색상 변경: FN + Enter

밝기 조절: FN + ↑ (밝게) / ↓ (어둡게)

속도 조절: FN + ← (느리게) / → (빠르게)

로고 LED 조절: FN + Z (모드 변경), FN + X (색상 변경)

AI와 연속혈당 측정기로 혈당 극복 하기 - 제2편 회사 업무 중에 변하는 혈당

KyeongRok Kim — Mon, 4 May 2026 17:40:26 +0900

공휴일에 연속혈당측정기를 부착해서 주말까지는 몸이 휴식모드인지 저녁 식사 후 졸음에 쓰러지는 현상이 덜 했습니다. 하지만 문제는 회사를 가는 평일이었습니다. 오늘 다시 회사가는 날 이라서 오전 9시부터 저녁 7시까지 측정을 해보았습니다.

제 문제는 오후 4시에 피곤함이 시작되고 5시 30분부터는 허기가 지면서 피곤이 몰려오고 집에 와서 저녁을 먹으면 달콤한 간식이 당기고 먹으면 졸음이 쏟아져서 2시간 후에 깨는 패턴이 3년 넘게 반복 중이었습니다.

그래서 혈당 문제라는 가설을 세우고 측정을 하고 AI에게 측정결과를 알려줘서 왜 그런지 진단을 받아봤습니다. 진단 결과는 꽤나 정확했고 AI가 예측 한 것들이 대부분 맞았고 저녁 식사 후 혈당스파이크로 보이는 졸음을 오늘 한번 막았습니다.

출근 ~ 점심

출근 했을 때 제 혈당은 정말 안정적입니다. 주말 같은 경우는 오전에 90대를 유지합니다. 그런데 업무중에는 몸이 그 패턴을 아는지 혈당을 100대로 유지를 합니다. 점심시간인 12시까지는 100대에서 왔다갔다 합니다.

이에 대해 AI에게 물어보니 다음과 같이 '업무 모드'라고 합니다.

결론부터 말씀드리면, 이는 몸이 **'업무 모드(High-Performance Mode)'**에 진입하여 시스템의 에너지 베이스라인을 의도적으로 상향 조정했음을 뜻합니다. 의학적으로도, 공학적으로도 매우 흥미로운 현상입니다.

출근 후 혈당이 90에서 100으로 올라가 유지되는 것은, 우리 몸이 **"이제부터 고도의 인지 연산을 시작할 테니, 연료(포도당)를 즉각 공급할 수 있도록 혈류 내 가용 에너지를 일정 수준 높여라"**라고 명령을 내린 결과입니다.

간의 포도당 방출: 휴식기(90)에는 최소한의 에너지만 유지하지만, 업무가 시작되면 간에서 저장된 당(글리코겐)을 혈액으로 내보내 베이스라인을 높입니다.
뇌를 위한 버퍼(Buffer): 뇌는 저혈당에 매우 취약합니다. 특히 복잡한 로직을 다루는 개발 업무 중에는 당 소모가 급격히 일어날 수 있으므로, 시스템이 미리 100 정도의 '안전한 버퍼'를 확보해 두는 것입니다.

변화 폭이 적음

가장 놀라운 부분은 9시부터 12시까지 변화가 거의 없다는 점입니다. 이는 몸의 **피드백 제어 시스템(Feedback Control System)**이 매우 정밀하게 작동하고 있다는 증거입니다.

실시간 수급 조절: 뇌가 코딩이나 설계를 위해 포도당을 쓰는 만큼, 간에서 정확히 그만큼의 당을 보충해주고 있는 상태입니다.
안정적인 시스템 유지: 휴식 날에는 외부 자극(음식 등)에 따라 혈당이 출렁이는 '동적 변화'가 크지만, 업무 중에는 뇌라는 거대한 프로세서가 에너지를 지속적으로 일정하게 소모하고 있기 때문에 오히려 수치가 일정하게 유지되는 '정상 상태(Steady State)'에 도달한 것으로 보입니다.

점심 후 스파이크

저는 점심시간이 12:15~13:15 입니다. 점심을 12시 25분 ~ 12시 45분으로 20분 정도 걸쳐서 먹는 동안에는 혈당이 바로 오르지 않았습니다. 점심시간 후 20분 정도 산책을 했는데 이 동안에도 오르지 않았습니다. 하지만 오피스 복귀 해서 업무 시작을 하니 40분에 걸쳐 100이었던 혈당이 158까지 올랐습니다. 어제 주말에 집에서 식사를 했을 때는 130대였는데 158까지 뛰어서 살짝 놀랐습니다.

회사 식당이 밥이 맛있어서 좀 많이 먹었고 집에서 해먹을 때보다 반찬 영양이 좋으니까 집에서 먹을때에 비해 30가까이 올라가더라구요. 그래서 다음 목표는 150이 넘지 않게 식사를 해보는 것입니다.

오늘의 혈당 로그 요약

안정기 ($09:00 \sim 12:00$): 오전 내내 100mg/Dl 을 유지하며 뇌 가동을 위한 최적의 에너지를 소모했습니다.
완충기 ($12:25 \sim 13:15$): 식사 후 바로 산책을 함으로써 혈당이 108 ~ 118mg/dL 사이에서 아주 예쁘게 잡혔습니다.
폭풍기 ($13:15 \sim 13:56$): 산책을 중단하고 자리에 앉자마자, 소화되던 당들이 한꺼번에 혈류로 쏟아지며 오늘 최대치인 158mg/dL 까지 치솟았습니다.
회복기 ($14:22 \sim 16:45$): 업무에 다시 집중하면서 뇌가 당을 소모하기 시작했고, 144 -> 130 -> 109mg/dL 로 순차적으로 하강했습니다. 중간에 드신 아몬드가 하강 속도를 완만하게 조절해 주었습니다.
현재 ($17:33$): 퇴근 전 피로감과 함께 수치가 다시 121mg/dL로 살짝 반등했습니다. 이는 몸이 에너지를 다 쓰고 난 뒤의 '잔여 연소' 상태라 눈이 감기고 피곤한 것입니다.

AI와 연속혈당 측정기로 혈당 극복 하기 - 제1편 센서 부착 & 운동 후 측정 및 결과

KyeongRok Kim — Fri, 1 May 2026 19:21:40 +0900

'혈당 스파이크'라는 말을 들었습니다. 자세한 설명은 나중에 찾아봤지만 듣자마자 감이 왔고 딱 제 얘기라는 생각이 들었습니다. 밥을 먹거나 단것을 같이 먹으면 저녁에 쓰러지듯 잠이 들었습니다. 졸음을 참을 수 없는데 퇴근하고 허기가 져서 허겁지겁 밥을 먹고 나면 못 이길 정도의 졸음이 찾아오는 증상이 몇년째 있었습니다.

저는 애가 둘이고 올해 한국나이로 마흔입니다. 개발자라서 책상에 매일 앉아있고 운동도 거의 안합니다. 차로 출퇴근하고 지하주차장에서 회사 지하주차장 그리고 엘레베이터에서 엘레베이터 그리고 퇴근하면 육아하구요. 이대로 가다간 조만간 당뇨병이 올 것 같았습니다. 최근에는 아버님이 당뇨 때문에 백내장 수술을 못 했다는 얘기까지 들어서 큰일나겠지 싶었습니다.

그래서 연속혈당측정기를 구매 해서 혈당을 측정을 해보았습니다. 아버님이 당뇨때문에 걱정이 많으셔서 그 걱정을 덜어드리려는 목적이 있었구요 저도 가족력이 있는 것을 알고 있기 때문에 지금 제 몸 상태를 알고 싶었습니다.

이렇게 생겼고 5분마다 혈당을 재서 폰으로 전송 해줍니다. 센서 부착 할 때 바늘로 한번 찌르는데 그 이후에는 아픈게 없습니다. 부착을 했고 측정을 해서 측정 상황을 AI에게 물어봤고 꽤 신빙성 있는 결과를 알려주었습니다.

센서 부착한 날이 공휴일이라 병원에 못가서 AI에게 다음과 같이 운동 중에 혈당이 올라가는 현상을 물어봤더니 정상이라고 하네요.

운동중에 혈당에 164까지 올라간 건에 대해

내가 점심을 1시 30분에 먹고 혈당이 110에서 140까지 갔다가 3시 30분에 130으로 갔다가 4시에 110으로 갔다가 내가 운동을 갔어 4시부터 운동을 했는데 뭐 안먹고 운동했거든 탁구 쳤는데 운동을 시작 하니까 5시 30분까지 혈당이 계속 올라서 164까지 올라가고 6시 40분까지 계속 운동 하니까 다시 떨어지더라구 괜찮은건지

정상이고 운동중인데도 혈당이 많이 올라 갈 수 있다는 AI답변

빈속에 운동을 했는데도 혈당이 164까지 훌쩍 뛰어서 많이 놀라셨겠어요. 결론부터 말씀드리면, 운동 중 혈당이 상승했다가 다시 떨어지는 것은 지극히 자연스러운 우리 몸의 생리적 반응일 가능성이 높으니 너무 걱정하지 않으셔도 괜찮습니다.

아무것도 먹지 않았는데도 혈당이 오르는 이유는 우리 몸의 에너지 공급 시스템 때문입니다. 그 원리를 시간대별로 자세히 설명해 드릴게요.

탁구 칠 때 몸에서 일어난 일들
오후 4시 (혈당 110): 점심 식사 후 소화가 끝나고 혈당이 안정적인 상태에서 운동을 시작하셨습니다.

오후 4시 ~ 5시 30분 (혈당 164로 상승): 탁구는 순발력을 요구하고 움직임이 꽤 많은 운동입니다. 운동을 시작하면 몸(특히 근육)은 갑자기 많은 에너지를 필요로 합니다. 이때 우리 몸은 간에 저장해 두었던 비상식량(글리코겐)을 포도당으로 분해해서 혈액 속으로 마구 뿜어냅니다. 또한 탁구처럼 집중하고 긴장하는 운동을 하면 아드레날린 같은 호르몬이 분비되어 일시적으로 혈당을 더 끌어올리게 됩니다. 이 시기에는 근육이 쓰는 당보다 간에서 뿜어내는 당이 더 많아서 혈당이 쭉 올라갑니다.

오후 5시 30분 ~ 6시 40분 (혈당 다시 하락): 운동이 1시간 반 이상 길어지면서 간에서 내보내는 당의 양은 줄어들고, 근육은 계속해서 혈액 속의 당을 열심히 가져다 씁니다. 수요(근육의 소모)가 공급(간의 방출)을 역전하면서 혈당이 자연스럽게 다시 떨어지게 된 것입니다.

결론: 괜찮은 걸까요?
네, 아주 정상적이고 건강한 패턴을 보여주고 있습니다.

간이 에너지를 제때 잘 공급해 주었고, 근육도 그 에너지를 잘 소모하여 다시 정상 수치로 돌아왔다는 뜻입니다. 특히 고강도 운동이나 승부욕이 자극되는 운동(탁구 등)을 할 때는 일시적으로 혈당 스파이크가 일어나는 경우가 흔합니다.

✅ 참고해 주세요
운동 후 다시 혈당이 잘 떨어졌다면 몸의 대사 시스템이 훌륭하게 작동하고 있다는 증거입니다. 다만, 평소 당뇨를 관리 중이시거나 혈당 수치에 예민한 상태시라면, 오늘 꼼꼼하게 기록해 두신 이 시간대별 수치를 다음 진료 때 담당 의사 선생님께 한 번 보여드리고 상담을 받아보시면 더욱 안심이 되실 것입니다.

MVVM 패턴 핵심 요약

KyeongRok Kim — Wed, 29 Apr 2026 10:44:23 +0900

MVVM 패턴 핵심 요약

한 줄 요약

View와 ViewModel은 타입 수준에서 서로를 참조하지 않아야 한다.

이것이 MVVM의 전부입니다. 나머지는 모두 이 원칙을 어떻게 지킬 것인가에 대한 부연 설명입니다.

왜 그래야 하는가

ViewModel은 View의 추상화입니다. 추상화의 목적은 View가 독립적으로 존재할 수 있도록 하는 것입니다.

View가 ViewModel 타입을 알면 → ViewModel 변경이 View에 영향을 줍니다.
ViewModel이 View 타입을 알면 → View 변경이 ViewModel에 영향을 줍니다.

서로의 타입을 모르고, 속성 간 Binding으로만 연결되어야 양쪽 모두 독립적으로 유지됩니다.

안티패턴

View가 ViewModel을 직접 생성하거나 타입을 명시하는 경우

<!-- 안 됩니다 -->
<Window.DataContext>
    <viewmodels:AppViewModel />
</Window.DataContext>

// 안 됩니다
public class AppViewModel
{
    public AppViewModel(AppView view) { ... }
}

Model이 ViewModel/View 동작에 관여하는 경우

// 안 됩니다 - Model이 ViewModel 로직을 가짐
public class UserSet
{
    public string Category
    {
        set
        {
            _category = Filter(value);          // View 입력 처리는 ViewModel 책임
            ViewModel.LastUpdateTime = ...;     // Model이 ViewModel 참조
        }
    }
}

올바른 구조

// ViewModel - View를 모릅니다
public class AppViewModel
{
    public AppViewModel() { }
    public string Name { get; set; }
}

<!-- View - ViewModel 타입을 명시하지 않습니다 -->
<Window>
    <TextBlock Text="{Binding Name}"/>
</Window>

DataContext는 외부에서 주입합니다. WPF에서는 DataTemplate이 ViewModel 타입과 View를 매핑하는 역할을 합니다.

"그럼 이런 경우엔 어떻게 하나" 질문이 나오면

이미 설계가 잘못된 신호입니다. 다음 순서로 고민합니다.

1순위: Binding으로 해결

값이 바뀌면 View가 알아서 반응합니다. ViewModel은 값만 바꾸고 그 이후는 신경 쓰지 않습니다 (fire & forget).

2순위: AttachedProperty / Behavior

Binding만으로 부족할 때 사용합니다. 예: ListBox.ScrollIntoView() 같은 명령형 동작.

// AttachedProperty로 해결한 ScrollIntoView 예시
public class ListBoxExtension
{
    public static readonly DependencyProperty BringIntoViewItemProperty =
        DependencyProperty.RegisterAttached(
            "BringIntoViewItem", typeof(object), typeof(ListBoxExtension),
            new PropertyMetadata(OnChanged));

    static void OnChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (d is ListBox listBox)
            listBox.ScrollIntoView(e.NewValue);
    }
    // Get/Set 생략
}

<ListBox local:ListBoxExtension.BringIntoViewItem="{Binding SelectedSource}"
         ItemsSource="{Binding Source}"
         SelectedItem="{Binding SelectedSource}"/>

이 경우 View와 ViewModel 사이에 어떤 타입 의존성도 없습니다.

3순위 (마지노선): 인터페이스를 통한 우회 접근

IView 같은 인터페이스로 ViewModel이 View를 참조합니다. 권장하지는 않지만 어쩔 수 없을 때의 마지노선입니다. 이 이하로는 내려가지 않습니다.

절대 금지: View와 ViewModel이 서로의 구체 타입을 직접 참조하는 것

여기까지 내려갈 거면 MVVM을 쓰는 의미가 없습니다.

Model 설계 원칙

DB Entity나 DTO를 Model로 직접 쓰지 않습니다. 별도 타입으로 정형화합니다.
Model은 데이터 보관용입니다. View 입력 처리 로직은 ViewModel에 둡니다.
Model이 immutable이라면 View와 직접 Binding해도 무방합니다. 그렇지 않다면 ViewModel을 거쳐서 노출합니다.
컬렉션의 개별 아이템은 상위 입장에서는 Model, ItemTemplate 입장에서는 ViewModel로 동시에 작동합니다. 정상입니다.

구현 레벨

레벨	상태	특징
1	패턴 무지	그냥 막 만듦
2	View → ViewModel 직접 참조	분리 의식은 있으나 code-behind에 로직이 몰림
3	인터페이스 우회 참조	학습 수준은 높지만 타입 의존성은 잔존
4	완전 분리	IoC + Binding + AttachedProperty/Behavior로 구현

레벨 4가 항상 정답은 아닙니다. 요구사항과 일정에 따라 적정 레벨을 선택하되, 한번 정한 규칙은 일관되게 유지하는 것이 중요합니다.

결론

코딩이 시작되기 전, 설계 단계에서 다음 질문에 답할 수 있어야 합니다.

View가 ViewModel 타입을 알아야 하는 부분이 있는가? → 있으면 설계 재검토.
ViewModel이 View를 직접 다루어야 하는 부분이 있는가? → 있으면 Binding이나 AttachedProperty로 우회 가능한지 먼저 검토.
Model에 View/ViewModel 관련 로직이 들어갔는가? → 들어갔으면 ViewModel로 이동.

모든 결정은 코딩 전에 끝나야 하며, 단일 기준은 "타입 의존성 배제"입니다.

참고

https://blog.naver.com/vactorman/222615603748 를 정리했습니다.

WPF 버튼에 레이블과 아이콘 넣기

KyeongRok Kim — Sat, 25 Apr 2026 14:44:22 +0900

다음과 같이 버튼에 아이콘과 레이블을 넣고 Border에 그라데이션을 준 버튼을 만들어보겠습니다.

버튼과 스타일

버튼을 만들고
스타일을 만듭니다.
템플릿을 Border로 바꿔줍니다.

<Window.Resources>
    <Style x:Key="Button1" TargetType="Button">
        <Setter Property="Width" Value="120" />
        <Setter Property="Height" Value="120" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Background="{TemplateBinding Background}" CornerRadius="8">
                        <TextBlock Text="ClickMe"></TextBlock>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button Content="홈" Style="{StaticResource Button1}" />
</StackPanel>

Grid추가

영역을 나누기 위해 Grid를 추가 해줍니다.

<Border Background="{TemplateBinding Background}" CornerRadius="8">
    <Grid>
        <TextBlock Text="ClickMe"></TextBlock>
    </Grid>
</Border>

Grid에 Row선언 하기

Grid.RowDefinitions로 Row를 선언 할 수 있습니다.

<Grid.RowDefinitions>
	<RowDefinition Height="*" />
	<RowDefinition Height="*" />
</Grid.RowDefinitions>

다음과 같이 위아래로 두개를 나누기 위해 RowDefinition을 두개 만들어 주고 반반 높이를 주기 위해 *, *로 줍니다.

<Border Background="{TemplateBinding Background}" CornerRadius="8">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock Text="ClickMe"></TextBlock>
        <TextBlock Text="PushMe"></TextBlock>
    </Grid>
</Border>

그냥 TextBlock만 추가 하면 위와 같이 겹치기 때문에 Row를 지정 해줍니다. 0부터 지정 할 수 있습니다.

<Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="ClickMe"></TextBlock>
<TextBlock Grid.Row="1" Text="PushMe"></TextBlock>

나누는 비율 변경

Height를 7*, 3* 같이 주면 7:3이 됩니다. 8:2로 하고 싶다면 8*, 2*로 줄 수 있겠습니다.

<Grid.RowDefinitions>
    <RowDefinition Height="7*" />
    <RowDefinition Height="3*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="ClickMe" Background="Brown"></TextBlock>
<TextBlock Grid.Row="1" Text="PushMe"></TextBlock>

그런데 조금 이상하죠? 7:3으로 잘 나누어지는지 구분하기 위해 Background를 줬는데 모서리가 둥글지 않습니다.

Border의 CornerRadius는 그 Border 자신의 Background만 둥글게 깎습니다. 자식인 TextBlock의 Background="Brown"은 별개의 사각형으로 그려지므로 둥근 모서리를 덮어버려 각지게 보입니다.

그래서 Border로 감싸주어야 합니다.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="7*" />
        <RowDefinition Height="3*" />
    </Grid.RowDefinitions>
    <Border Grid.Row="0" Background="Brown" CornerRadius="8,8,0,0">
        <TextBlock Text="ClickMe"></TextBlock>
    </Border>
    <TextBlock Grid.Row="1" Text="PushMe"></TextBlock>
</Grid>

레이블 가운데 정렬

TextBlock에 아래쪽 가운데 정렬을 해줍니다.

<TextBlock Grid.Row="1" Text="PushMe"
           HorizontalAlignment="Center"
           VerticalAlignment="Center"
           ></TextBlock>

벡터(Vector) 아이콘 넣기

이미지를 넣으면 확대하거나 축소하면 이미지가 어색해지기 때문에 Vector로 삽입 하는게 좋습니다. ViewBox안쪽에 Path로 넣어줍니다.

<Border Grid.Row="0" Background="Brown" CornerRadius="8,8,0,0">
    <Viewbox Margin="16" Stretch="Uniform">
        <Path Fill="White"
              Data="M12 3 L2 12 H5 V21 H10 V14 H14 V21 H19 V12 H22 Z" />
    </Viewbox>
</Border>
<TextBlock Grid.Row="1" Text="PushMe"
           HorizontalAlignment="Center"
           VerticalAlignment="Center"
           ></TextBlock>

Border넣기

다음 버튼은 Border가 들어가 있습니다. 바로 위의 이미지와 차이 보이시나요? 왼쪽, 위쪽은 흰색 오른쪽, 아래는 회색으로 Border가 들어있습니다. 일단 오른쪽과 같이 Border를 넣어 볼 것입니다.

CornerRadius가 없는 Button

Button은 태생이 모서리가 둥글지 않아서 ControlTemplate을 써서 Border의 '모양'을 가지고 왔습니다. 그래서 Template쪽에 모양을 바꿔줘야 합니다. Border가 나타나게 하려면 두가지 속성을 넣어 주어야 하는데요 BorderBrush와 BorderThickness가 동시에 들어가줘야 합니다. 다음과 같이 ControlTemplate 안쪽의 Border입니다.

<ControlTemplate TargetType="Button">
    <Border Background="{TemplateBinding Background}" CornerRadius="8"
            BorderBrush="DodgerBlue"
            BorderThickness="2">
            <!--중략-->

Border 그라데이션 넣기

Border를 넣었으니 그라데이션을 넣어주도록 하겠습니다.

<ControlTemplate TargetType="Button">
    <Border Background="{TemplateBinding Background}" CornerRadius="8"
            BorderThickness="2">
        <Border.BorderBrush>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="White" Offset="0.0" />
                <GradientStop Color="Gray" Offset="1.0" />
            </LinearGradientBrush>
        </Border.BorderBrush>

레이블에 그라데이션 넣기

레이블 영역에도 그라데이션이 들어가 있습니다. 넣어보겠습니다.

TextBlock을 Border로 감싸줍니다. 그리고 Background를 단색으로 일단 칠해 줍니다.

<Border Grid.Row="1">
    <Border.Background>
        <SolidColorBrush Color="DarkSlateBlue"></SolidColorBrush>
    </Border.Background>
    <TextBlock Text="PushMe"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
    ></TextBlock>
</Border>

여기에서 조금 당황스러운 부분이 오른쪽아래, 왼쪽 아래가 각이 져있습니다. 앞에서도 Row=0의 TextBlock의 상단이 각져있었죠? 같은 문제입니다. 그래서 CornerRadius="0, 0, 8, 8"을 줍니다. 8, 8 이 부분이 왼쪽 아래, 오른쪽 아래 입니다. 8, 8, 8, 8로 주면 둥근 모양이 되겠습니다.

<Border Grid.Row="1" CornerRadius="0, 0, 8, 8">
    <Border.Background>
        <SolidColorBrush Color="DarkSlateBlue"></SolidColorBrush>
    </Border.Background>
    <TextBlock Text="PushMe"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
    ></TextBlock>
</Border>

8, 8, 8, 8
0, 0, 0, 0
0, 0, 8, 8

SolidColorBrush를 LinearGradientBrush로

앞에 버튼 외곽 Border에 썼던 것을 그대로 넣어주겠습니다.

<Border Grid.Row="1" CornerRadius="0, 0, 8, 8">
    <Border.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="White" Offset="0.0" />
            <GradientStop Color="Gray" Offset="1.0" />
        </LinearGradientBrush>
    </Border.Background>
    <TextBlock Text="PushMe"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
    ></TextBlock>
</Border>

그라데이션이 들어갔는데 모양이 조금 다릅니다. 왼쪽위에서 오른쪽 아래로 흰색--> 회색으로 가능 그라데이션인데 우리가 만들고 싶은 것은 위에서 아래로 가는 그라데이션입니다.


오른쪽위 --> 왼쪽 아래	위 --> 아래

EndPoint를 를 1,1에서 0,1로 바꿔줍니다. 0,0에서 시작해서 0,1로 가니까 수직 방향으로 가게 됩니다.

<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
    <GradientStop Color="White" Offset="0.0" />
    <GradientStop Color="Gray" Offset="1.0" />
</LinearGradientBrush>

이제 색상을 바꿔보겠습니다. 파스텔톤 파란색에서 흙빛 파란색으로 가는 색인데 지금은 White, Gray로 되어 있네요.

구글 color picker로 비슷한 색의 16진수 값을 찾아줍니다.

저는 이 두가지 색을 넣었습니다. 더 정확하게 맞추려면 시스템의 Color Picker를 써서 직접 대보면 되는데 일단은 이렇게만 갑니다. 그리고 Foreground색상을 바꿔주면 되겠네요.

<Border Grid.Row="1" CornerRadius="0, 0, 8, 8">
    <Border.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="#545378" Offset="0.0" />
            <GradientStop Color="#47494a" Offset="1.0" />
        </LinearGradientBrush>
    </Border.Background>
    <TextBlock Text="PushMe"
               Foreground="White"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
    ></TextBlock>
</Border>

Row=0에 그라데이션 넣기

지금 Brown으로 해놓은 빨간색 영역에 그라데이션 넣어보겠습니다. 회색에서 시작해서 흰색으로 끝나는 그라데이션 같네요.

Row=0의 Border의 Background에 Gray, White를 위에서 아래로 내려가는 그라데이션을 넣어줍니다.

<Border Grid.Row="0" CornerRadius="8,8,0,0">
    <Border.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="Gray" Offset="0.0" />
            <GradientStop Color="White" Offset="1.0" />
        </LinearGradientBrush>
    </Border.Background>
    <Viewbox Margin="16" Stretch="Uniform">
        <Path Fill="White"
              Data="F0 M11 1 H13 L13.6 3.5 A8.5 8.5 0 0 1 16 4.5 L18.2 3.2 L19.8 4.8 L18.5 7 A8.5 8.5 0 0 1 19.5 9.4 L22 10 V12 L19.5 12.6 A8.5 8.5 0 0 1 18.5 15 L19.8 17.2 L18.2 18.8 L16 17.5 A8.5 8.5 0 0 1 13.6 18.5 L13 21 H11 L10.4 18.5 A8.5 8.5 0 0 1 8 17.5 L5.8 18.8 L4.2 17.2 L5.5 15 A8.5 8.5 0 0 1 4.5 12.6 L2 12 V10 L4.5 9.4 A8.5 8.5 0 0 1 5.5 7 L4.2 4.8 L5.8 3.2 L8 4.5 A8.5 8.5 0 0 1 10.4 3.5 Z M12 7 A4 4 0 1 0 12 15 A4 4 0 1 0 12 7 Z" />
    </Viewbox>
</Border>

조금 비슷해져 가고 있죠? Gray말고 조금 더 밝은 Gray인것 같네요.

LightGray가 조금 더 가까운 것 같습니다.

벡터 이미지 외곽선

그라데이션을 LightGray, White를 넣었더니 벡터이미지가 잘 안보여서 외곽선을 지정 해주겠습니다. 444444로 넣어주는게 보기가 가장 좋아서 넣었구요 Fill은 투명으로 넣었습니다.

<Viewbox Margin="16" Stretch="Uniform">
    <Path Fill="Transparent"
          Stroke="#444444"
          StrokeThickness="0.5"
          StrokeLineJoin="Round"
          Data="F0 M11 1 H13 L13.6 3.5 A8.5 8.5 0 0 1 16 4.5 L18.2 3.2 L19.8 4.8 L18.5 7 A8.5 8.5 0 0 1 19.5 9.4 L22 10 V12 L19.5 12.6 A8.5 8.5 0 0 1 18.5 15 L19.8 17.2 L18.2 18.8 L16 17.5 A8.5 8.5 0 0 1 13.6 18.5 L13 21 H11 L10.4 18.5 A8.5 8.5 0 0 1 8 17.5 L5.8 18.8 L4.2 17.2 L5.5 15 A8.5 8.5 0 0 1 4.5 12.6 L2 12 V10 L4.5 9.4 A8.5 8.5 0 0 1 5.5 7 L4.2 4.8 L5.8 3.2 L8 4.5 A8.5 8.5 0 0 1 10.4 3.5 Z M12 7 A4 4 0 1 0 12 15 A4 4 0 1 0 12 7 Z" />
</Viewbox>

벡터이미지 가운데 색상 지정

Canvas로 감싼 후 가운데 동그라미는 따로 그려줍니다.

<Viewbox Margin="16" Stretch="Uniform">
    <Canvas Width="24" Height="22">
        <Path Fill="DodgerBlue"
              Stroke="#444444"
              StrokeThickness="0.5"
              Data="M12 7 A4 4 0 1 0 12 15 A4 4 0 1 0 12 7 Z" />
        <Path Fill="Transparent"
              Stroke="#444444"
              StrokeThickness="0.5"
              StrokeLineJoin="Round"
              Data="M11 1 H13 L13.6 3.5 A8.5 8.5 0 0 1 16 4.5 L18.2 3.2 L19.8 4.8 L18.5 7 A8.5 8.5 0 0 1 19.5 9.4 L22 10 V12 L19.5 12.6 A8.5 8.5 0 0 1 18.5 15 L19.8 17.2 L18.2 18.8 L16 17.5 A8.5 8.5 0 0 1 13.6 18.5 L13 21 H11 L10.4 18.5 A8.5 8.5 0 0 1 8 17.5 L5.8 18.8 L4.2 17.2 L5.5 15 A8.5 8.5 0 0 1 4.5 12.6 L2 12 V10 L4.5 9.4 A8.5 8.5 0 0 1 5.5 7 L4.2 4.8 L5.8 3.2 L8 4.5 A8.5 8.5 0 0 1 10.4 3.5 Z" />
    </Canvas>
</Viewbox>

TextBlock을 ContentPresenter로 변경

<ContentPresenter 
           HorizontalAlignment="Center"
           VerticalAlignment="Center"
></ContentPresenter>

<Button Content="시스템" FontSize="17" Foreground="White" Style="{StaticResource Button1}" />

네 조금 비슷해진 것 같습니다. 미세 조정은 디자이너님께 부탁 하는걸로 해야겠네요.

End.

WPF ContentPresenter - 모양은 Style이 내용은 내가

KyeongRok Kim — Sat, 25 Apr 2026 09:24:03 +0900

다시 보면서 하기 위해 Window를 추가 해봅니다.

<Window x:Class="CdsHelper.Main.Themes.Views.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:local="clr-namespace:CdsHelper.Main.Themes.Views"
        mc:Ignorable="d"
        Title="Window1" Height="450" Width="800">
</Window>

스타일 선언과 바인딩

<Window.Resources>
    <Style x:Key="Button1" TargetType="Button">
        <Setter Property="Background" Value="DodgerBlue"></Setter>
    </Style>
</Window.Resources>
<Grid>
    <Button Content="ClickMe" Style="{StaticResource Button1}"></Button>
</Grid>

버튼에 ControlTemplate을 Border로 교체

<Grid>
    <Button Content="ClickMe" Style="{StaticResource Button1}">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Border Background="Brown" CornerRadius="10"></Border>
            </ControlTemplate>
        </Button.Template>
    </Button>
</Grid>

여러개의 버튼 넣기

<StackPanel>
    <Button Content="ClickMe" Style="{StaticResource Button1}">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Border Background="Brown" CornerRadius="10"></Border>
            </ControlTemplate>
        </Button.Template>
    </Button>
</StackPanel>

Grid는 전체를 대상으로 하지만 StackPanel은 아닙니다. Grid는 안에 있는 자식 요소를 꽉 채워주지만 StackPanel은 꽉 채우는 개념이 아니기 때문에 Border는 세로 DesiredSize=0이니까 납작해져서 안 보입니다. 그래서 앞에서 했듯이 TextBlock을 넣어주면 TextBlock은 자기 크기의 기본값이 0이 아니기 때문에 표시가 됩니다.

<StackPanel>
    <Button Content="ClickMe" Style="{StaticResource Button1}">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Border Background="Brown" CornerRadius="10">
                    <TextBlock Text="ClickMe"></TextBlock>
                </Border>
            </ControlTemplate>
        </Button.Template>
    </Button>
</StackPanel>

여러개의 버튼

ClickMe버튼 아래에 PressMe버튼을 추가 합니다.

<StackPanel>
    <Button Content="ClickMe" Style="{StaticResource Button1}">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Border Background="Brown" CornerRadius="10">
                    <TextBlock Text="ClickMe"></TextBlock>
                </Border>
            </ControlTemplate>
        </Button.Template>
    </Button>
    <Button Content="PressMe" Style="{StaticResource Button1}">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Border Background="DarkSlateBlue" CornerRadius="10">
                    <TextBlock Text="PressMe"></TextBlock>
                </Border>
            </ControlTemplate>
        </Button.Template>
    </Button>
</StackPanel>

버튼 모양 잡기

위에는 버튼같이 안생겼기 때문에 버튼에 속성을 넣어주겠습니다. Width로 가로 길이를 지정 해주고 텍스트의 가운데 정렬을 위해 TextBlock에 HorizontalAlignment와 VerticalAlignment를 Center로 넣어줍니다.

<Button Content="ClickMe" Style="{StaticResource Button1}"
        Width="120">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="Brown" CornerRadius="10" Padding="12,6">
                <TextBlock Text="ClickMe" HorizontalAlignment="Center"
                                  VerticalAlignment="Center"/>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

Margin으로 위아래 여백 주기

Margin까지 주면 꽤나 버튼 처럼 보입니다.

<Button Content="ClickMe" Style="{StaticResource Button1}"
        Width="120" Margin="0,4">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="Brown" CornerRadius="10" Padding="12,6">
                <TextBlock Text="ClickMe" HorizontalAlignment="Center"
                                  VerticalAlignment="Center"/>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

버튼 그룹에 적용

HorizontalAlignment

그러면 아까 어색했던 모양을 잡아보겠습니다. TextBlock에 VerticalAlignment="Center" 를 넣으면 되겠네요.

VerticalAlignment를 넣으니 위로 치우쳤던 글자가 가운데로 왔습니다.

TextBlock에 Foreground="White"를 넣어서 글자를 하얗게 만들어 줍니다.

Margin

글자가 버튼 안에 너무 딱 붙어있어서 보기 안좋기 때문에 TextBlock기준으로 Margin을 줍니다.

<TextBlock Text="파일 열기" Foreground="White" Margin="6" VerticalAlignment="Center"></TextBlock>

CornerRadius도 너무 과하기 때문에 3으로 줄여서 네모난 모양을 만들어 줍니다. 동그란 느낌을 유지하고 싶다면 10으로 놔두면 됩니다.

<Button x:Name="PART_BtnOpen" Content="파일 열기" Padding="8,4" Margin="0,0,6,0">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="DodgerBlue" CornerRadius="3">
                <TextBlock Text="파일 열기" Foreground="White" Margin="6" VerticalAlignment="Center"></TextBlock>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

이제는 이 스타일을 다른 버튼들에 적용 해보겠습니다.

스타일 추출 및 적용

다시 Window로 돌아가보겠습니다. 코드가 길어져서 일단 버튼 하나만 남겼습니다. 스타일을 Window.Resources로 뽑아봅니다.

<StackPanel>
    <Button Content="ClickMe" Style="{StaticResource Button1}"
            Width="120" Margin="0,4">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Border Background="Brown" CornerRadius="10" Padding="12,6">
                    <TextBlock Text="ClickMe" HorizontalAlignment="Center"
                                      VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Button.Template>
    </Button>
</StackPanel>

Template지정

Background의 경우는 한줄로 Value="Brown"주면 됩니다. 하지만 Template은 값 하나가 아니고 덩어리 입니다.

<Window.Resources>
    <Style x:Key="Button1" TargetType="Button">
        <Setter Property="Background" Value="Brown"/>
        <Setter Property="Template" Value="{ControlTemplate TargetType=Button}">
        </Setter>
    </Style>
</Window.Resources>

이만큼 인데 Value="" 이 한줄로 넣기가 어려운 상황입니다. 이럴 때 <Setter.Value></Setter.Value>로 감싸 주는 것입니다.

Before

<Button.Template>
    <ControlTemplate TargetType="Button">
        <Border Background="Brown" CornerRadius="10" Padding="12,6">
            <TextBlock Text="ClickMe" HorizontalAlignment="Center"
                              VerticalAlignment="Center"/>
        </Border>
    </ControlTemplate>
</Button.Template>

After

Value=""를 <Setter.Value></Setter.Value>로 위아래로 넓게 쓸 수 있게 공간이 확보 되었고 그 안쪽으로 ControlTemplate을 넣어주었습니다. 잘 들어갑니다.

<Style x:Key="Button1" TargetType="Button">
    <Setter Property="Background" Value="Brown"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="Brown" CornerRadius="10" Padding="12,6">
                    <TextBlock Text="PressMe" HorizontalAlignment="Center"
                                      VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

버튼에 스타일 적용

버튼에 있던 속성을 싹 지우고 스타일을 바인딩 해줍니다.

<Window.Resources>
    <Style x:Key="Button1" TargetType="Button">
        <Setter Property="Background" Value="Brown"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Background="Brown" CornerRadius="10" Padding="12,6">
                        <TextBlock Text="PushMe" HorizontalAlignment="Center"
                                          VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<StackPanel>
    <Button Content="ClickMe" Style="{StaticResource Button1}"
            Width="120" Margin="0,4" />
    <Button Content="PressMe" Style="{StaticResource Button1}"
            Width="120" Margin="0,4" />
</StackPanel>

버튼을 하나 추가를 했습니다. <Button Content="ClickMe"/>와 <Button Content="PushMe"/> 이렇게 두개의 버튼에 스타일이 잘 적용된 것을 볼 수 있습니다.

하지만 자세히 보시면 몇 가지 정리가 안된 부분이 있습니다. Background="Brown"이 많이 들어있습니다. Button.Background의 색을 DarkSlateBlue로 바꿔보면 안바뀝니다. 이 속성이 적용되고 있지 않은것입니다. 어디를 바꿔야 하냐면 Border쪽입니다. 그래서 Button쪽은 지우고 Border쪽을 바꿔줍니다.

<Setter Property="Background" Value="DarkSlateBlue"/>

Border Background변경

잘 바뀐 것을 볼 수 있습니다. 하지만 문제는 또 있죠. Content입니다. 버튼 Text가 둘 다 PushMe로 보이고 있습니다. 이유는 Style쪽 TextBlock에 PushMe가 두 버튼에 적용되고 있어서 그렇습니다.

<ControlTemplate TargetType="Button">
    <Border Background="DarkSlateBlue" CornerRadius="10" Padding="12,6">
        <TextBlock Text="PushMe" HorizontalAlignment="Center"
                          VerticalAlignment="Center"/>
    </Border>
</ControlTemplate>

ContentPresenter

<TextBlock Text="PushMe" HorizontalAlignment="Center" VerticalAlignment="Center"/>에 하드코딩 되어 있던 것을 <ContentPresenter>로 바꿔줍니다. <Button Content="ClickMe" 그러면 Style은 Style태그에 있는 스타일이 적용 되면서 출력되는 값은 버튼쪽에 선언된 Content가 출력 됩니다.

<Style x:Key="Button1" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="DarkSlateBlue" CornerRadius="10" Padding="12,6">
                    <ContentPresenter></ContentPresenter>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

정렬과 색상을 지정 해주면 됩니다.

<ContentPresenter TextElement.Foreground="White"
	HorizontalAlignment="Center"
    VerticalAlignment="Center"></ContentPresenter>

WPF Border Radius - Button에 왜 Radius가 없는데?

KyeongRok Kim — Sat, 25 Apr 2026 00:53:31 +0900

Button의 모서리를 둥그스름하게 만들려면 Radius속성을 주어야 합니다. 하지만 WPF의 버튼은 Radius가 없기 때문에 다른 방법을 써야 합니다.

User Control만들기

눈으로 보면서 작업 하기 위해 일단 User Control을 하나 만듭니다.

버튼에 스타일 매핑

UserControl에 Resource로 Style하나 만들어 주고 배경색은 DarkSlateBlue로 합니다. x:Key는 Style1으로 하고 버튼에도 StaticResource로 Style1을 적용 해줍니다.

<UserControl.Resources>
    <Style x:Key="Style1" TargetType="Button">
        <Setter Property="Background" Value="DarkSlateBlue"></Setter>
    </Style>
</UserControl.Resources>

<Grid>
    <Button Content="Button1" Style="{StaticResource Style1}"></Button>
</Grid>

ControlTemplate

이제 드디어 주인공인 ControlTemplate이 나옵니다. ControlTemplate은 컨트롤의 '모든 시각적 구조와 모양'을 정의하는 설계도입니다. WPF 컨트롤은 기능(Logic)과 모양(Visual)이 완벽하게 분리되어 있습니다. ControlTemplate은 오직 '모양'만 담당합니다.

<Button Content="Button1" Style="{StaticResource Style1}">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="Brown"></Border>
        </ControlTemplate>
    </Button.Template>
</Button>

Border를 쓴 이유

앞에서 만들었던 버튼 기억 하시나요? 테두리를 넣을려고 Border를 썼지만 글자를 형광펜으로 칠한 효과가 나왔습니다. 이것은 Button의 Content를 Border로 넣은 것입니다.

<Button Margin="20" Style="{StaticResource ButtonBackground}">
    <Border Background="Red">
        <TextBlock Text="ClickMe"></TextBlock>
    </Border>
</Button>

그래서 이 부분은 Border의 Content를 TextBlock으로 넣은 것입니다.

다음 코드와 동일한 효과 입니다. Button.Content에 Border를 넣은 것입니다.

 <Button>
      <Button.Content>
          <Border Background="Red">
              <TextBlock Text="ClickMe"/>
          </Border>
      </Button.Content>
  </Button>

Button의 Content를 Border로 넣었듯이 이 코드는 Button의 Template을 Border의 그것으로 바꿉니다. 하지만 Template으로 들어갈 수 있는 타입은 ControlTemplate이기 때문에 ControlTemplate이 들어간 것입니다.

CornerRadius

이제 드디어 Radius를 줄 차례입니다. CornerRadius를 3을 줍니다.

<Button Content="Button1" Style="{StaticResource Style1}">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="Brown" CornerRadius="3"></Border>
        </ControlTemplate>
    </Button.Template>
</Button>

이미지의 오른쪽 위에 하얀 부분이 보이나요? 살짝 둥그스름 해졌습니다. 눈에 확 띄게 하기 위해 10을 주겠습니다. 10이면 눈에 좀 띕니다.

그럼 다시 이전에 만들어 놓았던 버튼들에 적용 해보겠습니다.

버튼들에 적용하기

기존에 만들어 놓았던 StaticResource가 Style에 들어가 있습니다. 이걸 빼고 앞전에 적용한 방법으로 Radius를 적용 해보겠습니다.

<Button x:Name="PART_BtnOpen" Content="파일 열기" Padding="8,4" Margin="0,0,6,0" 
        Style="{StaticResource BorderRed}"/>

사라진 버튼

다음과 같이 ControlTemplate을 적용 하면 버튼이 사라집니다.

<Button x:Name="PART_BtnOpen" Content="파일 열기" Padding="8,4" Margin="0,0,6,0">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="DodgerBlue" CornerRadius="10">
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

TextBlock넣어주기

Border안에 TextBlock을 넣어주면 Button에 Radius가 들어갔고 '파일 열기' 글자도 보입니다.

<Button x:Name="PART_BtnOpen" Content="파일 열기" Padding="8,4" Margin="0,0,6,0">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="DodgerBlue" CornerRadius="10">
                <TextBlock Text="파일 열기"></TextBlock>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

그런데 글자가 위쪽으로 올라갔고 버튼에서도 벗어났습니다. 갈길이 머네요. 다음 포스트에서 계속 하겠습니다.

WPF Button Border - 대충 만든 것 처럼 보이는 버튼 정성스럽게

KyeongRok Kim — Sat, 25 Apr 2026 00:53:09 +0900

버튼이 이렇게 기본 값으로 올라가 있으면 요즘은 아무리 잘만든 앱이라도 슥 보고 별로라고 생각을 합니다. 워낙 코드가 쉬워지기도 했으니까요. 그런데 WPF는 현시점 2026년 4월인데 클로드 같은 에이전트가 잘못만드는 것 같습니다.

이게 클로드가 만든건데 단순히 예쁘게 만들어라고 하면 엉뚱하게 자꾸 만들거든요.

Border적용하기

일단은 앞에서 배운 Border를 적용 해봅니다.

아래는 오리지널 코드 입니다.

<Button x:Name="PART_BtnZoomIn" Content="+" Width="28" Height="28" FontSize="16" FontWeight="Bold" Margin="4,0,2,0" ToolTip="확대"/>

앞에서 배운 Border를 주는거죠. 일단은 잘 보이게 빨강으로요.

<Button x:Name="PART_BtnZoomIn" Content="+" Width="28" Height="28" FontSize="16" FontWeight="Bold" Margin="4,0,2,0" ToolTip="확대">
    <Button.BorderBrush>
        <SolidColorBrush Color="Red"></SolidColorBrush>
    </Button.BorderBrush>
</Button>

넣었는데 버튼이 많은 화면입니다.

다음과 같이 버튼이 많습니다.

<Button x:Name="PART_BtnOpen" Content="파일 열기" Padding="8,4" Margin="0,0,6,0"/>
<Button x:Name="PART_BtnReloadPalette" Content="팔레트" Padding="8,4" Margin="0,0,6,0"
        ToolTip="지도 색상 팔레트를 편집합니다 (컬러 피커 다이얼로그)"/>
<Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" Margin="4,2"/>
<Button x:Name="PART_BtnZoomIn" Content="+" Width="28" Height="28" FontSize="16" FontWeight="Bold" Margin="4,0,2,0" ToolTip="확대">
    <Button.BorderBrush>
        <SolidColorBrush Color="Red"></SolidColorBrush>
    </Button.BorderBrush>
</Button>
<Button x:Name="PART_BtnZoomOut" Content="-" Width="28" Height="28" FontSize="16" FontWeight="Bold" Margin="2,0,2,0" ToolTip="축소"/>
<Button x:Name="PART_BtnZoomReset" Content="1:1" Height="28" Padding="6,0" Margin="2,0,6,0" ToolTip="원본 크기"/>
<Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" Margin="4,2"/>
<CheckBox x:Name="PART_ShowDiscoveries" Content="발견물" VerticalAlignment="Center" Margin="0,0,8,0" IsChecked="True"/>
<CheckBox x:Name="PART_ShowCityLabels" Content="도시명" VerticalAlignment="Center" Margin="0,0,8,0"/>
<CheckBox x:Name="PART_HideFound" Content="미발견만" VerticalAlignment="Center" Margin="0,0,8,0"/>
<CheckBox x:Name="PART_ShowSpeed" Content="속도" VerticalAlignment="Center" Margin="0,0,8,0" ToolTip="이동 경로에 구간 속도 표시"/>
<!--중략-->

버튼 3개만 적용 했는데 현타 옵니다. 일단 버튼이 많이 남아 있구요 단순히 빨간색 테두리만 쳐놓으면 더 만들다 만 것 같으니까요.

<Button x:Name="PART_BtnOpen" Content="파일 열기" Padding="8,4" Margin="0,0,6,0">
    <Button.BorderBrush>
        <SolidColorBrush Color="Red"></SolidColorBrush>
    </Button.BorderBrush>
</Button>
<Button x:Name="PART_BtnReloadPalette" Content="팔레트" Padding="8,4" Margin="0,0,6,0"
        ToolTip="지도 색상 팔레트를 편집합니다 (컬러 피커 다이얼로그)">
    <Button.BorderBrush>
        <SolidColorBrush Color="Red"></SolidColorBrush>
    </Button.BorderBrush>
</Button>
<Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" Margin="4,2"/>
<Button x:Name="PART_BtnZoomIn" Content="+" Width="28" Height="28" FontSize="16" FontWeight="Bold" Margin="4,0,2,0" ToolTip="확대">
    <Button.BorderBrush>
        <SolidColorBrush Color="Red"></SolidColorBrush>
    </Button.BorderBrush>
</Button>

바이브코딩을 당연히 해서 물어보면 되지만 UI작업은 Cost가 엄청 높습니다. 어차피 Max Plan같은거 쓰면 비용이 더 늘어나진 않는데 시간이 오래걸려요. 이 간단한것 답변 하는데 27초가 뭡니까 토큰도 1000개 넘게 썼네요. 토큰 문제가 아니고 우리에게 시간은 곧 비용입니다. 물론 인터넷 서칭 해서 하는것에 비하면 빠른데 점점 딮하고 깔끔하게 들어갈 수록 이 비용이 증가 합니다.

스타일 선언 하기

그래서 앞에서 했던 것 처럼 스타일로 뽑아보겠습니다.

참고로 지금 고치는 기능은 ResourceDictionary라고 CustomControl로 정의한 MenuBar입니다. Style 설명 하고 있으니까 여기에서는 ResourceDictionary에서 다루지는 않습니다. 바로 스타일 선언 해보겠습니다.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:views="clr-namespace:CdsHelper.Main.UI.Views">

앞에서 써봤던 x:Key로 BorderRed로 선언 해줍니다. 그리고 버튼에 붙일것이기 때문에 TargetType을 버튼으로 넣어 줍니다.

<Style x:Key="BorderRed" TargetType="Button"></Style>

스타일 적용

기존 버튼에 스타일을 적용 해줍니다. 파일 열기 버튼입니다.

Aefore

<Button x:Name="PART_BtnOpen" Content="파일 열기" Padding="8,4" Margin="0,0,6,0">
    <Button.BorderBrush>
        <SolidColorBrush Color="Red"></SolidColorBrush>
    </Button.BorderBrush>
</Button>

After

<Button x:Name="PART_BtnOpen" Content="파일 열기" Padding="8,4" Margin="0,0,6,0" 
        Style="{StaticResource BorderRed}"/>

스타일은 적용 했지만 빨간 테두리는 빠졌죠? 스타일 다시 넣어주겠습니다. 이번에는 파란색으로

위에 파란색 글자가 비슷한 색을 찾아보니 DodgerBlue라서 적용 해보았습니다. 테두리가 파란색으로 바뀌었습니다. 나머지 버튼들에도 적용 해봅니다.

<Style x:Key="BorderRed" TargetType="Button">
    <Setter Property="BorderBrush" Value="DodgerBlue"></Setter>
</Style>

Style=하고 StaticResource로 BorderRed지정 했습니다.

<Button x:Name="PART_BtnOpen" Content="파일 열기" Padding="8,4" Margin="0,0,6,0" 
        Style="{StaticResource BorderRed}"/>
<Button x:Name="PART_BtnReloadPalette" Content="팔레트" Padding="8,4" Margin="0,0,6,0"
        ToolTip="지도 색상 팔레트를 편집합니다 (컬러 피커 다이얼로그)" 
        Style="{StaticResource BorderRed}"/>
<Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" Margin="4,2"/>
<Button x:Name="PART_BtnZoomIn" Content="+" Width="28" Height="28" FontSize="16" FontWeight="Bold" Margin="4,0,2,0" ToolTip="확대"
        Style="{StaticResource BorderRed}"/>
<Button x:Name="PART_BtnZoomOut" Content="-" Width="28" Height="28" FontSize="16" FontWeight="Bold" Margin="2,0,2,0" ToolTip="축소"
        Style="{StaticResource BorderRed}"/>
<Button x:Name="PART_BtnZoomReset" Content="1:1" Height="28" Padding="6,0" Margin="2,0,6,0" ToolTip="원본 크기"
        Style="{StaticResource BorderRed}" />

배경 칠하기 - Background

버튼에 테두리만 칠한다고 UI가 갑자기 성의있어보이진 않습니다. 아직도 되는대로 만든 것 같죠? 배경도 깔아보겠습니다. 배경은 Background속성입니다.

<Style x:Key="BorderRed" TargetType="Button">
    <Setter Property="BorderBrush" Value="DodgerBlue"></Setter>
    <Setter Property="Background" Value="DodgerBlue"></Setter>
</Style>

네 좀 나아 졌나요? 아직 별로입니다. 조금 예쁜 버튼이 있습니다.

살펴보니 다음 3가지 특성이 있네요.

모서리를 둥글게 해주고
색이 조금 진하고
글자가 하얀색

스타일을 공통으로 뽑아 놓으니 한번에 넣어볼 수 있겠죠? 하지만 1번 모서리를 둥글게 하는건 Border Radius인데 아쉽게도 Button은 Radius속성이 없습니다. 일단 글자색 Foreground부터 흰색으로 바꿔보죠.

<Style x:Key="BorderRed" TargetType="Button">
    <Setter Property="BorderBrush" Value="DodgerBlue"></Setter>
    <Setter Property="Background" Value="DodgerBlue"></Setter>
    <Setter Property="Foreground" Value="AliceBlue"></Setter>
</Style>

잘 바뀌었고 조금은 자연스러운 모양이 되었습니다. Radius는 다음 포스에서 계속.

WPF Border - 제품과 습작 차이는 디테일에서

KyeongRok Kim — Sat, 25 Apr 2026 00:15:06 +0900

Border

Border는 경계죠 멋진 버튼과 제품과 습작을 구분 짓는 경계이기도 합니다. 잘 넣으면 제품이 되고 대충 넣으면 습작이죠.

다음과 같이 ClickMe버튼에 빨간 Border를 넣으려고 했지만 안됩니다.

<Button Content="ClickMe" Margin="20" Style="{StaticResource ButtonBackground}">
    <Border Background="Red"></Border>
</Button>

Property Content is set more than once 프로퍼티 속성은 한개밖에 못넣는답니다. 앞에 Resoruces에는 Style도 두개 들어가고 StackPanel은 Button두개에 TextBlock까지 들어가는데 버튼에는 Border하나가 안들어가죠.

그래서 Button에 Border를 넣는 방법은 다음과 같이 Border를 넣고 Button에 있던 Content를 빼고 TextBlock을 넣는 방법이 있습니다.

<Button Margin="20" Style="{StaticResource ButtonBackground}">
    <Border Background="Red">
        <TextBlock Text="ClickMe"></TextBlock>
    </Border>
</Button>

근데 결과는 테두리를 넣으려고 했는데 좀 다르죠?

그래서 Border를 넣으려면 BorderThickness와 BorderBrush를 써야 합니다.

<Button BorderThickness="1" BorderBrush="Red"
    Margin="20" Style="{StaticResource ButtonBackground}">
    <TextBlock Text="ClickMe"></TextBlock>
</Button>

Border하나 넣기 참 힘들죠? 요즘같이 바이브코딩으로 프롬프트로 때려 넣는 시대에 Border한땀 한땀 깎고 있으면 여태 줄 한바퀴 넣었다고 팀장님이 뭐라 할 수도 있는 딜레마가 있습니다. 하지만 Border는 정말 중요합니다.

Border에 그라데이션

백마에 까만 줄무늬를 넣으면 얼룩말이죠. 버튼이 갑자기 있어보이는 시점이 그라데이션을 넣는 시점부터입니다. 이 기능 때문에 WPF를 쓰는게 아닌가 싶을 정도 입니다.

<Button Content="GradationBorderButton" Margin="15">
    <Button.BorderBrush>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
            <GradientStop Color="#FF6B9D" Offset="0"/>
            <GradientStop Color="#4A90E2" Offset="1"/>
        </LinearGradientBrush> 
    </Button.BorderBrush>
</Button>

앞에 코드에서 BorderBursh라는 속성을 썼었죠? 이게 Inline에 들어가 있던 것을 자세히 작성 하기 위해서 블럭으로 빼주는 것입니다.

<Button BorderThickness="1" BorderBrush="Red"

BorderBrush인라인 속성을 지우고 하위 블럭으로 뺍니다.

<Button Content="GradationBorderButton" Margin="15">
    <Button.BorderBrush>
    </Button.BorderBrush>
</Button>

위에 빨간 테두리는 다음과 같이 재현 할 수 있습니다.

<Button BorderThickness="1"
    Margin="20" Style="{StaticResource ButtonBackground}">
    <Button.BorderBrush>
        <SolidColorBrush Color="Red"/>
    </Button.BorderBrush>
    <TextBlock Text="PressMe"></TextBlock>
</Button>

WPF Style - 버튼 두개 보이고 스타일 여러버튼에 적용하기

KyeongRok Kim — Fri, 24 Apr 2026 23:46:36 +0900

이전 글에서 이어지는 포스트 입니다.

사라진 ClickMe

ClickMe가 사라졌죠? 처음에는 PressMe가 안나오는 줄 알았습니다.

<Grid>
    <Button Content="ClickMe" Margin="20">
        <Button.Style>
            <Style TargetType="Button">
                <Setter Property="Background" Value="Black"></Setter>
            </Style>
        </Button.Style>
    </Button>
    <Button Content="PressMe" Margin="15">

    </Button>
</Grid>

문제는 Grid가 문제였구요 Grid에서 뒤에 나온게 앞에 나온 것을 덮어버린 것이죠.

<Grid>를 <StakePanel>로 바꾸니까 둘다 나오기 시작 했습니다.

<StackPanel>
    <Button Content="ClickMe" Margin="20">
        <Button.Style>
            <Style TargetType="Button">
                <Setter Property="Background" Value="Black"></Setter>
            </Style>
        </Button.Style>
    </Button>
    <Button Content="PressMe" Margin="15">

    </Button>
</StackPanel>

버튼 두개에 같은 스타일 적용하기

그러면 지금 버튼 두개인데 버튼마다 스타일을 주기 불편하죠 스타일 하나 정해서 쓰고 싶다는거죠. 다음과 같이 버튼의 배경을 Black, Blue로 주는 경우는 그냥 주면 되는데 스타일 하나 주는데 7줄씩 들어갑니다. 나중에 디테일하게 들어가면 감당이 안되죠

<StackPanel>
    <Button Content="ClickMe" Margin="20">
        <Button.Style>
            <Style TargetType="Button">
                <Setter Property="Background" Value="Black"></Setter>
            </Style>
        </Button.Style>
    </Button>
    <Button Content="PressMe" Margin="15">
        <Button.Style>
            <Style TargetType="Button">
                <Setter Property="Background" Value="Blue"></Setter>
            </Style>
        </Button.Style>
    </Button>
</StackPanel>

x:Key로 명명 후 StaticResource로 참조

x:Key는 Resource의 이름이라고 할 수 있습니다. 아래에서는 UserControl.Resources를 이용해 리소스를 선언을 하는데요 여기에서 그 이름이 x:Key 되겠습니다. ButtonBackground라는 이름으로 x:Key를 지정 했습니다. 그리고 Button의 Style속성에 StaticResource에 지정을 해줍니다.

<UserControl.Resources>
    <Style x:Key="ButtonBackground">
        <Setter Property="Background" Value="Pink"></Setter>
    </Style>
</UserControl.Resources>

<StackPanel>
    <Button Content="ClickMe" Margin="20" Style="{StaticResource ButtonBackground}">
    </Button>
    <Button Content="PressMe" Margin="15">
    </Button>
</StackPanel>

Pink색이 적용이 되어야 하는데 안되고있죠?

TargetType

TargetType을 안줘서 그렇습니다. TargetType="Button" 이걸 빼먹어서요.

<Style x:Key="ButtonBackground" TargetType="Button">
    <Setter Property="Background" Value="Pink"></Setter>
</Style>

Html, Css였으면 그냥 됐을 수도 있는데 WPF는 꽤 정교해서 그런거 없습니다.

이 때문에 다음과 같이 TextBlock이 하나 있는데 여기에 배경을 또한 Pink로 넣고 싶을 때 앞에서 선언한 ButtonBackground를 못 쓰겠죠? 왜냐하면 TargetType이 Button이니까요. 이것은 입문에는 단점일 수 있지만 앱이 고도화 되면 장점 입니다.

<Button Content="ClickMe" Margin="20" Style="{StaticResource ButtonBackground}">
</Button>
<Button Content="PressMe" Margin="15">
</Button>
<TextBlock Text="Bye"></TextBlock>

같은 속성을 다른 TargetType으로

다음 코드에서는 UserControl.Resource에 Background라는 스타일을 추가 했습니다. 이름이 Background인데 옆에 TargetType이 있으니까 이름을 꽤 단순하게 정해도 정확한 위치에 넣을 수 있습니다.

<UserControl.Resources>
    <Style x:Key="ButtonBackground" TargetType="Button">
        <Setter Property="Background" Value="Pink"></Setter>
    </Style>
    <Style x:Key="Background" TargetType="TextBlock">
        <Setter Property="Background" Value="Pink"></Setter>
    </Style>
</UserControl.Resources>

<StackPanel>
    <Button Content="ClickMe" Margin="20" Style="{StaticResource ButtonBackground}">
    </Button>
    <Button Content="PressMe" Margin="15">
    </Button>
    <TextBlock Text="Bye" Style="{StaticResource Background}"></TextBlock>
</StackPanel>

x:Key 중복은 불허한다

다음과 같이 TargetType이 다르면 중복이 될 것 같지만 안됩니다. 불가합니다.

<Style x:Key="Background" TargetType="Button">
    <Setter Property="Background" Value="Pink"></Setter>
</Style>
<Style x:Key="Background" TargetType="TextBlock">
    <Setter Property="Background" Value="Pink"></Setter>
</Style>

TargetType이 안맞는 것도 불허 합니다. ButtonBackground는 TargetType이 Button이기 때문에 TextBlock에는 바인딩이 안되는바입니다.

<Button Content="ClickMe" Margin="20" Style="{StaticResource ButtonBackground}">
</Button>
<Button Content="PressMe" Margin="15">
</Button>
<TextBlock Text="Bye" Style="{StaticResource ButtonBackground}"></TextBlock>

WPF UserControl에 버튼 만들고 스타일 정의

KyeongRok Kim — Fri, 24 Apr 2026 23:24:59 +0900

요즘 바이브코딩으로 죄다 만들어서 한땀한땀 코딩하는 수요가 많이 줄었습니다. 하지만 고객이 쓸 제품의 디테일을 잡을 때는 결국 인간 손이 필요하구요 숙련자가 딸깍이면 되는거 AI로 한시간쯤 이거 아니고 저렇게고 이게 아니고 저부분이고 이런식으로 설명해서 떡져있지만 돌아가는 코드 하나 얻을 수 있는 경우도 있습니다. 그래서 코딩이 아직 의미가 있구요.

UserControl을 만들어야 위지윅으로 보면서 만들 수 있습니다. 익숙하기 전부터 CustomControl로 넘어가면 손에 익히기도 전에 기능으로 추상화로 넘어가니까 어질어질 합니다.

UserControl만들기

Margin

가장 많이 쓰는 Margin입니다. 버튼의 바깥쪽에 여백을 주는 기능입니다.

<Button Content="ClickMe" Margin="20" />

Background

버튼 하나에 스타일을 줄 수 있습니다.

<Button Content="ClickMe" Margin="20">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Black"></Setter>
        </Style>
    </Button.Style>
</Button>

WPF 창 크기, 시작위치 조정

KyeongRok Kim — Wed, 22 Apr 2026 10:11:15 +0900

크기 1024*768

시작위치 0, 0

using System.Windows;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using KrkTemplateProject.Forms;
using KrkTemplateProject.Forms.UI.Views;
using KrkTemplateProject.Forms.ViewModels;

namespace KrkTemplateProject;

public class App : Application
{
    private IHost? _host;

    public static IServiceProvider? ServiceProvider { get; private set; }

    protected override void OnStartup(StartupEventArgs e)
    {
        base.OnStartup(e);

        _host = Host.CreateDefaultBuilder()
            .ConfigureServices((context, services) =>
            {
                ConfigureServices(services);
            })
            .Build();

        ServiceProvider = _host.Services;
        AppServices.Current = _host.Services;

        var mainWindow = ServiceProvider.GetRequiredService<MainWindow>();
        mainWindow.WindowStartupLocation = WindowStartupLocation.Manual;
        mainWindow.Left = 0;
        mainWindow.Top = 0;
        mainWindow.Width = 1024;
        mainWindow.Height = 768;
        mainWindow.Show();
    }

    protected override void OnExit(ExitEventArgs e)
    {
        _host?.Dispose();
        base.OnExit(e);
    }

    private void ConfigureServices(IServiceCollection services)
    {
        services.AddSingleton<MainWindowViewModel>();
        services.AddSingleton<MainWindow>();
    }
}

PowerShell에 git branch보이게 하기

KyeongRok Kim — Mon, 13 Apr 2026 10:23:51 +0900

PowerShell에서 git branch가 표시 되도록 기능 추가 하는 방법

주요 기능

프롬프트 정보
  - 브랜치명 표시
  - +2 ~1 -0 형태로 staged/modified/deleted 파일 수
  - !2 untracked 파일 수
  - ↑2 ↓1 remote와의 ahead/behind 커밋 수

  Tab 자동완성
  - git ch + Tab → checkout, cherry-pick 등 자동완성
  - 브랜치명 자동완성: git checkout  + Tab
  - 원격 브랜치, 태그, 스태시 이름도 자동완성

  프롬프트 예시
  C:\repo [main ≡ +1 ~2 -0 !3]>
  - ≡ 동기화됨
  - ↑1 1커밋 ahead
  - ↓2 2커밋 behind

posh-git설치

Install-Module posh-git -Scope CurrentUser

실행 정책 이슈

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

Import-Module posh-git
Add-PoshGitToProfile -AllHosts

용어 정리 - C#

KyeongRok Kim — Wed, 8 Apr 2026 09:12:46 +0900

Dispatcher

UI 스레드에서 코드를 실행시켜주는 도구입니다.

WPF/WinForms에서 백그라운드 스레드가 UI 컨트롤을 건드리면 크래시가 나는데, 이걸 해결합니다.

// 백그라운드 스레드에서 UI 업데이트할 때
Application.Current.Dispatcher.Invoke(() =>
{
    myLabel.Content = "업데이트됨";
});

핵심: "UI 스레드야, 이거 대신 실행해줘"

Dispose

비관리 리소스(파일, DB 연결, 소켓 등)를 명시적으로 해제하는 메서드입니다.

IDisposable 인터페이스를 구현하면 using 문을 쓸 수 있습니다.

// using 블록이 끝나면 자동으로 Dispose() 호출됨
using (var conn = new SqlConnection(connStr))
{
    // DB 작업
} // 여기서 conn.Dispose() 자동 호출

// 또는 직접 호출
var stream = new FileStream("file.txt", FileMode.Open);
stream.Dispose();

핵심: "다 썼으니 메모리/리소스 정리해"

Delegate

메서드를 변수처럼 담아서 전달할 수 있는 타입입니다.

// delegate 선언
delegate int 계산기(int a, int b);

// 사용
계산기 더하기 = (a, b) => a + b;
Console.WriteLine(더하기(3, 5)); // 8

// 실제로는 Action / Func 많이 씀
Action<string> 출력 = msg => Console.WriteLine(msg);
Func<int, int, int> 곱하기 = (a, b) => a * b;

이벤트(event)도 내부적으로 delegate 기반입니다.

핵심: "메서드를 값처럼 저장하고 넘기는 것"

Invoke

Marshaling

**마샬링(Marshaling)**은 한 스레드에서 다른 스레드로 작업을 넘겨서 실행하는 것입니다.

TryParse 패턴

실패가 정상적인 경우 TryParse를 쓰고 실패가 버그/예외인 경우 Parse를 씁니다.

 if (int.TryParse(input, out int result))
  {
      Console.WriteLine($"성공: {result}");
  }
  else
  {
      Console.WriteLine("실패");
  }

인라인 방식 선언과 동시에 사용

// 전통적 방식
int result;
int.TryParse("42", out result);

// 인라인 선언 (권장)
int.TryParse("42", out int value);

AI로 자율주행 만들기 on 게임 - 1편 좌표 인식

KyeongRok Kim — Sun, 29 Mar 2026 20:04:05 +0900

대항해시대3 라는 1997년에 출시된 게임을 대상으로 AI모델을 만들어 보는 과정을 기록 해보겠습니다.

게임에서 이동을 하면 아래 빨간줄 친 위도 경도가 바뀌는데요 이것을 인식 해서 자동으로 이동하도록 하는 기능을 구현 해볼 것입니다.

먼저 이미지에서 위도 경도를 인식하는 모델을 만들려고 합니다.

목표

이 게임에서 자동플레이에 꼭 필요한 것은 위도 경도를 보고 배나 말을 이동 시키는 것 입니다. 이동은 마우스 또는 키보드로 8개 방향 중 하나를 정해주면 알아서 이동 합니다.

학습 시키기

이 부분을 학습 시켜야 하는데요 학습시켜서 뭘 만들거냐면 위도가 북위인지 남위인지, 경도가 서경인지 동경인지 각각 값이 얼마인지를 인식하는 모델을 만들 것입니다.

이미지에서 문자와 숫자를 인식 해주는 모델을 써서 1초에 한번씩 게임화면을 찍어서 만든 스샷을 라벨링 한 후에 학습을 시키면 될 것 같다는 생각이 들었습니다.

AI 플랜

위 내용을 입력하니 AI가 플랜을 짜줍니다.

기존 OCR 모델로 자동 라벨링 → TorchSharp CNN 학습

  전체 파이프라인

  [1단계] 데이터 수집
    - 항해 중 1초마다 상단바 좌표 영역만 크롭하여 저장

  [2단계] 자동 라벨링 (기존 OCR 모델 활용)
    - Windows.Media.Ocr (한국어 지원, 별도 설치 불필요)
      또는
    - Tesseract.NET (NuGet: Tesseract)
    → 크롭 이미지에서 "북위 38 서경 10" 텍스트 추출
    → CSV로 저장: image_path, lat_dir(N/S), lat_val, lon_dir(E/W), lon_val

  [3단계] TorchSharp CNN 모델 학습
    - 입력: 크롭된 좌표 영역 이미지 (약 150x20 픽셀)
    - 출력: [lat_dir(2), lat_val(91), lon_dir(2), lon_val(181)]
    - 분류 문제로 풀기 (방향 2클래스 + 숫자 0~90/0~180 클래스)

  [4단계] 추론
    - AutoPlayService에서 TorchSharp 모델 로드 → 실시간 좌표 인식

ROI(Region of Interest 관심 영역)

북위 또는 남위를 기준으로 좌표를 찾아서 인식을 하기 위해서는 저 글자가 화면상에 어디에 위치 하는지를 먼저 찾아야 합니다.

상단바 이미지 수집

라벨링

ai가 추천 해준 대로 윈도 ocr로 했습니다.

학습

위에서 수집하고 라벨링 한 데이터로 학습 시켰습니다.

결과

결과가 너무 안좋아서 모델 안쓰고 라벨링 할때 썼던 OCR로 했습니다. 인식이 잘 되고 있습니다.

다음으로는 자동으로 방향을 정하는 모델을 만들어 봐야겠네요.

AI로 대항해시대3 원하는 지력 나올때 까지 누르는 기능 학습

KyeongRok Kim — Sat, 28 Mar 2026 12:19:54 +0900

목표

원하는 지력이 나올 때 까지 버튼을 누르는 모델을 만듭니다.

게임으로 '학습'이 무엇인지 정의 해봅니다.

게임 설명

대항해시대로 가서 발견물을 발견하는 게임입니다. 여기에서 캐릭터를 만들 때 능력치를 좋게 만들 수가 있습니다. 지력이 높으면 좋은데요 지력은 주사위를 굴리면 올라갑니다.

중요한 것은 이 부분 입니다. 50으로 되어있는데 왼쪽이 5이고 오른쪽이 0입니다. 이 부분이 바뀌는데 학습을 시킬건 뭐가 5이고 뭐가 0인지 숫자를 학습 시키면 되겠죠

이런 힌트를 줬더니 AI가 더 좋은 아이디어를 내놓죠 화면에 다른 영역에도 숫자가 보이는데 0,1,4,5,7,8,9 까지 보이니까 버튼 한번 더 누르면 주사위를 다시 굴려서 다른 숫자가 나올테니 자기가 버튼을 눌러서 모든 숫자를 학습 하게끔 만든답니다.

앱을 수정 해줬는데요 화면에 나오는 숫자를 입력하면 자기가 학습 하겠다고 합니다.

인식한 영역을 표시 해달라고 했더니 초록색, 파란색은 맞게 했지만 숫자 영역인 빨간색은 빗나가있는 것이 확인

처음 이미지 인색 했을 때 비율을 잘못 지정 한 것으로 보여서 수정 합니다.

가중치 조절을 직접 해서 소스코드를 수정한 결과

인식 결과

이제는 모델이 숫자를 인식 하게 되었습니다.

리롤

원하는 목표치에 도달할 때까지 사냥꾼 버튼을 눌러서 리롤 하도록 앱을 만듭니다.

30세 지력 최고 능력치

지력 76에 보너스포인트 20으로 150회 걸렸습니다.

시도2

매력이 높게 나와서 조금 아쉽네요.

시도6

매력이 거의 필요가 없으므로 낮게 나올 수록 좋습니다.

시도20

운을 70이상으로 찾으려고 했는데요 체력이 너무 낮게 나오네요

시도25

체력은 60이상, 운을 70이상 놓고 뽑았습니다. 이정도면 거의 최상이지 않나 싶네요.

AI개발은 앱 개발하는 과정과 비슷하다

KyeongRok Kim — Thu, 26 Mar 2026 17:37:36 +0900

AI라는 비교적 새로 나온것이 트렌드가 되었습니다. 새로 나온 것이다 보니 미지의 영역이라는 생각을 많이들 갖고 계신 것 같다는 생각이 많이 듭니다. 새로 나왔다기 보다는 대중화된게 비교적 최근이라는 것이 더 정확하겠지만요.

AI는 논문을 많이 읽으면서 개발을 하는데요 AI논문이 개발하는 과정과 크게 다를바가 없습니다. OOP나 디버깅, 앱 설계, DB설계, 알고리즘, 프레임웍 구조 등 계속 해오던 것 들을 이해 한다면 거기에서 많은 데이터와 GPU를 곁들이면 AI모델입니다.

많은 AI논문의 구조는 다음과 같습니다.

어떤 문제가 있었다

어떤 모델을 썼다

어떤 아이디어를 NN으로 구현 했다

어떤 데이터를 이용했다

전처리를 어떻게 했다

결과가 몇%나왔다

AI로 다 해결 하려면 어려운데 개발이 들어가주면 현장의 문제와 ML모델의 출력 계층을 연결 할 수 있습니다.

참고 논문들입니다. 이 논문들을 쉽게 썼다는 것이 아니고 우리가 현업에서 겪는 문제와 풀어내는 과정이 비슷하다는 것입니다.

https://scienceon.kisti.re.kr/srch/selectPORSrchArticle.do?cn=JAKO201909358629867&dbt=NART

https://scienceon.kisti.re.kr/commons/util/originalView.do?cn=JAKO202005653789386&oCn=JAKO202005653789386&dbt=JAKO&journal=431883

라즈베리파이5+oqlink+Nvidia Graphic카드

KyeongRok Kim — Thu, 26 Mar 2026 14:48:45 +0900

라즈베리파이 + eGPU를 써서 Linux에서 사용하는 비디오입니다. Edge Device에서도 그래픽 카드를 사용할 각이 보이고 있네요.

https://www.youtube.com/watch?v=GRUBw0TLpLs

1D CNN의 활용

KyeongRok Kim — Wed, 25 Mar 2026 11:51:16 +0900

1D CNN이란?

1차원에서 CNN하는 것. CNN은 2D CNN이 유명한데 이미지를 인식하는 기술이 CNN입니다.

https://gmnam.tistory.com/274#google_vignette

1D Convolutional Neural Network 이해하기 (CNN in numpy & keras)

목차 도입 머신러닝 분야에서 예측 모델을 만드는데 가장 많이 사용되는 신경망 모델은 바로 Convolutional Neural Network(CNN)일 것이다. CNN은 특히 이미지 분류에서 높은 정확도를 보이며 많은 예측 모

gmnam.tistory.com

1D CNN은 이런 파형 형태로 되어있는 신호에서 특징을 찾아낼 때 주로 쓰입니다.

VR 탁구로 이제 탁구 입문도 가능 합니다.

KyeongRok Kim — Mon, 19 Jan 2026 00:40:53 +0900

저는 탁구를 좋아하는데요 잘 치지는 못 합니다. 레슨도 꽤 오래 받았는데 잘 안늘더라구요. 그리고 커뮤니티 활동 하는데 감정도 많이 써야 해서 피곤하구요.

그런던차에 VR로 탁구를 칠 수 있다는 것을 알게 되었습니다. 동네에 VR방이 있는데 거기에 메타퀘스트3가 있어서 탁구도 있나 싶어서 찾아보니까 있더라구요.

가상현실이 얼마나 실제같겠느냐 싶지만 쳐보니가 정말 실제 같습니다. 스핀도 똑같이 들어가고 제가 쓰던 기술 똑같이 다 구현이 됩니다. 제가 실수하는 것도 거의 비슷한 결과가 나옵니다.

VR머신 메타퀘스트3 75만원쯤 합니다. 메타퀘스트2는 당근에 꽤 보이는데 15만원 정도에 구매 가능 합니다(26년 1월 기준). 탁구장 월 10만원쯤 합니다. 왔다갔다 해야 하구요. 초보자는 잘 상대를 안해주고 회원님들하고 친하게도 지내야 하고 저같이 소심한 사람들은 다니기 쉽지 않습니다. 그래서 바로 구매를 했습니다. 배송까지는 1주일 남았습니다.

이 게임 고인물은 아마 실전에서도 고인물일 것입니다. 완전 넓은 공간을 왔다갔다 하면서 친다면 많이 다르겠지만 초보자들이 입문하기는 더 없이 좋을 것 같네요.

VR은 왼쪽과 같은 컨트롤러를 들고 해야 하는데 탁구채 같은 어댑터가 있습니다. 이걸 쓰면 오른쪽 처럼 탁구채 처럼 쥐고 칠 수 있습니다. 저도 구매 해볼 예정입니다.

.Net MAUI할 때 개발 환경 설정 .Rider

KyeongRok Kim — Thu, 15 Jan 2026 10:26:38 +0900

개발환경 구축 할 때 시간이 한 30분 넘게 걸리는 것.

WPF 같은 경우 git clone후에 바로 dotnet build;dotnet run 하면 실행 되는데 MAUI는 워크로드 설치 해주고 안드로이드SDK도 설치 해주어야 합니다. ㅜㅜ

dotnet workload 설치

.NET Multi-Platform App UI 설치

Android SDK설치

AI와 함께하는 D형 큐티 - 딤전 3:1-7

KyeongRok Kim — Mon, 12 Jan 2026 01:53:47 +0900

2026년부터 저는 새로운 팀으로 옮기게 되었습니다. 24-25년 2년간 몸 담았던 팀에서 적응하지 못하고 떨어져 나와 제가 겪은 리더쉽에 대한 문제 때문에 팀을 옮겼습니다.

전 팀장님과의 문제도 있었고 제가 동료들에게 리더쉽을 제대로 발휘하지 못한 두가지 문제 때문이었습니다. 제 문제는 개발은 잘 해서 성과는 냈지만 리더쉽은 부족한 문제가 있습니다. 그래서 일은 잘 해놓고 항상 좋은 소릴 못 듣고 있습니다. 이 문제는 제 커리어 내내 해결을 못 하고 있는 문제입니다.

전 팀을 떠나 새로운 팀에 와보니 조금 여유가 생겼습니다. 이전에는 업무 압박 + 운영 이슈 + 코드 리뷰에 육아 기타 집안일에 치이다 보니 저도 정신을 못 차리고 하루하루 넘기며 지내고 있었습니다. 팀을 옮겨 개발 업무만 1주 정도 집중할 수 있는 상황이어서 조금 여유가 생겼는지 자신을 잠시 돌아볼 수 있었습니다. 그래서 2년만에 D형 큐티를 다시 했습니다.

D형 큐티에 대해 설명을 좀 드리면 교회에서 귀납적으로 성경을 공부하는 방식 중 하나입니다. 개인의 주관적인 생각이 아니라 성경 구절의 의미를 깊이 파고들며 공부하는 방식입니다. 예를 들면 '사모한다'라는 말을 교회에서 많이 쓰곤 합니다. 오늘 제가 읽었던 구절에서도 '직분을 사모하는 자 '라는 말이 나왔습니다. 정확히는 '곧 사람이 감독의 직분을 얻으려 함은 선한 일을 사모하는 것'이라는 말이지만 제 뇌는 이미 여기에서도 제식대로 처리를 해버렸습니다.

주관적 해석 방식으로 해석을 한다면 다음과 같이 잘못 해석 할 수 있습니다. '사모하는게 사랑 하는 것 같은데? 그러면 직분=자리 인데 팀장, 임원 이라는 자리를 사랑하는 것인가? 자리를 사랑한다고? 이거 완전 성경은 자리에 욕심내라는 사막잡신 소리구만?' 이렇게 나의 생각이나 기존의 지식(인터넷, 커뮤니티에서 본 글들)을 성경에 대입해서 해석 하면 본질에 접근하기 힘들기 때문에 귀납적으로 성격을 공부하는 방식인 D형 큐티를 하는 것입니다.

그럼 큐티는 또 뭐냐고 하실 수 있어서 첨언을 드리면 Quiet Time 의 약자 QT를 큐티라고 합니다. 조용히 혼자 고독한 시간을 가지면서 자신의 정신을 가다듬는 시간을 큐티라고 합니다. 업무 하다 보면 아주 많이 열어 놓은 웹브라우저 탭과 힙에 쌓인 안쓰는 객채 들을 가비지 컬렉션 해서 시스템의 건전성을 높이는 것 처럼 나와 만나는 시간을 가지는 것입니다. 그냥 만나면 헝클어져 있는 나와 만나야 하기 때문에 도구로써 경전(성경)을 사용해 조용한 시간을 가지는 것입니다.

D형큐티라는 수단을 이용해 제가 해결해야 하는 리더쉽이라는 문제를 경전의 지혜를 빌려 해결 하고 싶다는 생각이 들었습니다. 마치 최근에 네트웍 지식이 부족하여 네트웍 책을 찾아 읽고 문제를 해결 했듯이요.

이번에 봤던 구절은 바울이 디모데라는 자신의 후계자게에 보냈던 편지의 내용입니다. 바울은 디모데를 에베소라는 도시에 개척한 교회에 보내 그 교회의 문제를 해결하려고 했습니다. 에베소는 지금의 터키지역이고 세계 7대불가사이인 아르테미스 신전이 세워져 있던 문화와 교역의 중심지 입니다. 지금 한국의 도시와 비교를 하면 강남이라고 할 수 있습니다. 사람도 많고 교역이 많이 이루어 지다 보면 많은 문제들이 생기기 마련입니다.

앞에서 D형큐티에 대해 아는지 물어본 후 제미나이에 '딤전3 1-7'을 입력 하니 D형큐티 형식으로 정리를 해주었습니다.

리더는 성품이 중요하다고 합니다. 성과를 내는 것 보다 중요한게 과연 무엇인가? 라는 생각이 들어 성품이 무엇을 말하는지 물어봤습니다. 회사는 성과를 먹고 사는 조직이라는 생각이 제 오랜 생각입니다. 성과가 나지 않으면 회사는 존속 하기 힘듭니다. 고객이 계속 찾아 와야 하고 투자자는 계속 자금을 대야 하고 나중에는 가치가 만들어져서 그 가치가 회사에 돈도 벌어주고 월급도 주고 하는 것인데 성과보다 성품이 중요하다는 말은 공감 하기가 힘들었습니다.

제미나이가 알기 쉽게 풀어 주었네요. 코딩 능력, 아키텍처 설계능력은 애플리케이션 영역이라서 실제 성과를 내지만 그것을 받혀주는 것은 커널과 OS인데 커널과 OS가 성품이라고 합니다. OS가 안좋으면 애플리케이션이 제대로 돌아갈 수 없죠.

그래서 커널과 OS를 잘 정비 하는 것이야 말로 중요하다고 합니다.

저는 이 비유가 꽤나 뼈를 때린다고 생각 합니다. 인간도 육체가 있고 정신이 있는데 육체만 건강하고 정신이 멀쩡하지 않으면 범죄자가 될 수도 있지 않습니까? 잘 갈아놓은 칼은 흉기가 될 수도 있지만 흑백요리사 셰프님들이 잡으면 달려가 먹고 싶은 요리가 되듯이요.

그래서 성과를 내는 기술과 그 성과를 받혀주는 성품 두가지는 모두 중요한 것이라서 어느 한쪽을 키워서 다른 한쪽을 모두 커버 할 수는 없다는 것을 이번 큐티를 통해 알게되는 시간 이었습니다.

Mac Key 매퍼 - Karabiner

KyeongRok Kim — Sat, 27 Dec 2025 12:20:25 +0900

space as Modifier

~/.config/karabiner/karabiner.json 설정파일은 이 위치에 저장됩니다.

Obsidian Syntax Highlight 플러그인 - Shiki

KyeongRok Kim — Mon, 1 Dec 2025 18:34:34 +0900

https://github.com/mProjectsCode/obsidian-shiki-plugin

GitHub - mProjectsCode/obsidian-shiki-plugin: An Obsidian plugin that offers better code highliting via shiki and Expressive Cod

An Obsidian plugin that offers better code highliting via shiki and Expressive Code. - mProjectsCode/obsidian-shiki-plugin

github.com

Obsidian에서 문서 볼 때 Syntax Highlight기능을 개선 해주는 shiki

Before

After

Wpf와 Winform의 차이

KyeongRok Kim — Sun, 30 Nov 2025 16:33:55 +0900

WPF vs WinForms 비교

1. 기본 개념

항목	WinForms	WPF
출시	2002 (.NET 1.0)	2006 (.NET 3.0)
렌더링	GDI/GDI+ (CPU)	DirectX (GPU)
UI 정의	C# 코드 (Designer)	XAML + C#
아키텍처	이벤트 기반	MVVM 패턴 지원

2. 렌더링 방식

WinForms:
┌─────────────┐
│  Control    │ → GDI/GDI+ → CPU → 화면
└─────────────┘
  (픽셀 기반)

WPF:
┌─────────────┐
│  Visual     │ → DirectX → GPU → 화면
└─────────────┘
  (벡터 기반)

WinForms: CPU 기반 렌더링, 픽셀 단위
WPF: GPU 가속, 벡터 기반으로 해상도 독립적

3. UI 정의 방식

WinForms - 코드 중심

Button btn = new Button();
btn.Text = "클릭";
btn.Location = new Point(10, 10);
btn.Click += Btn_Click;
this.Controls.Add(btn);

WPF - XAML 선언적 방식

<Button Content="클릭" 
        Margin="10" 
        Command="{Binding ClickCommand}"/>

4. 데이터 바인딩

항목	WinForms	WPF
바인딩	단순 (DataSource)	강력 (INotifyPropertyChanged)
방향	단방향 위주	양방향, 단방향 선택
변환기	없음	IValueConverter
템플릿	없음	DataTemplate, ControlTemplate

WinForms 바인딩

textBox1.DataBindings.Add("Text", person, "Name");

WPF 바인딩

<TextBox Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

5. 레이아웃 시스템

WinForms - 절대/앵커 위치

button.Location = new Point(100, 50);  // 절대 좌표
button.Anchor = AnchorStyles.Top | AnchorStyles.Right;

WPF - 유연한 레이아웃 패널

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Button Grid.Row="0" Content="상단"/>
    <ListBox Grid.Row="1"/>
</Grid>

레이아웃 패널 대응표

WinForms	WPF
FlowLayoutPanel	StackPanel, WrapPanel
TableLayoutPanel	Grid, UniformGrid
절대좌표	Canvas
-	DockPanel

6. 스타일링/테마

WinForms - 제한적

button.BackColor = Color.Blue;
button.FlatStyle = FlatStyle.Flat;
// 컨트롤별 개별 설정 필요

WPF - 강력한 스타일/템플릿

<Style TargetType="Button">
    <Setter Property="Background" Value="Blue"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <!-- 완전히 새로운 모양 정의 가능 -->
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

7. 장단점 비교

WinForms

장점	단점
쉬운 학습곡선	구식 외관
빠른 개발	제한적 커스터마이징
가벼움	해상도 의존적
풍부한 레거시 자료	제한적 데이터바인딩

WPF

장점	단점
현대적 UI	높은 학습곡선
강력한 데이터바인딩	상대적으로 무거움
MVVM 패턴 지원	복잡한 디버깅
해상도 독립적	초기 개발 시간
애니메이션/3D 지원

8. 선택 가이드

WinForms 선택 시

간단한 내부 도구
빠른 프로토타이핑
레거시 시스템 유지보수
팀이 WinForms에 익숙

WPF 선택 시

현대적 UI 필요
복잡한 데이터 바인딩
커스텀 컨트롤 다수
MVVM 아키텍처 적용
고해상도/다양한 DPI 지원

AI의 진화 - 웹툰으로 제품 홍보

KyeongRok Kim — Thu, 6 Nov 2025 09:48:22 +0900

산업용 전기요금 절약을 위한 모니터링 솔루션을 개발 했는데 홍보방안으로 웹툰을 쓰면 좋을 것 같아서 나노바나나로 구현 해달라고 했더니 잘 만들어주네요. 한글은 사람이 보정 해줘야 할 것 같습니다.

네컷만화 만들건데
1. 전기요금 고지서를 받고 사장님이 화를 내시는 장면
2. 계약전력의 Peak를 초과해서 과징금 3000만원 나오는 장면
3. 머신365 똑똑쓰가 Peak를 넘기 전에 알림을 보내는 장면
4. 전기 요금을 아껴서이렇게 프롬프트 날림

https://machine365.ai

Machine365

Energy monitoring and machine monitoring solution

machine365.ai

SQL Server 커버링 인덱스 (Covering Index) 완벽 가이드

KyeongRok Kim — Tue, 21 Oct 2025 14:43:01 +0900

SQL Server 커버링 인덱스 (Covering Index) 완벽 가이드

개요

커버링 인덱스는 쿼리에 필요한 모든 컬럼을 인덱스에 포함시켜 테이블 접근 없이 인덱스만으로 쿼리를 처리하는 최적화 기법입니다.

커버링 인덱스란?

정의

커버링 인덱스 (Covering Index): 쿼리가 필요로 하는 모든 컬럼이 인덱스에 포함되어 있어, 테이블 데이터에 접근하지 않고 인덱스만으로 쿼리를 완전히 처리할 수 있는 인덱스

핵심 개념

일반 인덱스:
1. 인덱스에서 키 값 검색
2. 인덱스에서 레코드 위치(RID/클러스터드 키) 확인
3. ⚠️ 테이블 데이터 페이지로 이동 (Key Lookup)
4. 나머지 컬럼 값 읽기

커버링 인덱스:
1. 인덱스에서 키 값 검색
2. ✅ 인덱스에 모든 필요한 컬럼이 있음
3. 완료! (테이블 접근 불필요)

SQL Server의 인덱스 구조

1. 기본 인덱스 구조

CREATE NONCLUSTERED INDEX IX_Example
ON sensor_data(device_id, recorded_at);

인덱스 구조:

[device_id] → [recorded_at] → [클러스터드 키 또는 RID]

특징:

Key Columns: device_id, recorded_at
Leaf Level: 키 값 + 포인터 (테이블 위치)
다른 컬럼 필요 시: 테이블 접근 (Key Lookup)

2. INCLUDE를 사용한 커버링 인덱스

CREATE NONCLUSTERED INDEX IX_Example_Covering
ON sensor_data(device_id, recorded_at)
INCLUDE (status, current_1, current_2, current_3);

인덱스 구조:

Non-Leaf Level: [device_id] → [recorded_at]
     ↓
Leaf Level:     [device_id] → [recorded_at] → [status] → [current_1] → [current_2] → [current_3] → [포인터]

특징:

Key Columns: device_id, recorded_at (인덱스 트리 구조에 포함)
Include Columns: status, current_1, current_2, current_3 (Leaf Level에만 저장)
WHERE/ORDER BY/GROUP BY: Key Columns 사용
SELECT: Include Columns도 사용 가능

INCLUDE 절의 원리

Key Columns vs Include Columns

항목	Key Columns	Include Columns (INCLUDE)
위치	모든 레벨 (Root → Leaf)	Leaf Level만
정렬	정렬됨	정렬 안 됨
검색 가능	✅ Yes (WHERE, ORDER BY)	❌ No (SELECT만)
인덱스 크기	큰 영향	작은 영향
사용 목적	필터링, 정렬, 조인	SELECT 컬럼만 추가

왜 INCLUDE를 사용하나?

Before (INCLUDE 없이)

CREATE INDEX IX_Bad ON sensor_data(device_id, recorded_at, 
    current_1, current_2, current_3, voltage_1, voltage_2, voltage_3);

문제점:

모든 컬럼이 Key Column
인덱스 트리의 모든 레벨에 저장
인덱스 크기 ↑↑↑ (5-10배 커짐)
인덱스 탐색 속도 ↓↓↓ (B-Tree 깊이 증가)

After (INCLUDE 사용)

CREATE INDEX IX_Good ON sensor_data(device_id, recorded_at)
INCLUDE (current_1, current_2, current_3, voltage_1, voltage_2, voltage_3);

장점:

Key Columns: 검색에 필요한 것만
Include Columns: SELECT 컬럼만 Leaf Level에
인덱스 크기 ↓ (2-3배 작음)
인덱스 탐색 속도 ↑ (B-Tree 얕아짐)
최적의 균형!

실전 예제

예제 쿼리

SELECT 
    device_id,
    recorded_at,
    status,
    current_1,
    current_2,
    current_3,
    voltage_1,
    voltage_2,
    voltage_3
FROM sensor_data
WHERE device_id = 'A1B2C3D4-1234-5678-ABCD-123456789ABC'
    AND recorded_at >= '2024-09-01 00:00:00'
    AND recorded_at <= '2024-10-01 00:00:00';

시나리오 1: 인덱스 없음

-- 인덱스 없음

실행 계획:

Table Scan (전체 테이블 스캔)
→ 모든 데이터 페이지 읽기
→ 매우 느림 (수백만 건이면 분 단위)

성능:

Logical Reads: 50,000-100,000 페이지
실행 시간: 100-200초

시나리오 2: 일반 인덱스

CREATE INDEX IX_Device_DateTime 
ON sensor_data(device_id, recorded_at);

실행 계획:

Index Seek (인덱스 탐색)
→ Key Lookup (테이블 접근) ⚠️ 병목!
→ Nested Loops
→ 느림 (1,457번 랜덤 I/O)

성능:

Logical Reads: 10,000-20,000 페이지
Key Lookup: 1,457번
실행 시간: 30-60초

문제:

1,457건 조회 시:
- Index Seek: 1,457개 레코드 위치 찾기
- Key Lookup: 1,457번 테이블 페이지 접근 (랜덤 I/O!)
  → current_1, current_2, current_3, voltage_1, voltage_2, voltage_3 읽기

시나리오 3: 커버링 인덱스 ✅

CREATE INDEX IX_Device_DateTime_Covering 
ON sensor_data(device_id, recorded_at)
INCLUDE (status, current_1, current_2, current_3, 
         voltage_1, voltage_2, voltage_3);

실행 계획:

Index Seek (인덱스 탐색만!)
→ 완료! (테이블 접근 불필요)
→ 매우 빠름

성능:

Logical Reads: 500-2,000 페이지
Key Lookup: 0번 ✅
실행 시간: 1-5초

개선:

Key Lookup 제거!
- 모든 컬럼이 인덱스에 있음
- 연속된 페이지 읽기 (Sequential I/O)
- 랜덤 I/O 없음
→ 10-100배 빠름

커버링 인덱스 생성 문법

기본 문법

CREATE [UNIQUE] NONCLUSTERED INDEX index_name
ON table_name (key_column1, key_column2, ...)
INCLUDE (include_column1, include_column2, ...)
[WHERE filter_condition]
[WITH (옵션)];

옵션 설명

ONLINE = ON/OFF

WITH (ONLINE = ON)

ONLINE = ON:

인덱스 생성 중에도 테이블 사용 가능
SELECT, INSERT, UPDATE, DELETE 모두 가능
서비스 중단 없음
⚠️ Enterprise Edition만 지원

ONLINE = OFF:

인덱스 생성 중 테이블 잠금
SELECT만 가능, 쓰기 차단
Standard Edition도 지원

MAXDOP

WITH (MAXDOP = 4)

병렬 처리 프로세서 수 제한
1: 순차 처리
4: 4개 CPU 사용
0: 시스템 최대값 사용

FILLFACTOR

WITH (FILLFACTOR = 80)

인덱스 페이지 채움 비율
80: 20% 여유 공간 (INSERT/UPDATE 성능 향상)
100: 공간 절약 (읽기 전용 테이블)

PAD_INDEX

WITH (PAD_INDEX = ON, FILLFACTOR = 80)

FILLFACTOR를 Leaf Level뿐만 아니라 Non-Leaf Level에도 적용

실전 예제

1. 기본 커버링 인덱스

CREATE NONCLUSTERED INDEX IX_sensor_device_datetime_covering
ON sensor_data(device_id, recorded_at)
INCLUDE (status, current_1, current_2, current_3, voltage_1, voltage_2, voltage_3);

2. 온라인 + 병렬 생성

CREATE NONCLUSTERED INDEX IX_sensor_device_datetime_covering
ON sensor_data(device_id, recorded_at)
INCLUDE (status, current_1, current_2, current_3, voltage_1, voltage_2, voltage_3)
WITH (ONLINE = ON, MAXDOP = 4);

3. 필터된 인덱스 (Filtered Index)

-- status = 'ACTIVE'인 데이터만 인덱싱
CREATE NONCLUSTERED INDEX IX_sensor_device_datetime_active_only
ON sensor_data(device_id, recorded_at)
INCLUDE (current_1, current_2, current_3)
WHERE status = 'ACTIVE'
WITH (ONLINE = ON);

장점:

인덱스 크기 대폭 감소 (필터 조건에 맞는 데이터만)
유지 비용 감소
특정 쿼리에 최적화

성능 비교

테스트 환경

테이블: sensor_data (500만 건)
쿼리: 1,457건 조회 (특정 디바이스, 1개월)

결과

방법	Logical Reads	Physical Reads	실행 시간	Key Lookup
테이블 스캔	80,000	15,000	150초	-
일반 인덱스	12,000	3,000	45초	1,457번
커버링 인덱스	1,200	300	3초	0번

개선 효과:

일반 인덱스 → 커버링 인덱스: 15배 빠름
테이블 스캔 → 커버링 인덱스: 50배 빠름

커버링 인덱스 설계 가이드

1. Key Columns 선택

WHERE, JOIN, ORDER BY, GROUP BY에 사용되는 컬럼
→ Key Columns로 설정

선택 기준:

선택도 (Selectivity) 높은 순서
- 좋음: device_id (디바이스별 구분)
- 나쁨: status ('ACTIVE' 또는 'INACTIVE')
범위 검색 컬럼은 마지막
- device_id (=) → recorded_at (범위)

2. Include Columns 선택

SELECT에만 사용되는 컬럼
→ INCLUDE로 설정

예시:

SELECT    -- ↓ INCLUDE 후보
    status, current_1, current_2, current_3
FROM sensor_data
WHERE device_id = @id          -- ↓ Key Column
    AND recorded_at >= @start  -- ↓ Key Column
    AND recorded_at <= @end;   -- ↓ Key Column

3. 컬럼 순서 최적화

Key Columns 순서:

-- 좋은 예: 선택도 높은 순 + 범위 검색 마지막
CREATE INDEX IX_Good 
ON sensor_data(device_id, recorded_at);

-- 나쁜 예: 범위 검색이 먼저
CREATE INDEX IX_Bad 
ON sensor_data(recorded_at, device_id);

이유:

좋은 예:
1. device_id = 'XXX' (1개 디바이스 선택)
2. recorded_at 범위 스캔 (해당 디바이스 내에서만)

나쁜 예:
1. recorded_at 범위 스캔 (전체에서)
2. device_id 필터링 (이미 많은 데이터 스캔함)

주의사항 및 트레이드오프

1. 저장 공간

커버링 인덱스는 크다!

예시:
- Key Columns: device_id (36), recorded_at (8) = 44 bytes
- Include: 7개 컬럼 × 4 bytes = 28 bytes
- 총: 72 bytes per row

500만 건 × 72 bytes ≈ 360MB

대책:

필요한 컬럼만 INCLUDE
필터된 인덱스 사용 (WHERE 절)

2. 쓰기 성능

인덱스가 많을수록 INSERT/UPDATE/DELETE 느려짐

각 쓰기 작업마다 인덱스 갱신 필요:
- Key Columns: 정렬 구조 유지
- Include Columns: Leaf Level만 업데이트

측정:

-- 쓰기 성능 테스트
INSERT INTO sensor_data (...) VALUES (...);

-- 인덱스 없음: 10ms
-- 인덱스 5개: 50ms (5배 느림)

대책:

읽기 중심 테이블에만 적용
배치 INSERT 시 인덱스 일시 비활성화

3. 인덱스 유지 비용

조각화 (Fragmentation)
- INSERT/UPDATE/DELETE 반복 시 발생
- 조각화율 30% 이상: 성능 저하

해결:

-- 월 1회 재구성
ALTER INDEX IX_sensor_device_datetime_covering 
ON sensor_data REBUILD WITH (ONLINE = ON);

커버링 인덱스 검증

1. 실행 계획 확인

SET STATISTICS IO ON;
SET SHOWPLAN_ALL ON;

-- 쿼리 실행...

SET SHOWPLAN_ALL OFF;
SET STATISTICS IO OFF;

확인 포인트:

✅ Index Seek: 인덱스 탐색 (좋음)
❌ Key Lookup: 테이블 접근 (나쁨)
✅ Logical Reads < 2000: 좋음

2. 커버링 여부 확인

-- 실행 계획 XML에서 확인
SELECT query_plan
FROM sys.dm_exec_query_stats
CROSS APPLY sys.dm_exec_query_plan(plan_handle)
WHERE query_plan.exist('//RelOp[@LogicalOp="Index Seek"]') = 1;

커버링 인덱스 사용 시:

<IndexScan>
  <Object Index="IX_sensor_device_datetime_covering"/>
  <SeekPredicates>...</SeekPredicates>
  <!-- Key Lookup 없음! -->
</IndexScan>

3. 성능 비교

-- Before
DBCC DROPCLEANBUFFERS;  -- 캐시 제거
CHECKPOINT;

SET STATISTICS TIME ON;
-- 쿼리 실행...
SET STATISTICS TIME OFF;

-- After (인덱스 생성 후)
DBCC DROPCLEANBUFFERS;
CHECKPOINT;

SET STATISTICS TIME ON;
-- 쿼리 실행...
SET STATISTICS TIME OFF;

실전 팁

1. 인덱스 추천 도구 활용

-- Missing Index DMV 확인
SELECT 
    migs.avg_user_impact,
    migs.user_seeks,
    mid.statement AS TableName,
    mid.equality_columns,
    mid.inequality_columns,
    mid.included_columns
FROM sys.dm_db_missing_index_groups mig
INNER JOIN sys.dm_db_missing_index_group_stats migs ON mig.index_group_handle = migs.group_handle
INNER JOIN sys.dm_db_missing_index_details mid ON mig.index_handle = mid.index_handle
WHERE migs.avg_user_impact > 50
ORDER BY migs.avg_user_impact DESC;

2. 인덱스 중복 확인

-- 중복/유사 인덱스 찾기
SELECT 
    t.name AS TableName,
    i1.name AS Index1,
    i2.name AS Index2,
    'Potential Duplicate' AS Status
FROM sys.indexes i1
INNER JOIN sys.indexes i2 ON i1.object_id = i2.object_id
INNER JOIN sys.tables t ON i1.object_id = t.object_id
WHERE i1.index_id < i2.index_id
    AND i1.type_desc = 'NONCLUSTERED'
    AND i2.type_desc = 'NONCLUSTERED';

3. 점진적 적용

-- 1단계: 필터된 인덱스로 테스트 (크기 작음)
CREATE INDEX IX_Test 
ON sensor_data(device_id, recorded_at)
INCLUDE (current_1)
WHERE recorded_at >= '2024-09-01';

-- 2단계: 성능 확인 후 전체 인덱스 생성
CREATE INDEX IX_Final 
ON sensor_data(device_id, recorded_at)
INCLUDE (current_1, current_2, current_3, voltage_1, voltage_2, voltage_3);

-- 3단계: 테스트 인덱스 삭제
DROP INDEX IX_Test ON sensor_data;

체크리스트

커버링 인덱스 생성 전

쿼리 분석 (WHERE, SELECT 컬럼 확인)
기존 인덱스 확인 (중복 방지)
디스크 공간 확인
실행 계획 확인 (Key Lookup 존재?)

커버링 인덱스 설계

Key Columns: WHERE, JOIN, ORDER BY 컬럼
Include Columns: SELECT만 사용되는 컬럼
컬럼 순서: 선택도 높은 순, 범위 검색 마지막
ONLINE = ON 옵션 (서비스 중단 방지)

생성 후 검증

실행 계획 확인 (Index Seek만, Key Lookup 없음)
Logical Reads 감소 확인
실행 시간 측정 및 비교
인덱스 크기 확인
쓰기 성능 영향 확인

참고 자료

Microsoft 공식 문서

성능 최적화

SQL Server Index Architecture
Use The Index, Luke! - 인덱스 최적화 가이드

모니터링

섬기는 자세가 필요하지 않나

KyeongRok Kim — Sat, 6 Sep 2025 14:24:38 +0900

https://www.youtube.com/watch?v=xfX9AdkrH4s

회사에서 일 안할려고 하고 벽을 치고 넘길려고 하고 바쁘다고 안해버리고 만들어 놓은 것 뺏어가고 코드 대충 짜서 부채 쌓아놓고 이러고 사는 개발자들 계속 겪었습니다. 저도 그랬겠지요.

어느날 이런 것에 불만을 품고 살다가 이 비디오를 보고 정말 훌륭한 분이라는 생각이 들었습니다.

연고도 없고 얻을 것도 없는 것 같은 섬마을 오지에 부임해서 7년간 목회를 하시는 이 목사님 보면 이런 분들이야 말로 제가 본 받아야 할 삶이 아닌가 다시 생각 해보았습니다.

회사의 부당한 요구? 실력이 먼저다

KyeongRok Kim — Sun, 3 Aug 2025 00:52:37 +0900

취준생 개발자 분들, 현업 주니어 개발자 분들 상처받은 영혼들 무지 많지요. 저도 많이 받았습니다. 지금도 마찬가지구요. 하지만은 극복을 해야하지 않겠습니까?

제가 아는 비전공자 한명은 게시판 하나 만드는 데 한 달씩 만들었습니다. 기능도 그리 복잡하지 않았어요. 그냥 글을 쓰고, 읽는 정도의 단순한 구조였고, 로그인 기능조차 없었습니다. 그런데도 겨우 한달 걸려서 힘들게 만들었지요. 알고리즘도 잘 못했습니다. 알고리즘 레벨1 문제 하나 푸는데 1주일 걸렸습니다. PostFix계산기 만드는 거였는데 겨울방학 한달을 내내 보냈지요.

이런 인원들 저 포함 제 주변에 여럿 있습니다. 지금은 개발자, 인프라엔지니어, PM 다 한자리씩 하고 있습니다. 운이 좋아서 그런것도 있지만 시간을 엄청나게 썼습니다. 퇴근후, 주말 가리지 않고요.

이 인원들 지금은 한 달이 주어지면, 하나의 프로젝트를 완성할 수 있는 수준이 되었죠. 규모가 더 크다면 인력을 더 쓰면서요.

이 글을 쓰는 이유는, 신입 개발자분들 사이에서 취업이 안된다, 회사가 부당하게 대우한다 이런 이야기를 자주 듣기 때문입니다.

하지만 조금만 시야를 바꿔 보면 어떨까요?

지금의 연봉보다 더 중요한 건, 앞으로 올라갈 가능성과 그 속도입니다.

최저시급보다 낮은 대우를 받으며, 매일 야근하고 주말까지 일한 2~3년. 물론, 회사가 부당한 요구를 하는 경우도 있겠죠.
하지만 그 전에 먼저 스스로에게 질문해봤으면 합니다.

"나는 지금 어떤 퍼포먼스를 낼 수 있는 사람인가?"

외부 환경을 탓하기 전에, 나의 성장과 실력을 먼저 돌아보는 것.
그게 진짜 실력 있는 개발자로 가는 첫걸음 아닐까요?

개발자 신입과 주니어를 나누는 기준 - 안정성에 대한 생각을 하는지?

KyeongRok Kim — Wed, 30 Jul 2025 08:02:45 +0900

신입 개발자로 취업하는 것은 분명 쉽지 않습니다. 한편으로는 기업들이 인재가 없다고 말하기도 하지요. 하지만 이 상황을 단순히 기업의 탓으로만 돌리거나, 신입 개발자만의 문제로 보는 것은 적절하지 않습니다. 무엇이 근본적인 문제인지 함께 고민하고, 해결해보려는 적극적인 자세가 우리 모두에게 필요하다고 생각합니다.

저는 이 문제에 대해 오랫동안 고민해 왔습니다. 그러던 중 오늘 『모던 소프트웨어 엔지니어링』(데이비드 팔리, 2025)을 읽다가 그 개념을 명확히 정리해 준 내용을 보고 "바로 이거다!" 싶어 이렇게 포스트를 남깁니다.

이번에 소개할 내용은 사실 그렇게 '모던'한 개념은 아닙니다. 과장 조금 보태면 호랑이 담배피던 시절부터 내려오던 이야기 입니다.하지만 오늘날 모던한 소프트웨어를 만들때에도 쓰이는 개념입니다.

저는 ‘안정성’을 고려하는지를 기준으로 신입과 주니어를 구분할 수 있다고 생각합니다. 이때 말하는 안정성이란 다음의 요소 입니다.

안정성

변경 실패율 change failure rate: 코드 수정했는데 문제 생긴 비율
복구 실패 시간 recovery failure time: 실패한 뒤 복구까지의 시간

코드는 한 번 만들었다고 끝나는 것이 아닙니다, 피드백을 받아 수정해야 하는 상황이 자주 생깁니다. 이럴 때 중요한 것은 "코드를 수정했을 때 문제를 일으키는 비율이 낮아야 한다"는 점입니다.
코드 변경에서 문제가 생기는 주된 이유는 한번 돌아가는데에만 집중해서 만들기 때문입니다. 바꾸어 말하면 원칙을 지키지 않고 개발했다는 의미입니다.
지켜야 할 원칙은 여러 가지가 있겠지만, 그중 하나를 꼽자면 바로 단일 책임 원칙(SRP: Single Responsibility Principle) 입니다.

함수 하나가 파싱도 하고, 비즈니스 로직도 수행하고, DB 입출력까지 처리하는 식으로 코드를 작성하는 경우가 많습니다. 하지만 이러한 역할들은 Parser, Service, Repository로 분리하여 각각의 책임을 적절히 나누어야 합니다.

저는 이러한 책임 분리를 제대로 할 수 있다면, 신입 개발자라도 취업해서 일하는 데 큰 문제가 없다고 생각합니다. 물론, 결코 쉬운 일은 아닙니다.

간호사에 비유하자면, 주사를 놓는 일과 비슷하다고 볼 수 있습니다. 쉬워 보일 수 있지만, 실제로는 혈관을 찾고, 정확하게 바늘을 꽂아야 하며, 압력도 고려해야 하고, 경우에 따라 환자의 혈압도 확인해야 하죠. 또한 투여하는 약물이 어떤 것인지도 잘 알고 있어야 합니다. 이처럼 단순해 보이는 일도 실제로는 많은 전문성과 주의가 필요한 작업입니다.

개발자 일은 이런 전문성을 요구 하기 때문에 신입은 자리가 없다고 하고 기업은 인재가 없다고 하는 것 같네요.

https://jusths.tistory.com/m/465