AI・테크놀로지 on kenji.blog

'AI 개발의 벽'

Sun, 20 Jul 2025 21:52:42 +0900

AI 개발의 벽

〜8부 능선까지 왔지만, 거기서부터가 지옥이었던 이야기〜

안녕하세요, kenji입니다.

최근 “AI에게 부탁했더니 앱을 만들어줬어!“라는 이야기를 엄청 자주 듣게 되었습니다. 노코드나 로우코드의 시대를 넘어, “바이브 코딩(분위기로 코드를 작성하는 것)” 같은 단계에 돌입하고 있습니다.

예를 들어, “이미지를 가공해서 SNS에 게시할 수 있는 앱 만들어줘"라고 하면, AI가 코드와 UI까지 뱉어냅니다. 대단해, 이제 사람은 필요 없는 거 아냐? 하고 생각하게 되잖아요.

하지만 말이죠, 그건 후지산의 8부 능선에 샌들을 신고 내리는 것과 같은 것 입니다.

8부 능선까지는 “식은 죽 먹기"로 보인다

AI를 통한 개발은 처음에는 정말 편합니다. 파일 IO? 일단 작동함. 네트워크? 뭐 연결됨. 데이터베이스? JSON이면 되겠지. UI? ChatGPT가 React 코드를 뱉어줬고. 결제? Stripe API 정도 복붙하면 됨.

여기서 “나, 이미 엔지니어 아닐까?“하고 착각하게 됩니다. 하지만 진짜 지옥은 여기서부터 시작됩니다.

왜 막히는 걸까?

이유는 간단한데, “AI는 그럴싸하게 만들지만, 최종 조정은 사람에게 통째로 맡기기” 때문입니다.

파일 IO에서 데이터가 날아감
DB 정규화가 어설퍼서 검색이 느림
UI가 직관적이지 않음
부하 테스트를 안 해서 접속이 몰리면 크래시
Apple/Google 심사에서 리젝(거절) 당함
법적 요건에 걸려서 염상(비난 쇄도)할 뻔함

즉, AI는 “겉보기에는 완성된 것 같은 프로토타입"을 만드는 것은 잘하지만, “실제로 세상에 내놓고 통용되는 프로덕트"로 마무리하는 것은, 지금도 여전히 사람의 일 입니다.

하지만, 역설이 있다

여기서 하나의 역설 을 깨닫게 됩니다.

장래에 AI가 정말로 전부 다 할 수 있게 된다면? 즉, “보안도, 결제도, 설계도 전부 AI가 완벽하게 처리해 주게” 된다면?

그때는, 인류가 앱을 만들 필요 자체가 없어질 지도 모릅니다.

왜냐하면, 사용자가 AI에게 직접 “이런 걸 하고 싶어"라고 말하면, 앱 없이 즉시 작업이 실행될 것이기 때문입니다.

🌀예를 들어

옛날에는 “계산을 하기 위해 계산기 앱을 실행"했었지만, 지금은 “Hey Siri, 12×32는?“이라고 말하면 끝납니다.

마찬가지로, “AI야, 사진을 가공해서 공유해 줘"라고 말하면, 앱의 UI나 API를 거치지 않고 처리 작업이 끝나 있을지도 모릅니다.

즉, “AI로 앱을 만든다"라는 목표가 실현되었을 때, 앱 자체가 필요 없는 세상이 올 지도 모른다는 것입니다.

결국, 지금 우리가 할 수 있는 일

그럼, 어떻게 하면 될까요.

지금은 아직 “8부 능선 위"가 사람의 영역이므로, 그곳을 갈고닦는다
본질적인 사용자 이해나 서비스 설계에 집중한다
“만들 수 있는 것"보다 “가치 있는 것"을 생각한다
오히려, “앱이라는 형식에 얽매이지 않는” 가치 제공의 방식을 모색한다

AI는 도구이며, 리프트이고, 때로는 경쟁자입니다. 하지만, “무엇을 만들 것인가"나 “왜 만드는가"는, 아직 우리 인간의 질문으로 남아 있습니다.

요약：

AI 개발의 벽이란, 기술이 아니라 구조의 역설이다

후지산의 8부 능선까지 누구나 갈 수 있는 시대. 하지만 거기서부터가 진짜 실전.

그리고, 산 정상에 다 올랐을 무렵에는, “산, 오를 필요가 있었나?“라고 다시 묻게 되는 미래가 기다리고 있을지도 모릅니다.

'mermaid.js를 사용해 보기'

Sat, 25 May 2024 02:18:09 +0900

mermaid.js란

mermaid.js는 JavaScript 라이브러리로, 텍스트 기반의 독자적인 구문(Mermaid 표기법)을 작성하여 플로우차트나 다이어그램, 간트 차트 등 복잡한 도표를 그래픽으로 표시할 수 있습니다. GitHub나 Qiita, Notion 등 다양한 서비스에서도 채택되어 있습니다. 이번에는 hugo에서 mermaid.js를 사용할 수 있도록 해보겠습니다.

hugo에서 mermaid.js를 사용할 수 있게 하기

순서는 다음과 같습니다.

layouts/partials/extend_footer.html에 다음을 추가합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


{{ if or .Params.mermaid .Site.Params.mermaid }}
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.3.0/dist/mermaid.min.js"></script>
{{- $loadmermaid := resources.Get "js/load-mermaid.js" }}
<script src="{{ $loadmermaid.RelPermalink }}"></script>
<script>
 window.initMermaid();
 if (isDarkTheme()) {
 setPrefTheme('dark');
 } else {
 setPrefTheme('light');
 }
</script>
{{ end }}

※if문으로 mermaid: true로 설정한 경우에만 mermaid.min.js를 불러오도록 하고 있습니다. 이 라이브러리는 3MB 정도로 의외로 큽니다.

assets/js/load-mermaid.js를 생성합니다. 이 처리는 초기화 및 동적으로 테마가 전환되었을 때 다시 그리기 위해 사용됩니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62


(function(window){
'use strict'

 const elementCode = '.mermaid'
 const loadMermaid = function(theme) {
 window.mermaid.initialize({theme})
 window.mermaid.init({theme}, document.querySelectorAll(elementCode))
 }
 const saveOriginalData = function(){
 return new Promise((resolve, reject) => {
 try {
 var els = document.querySelectorAll(elementCode),
 count = els.length;
 els.forEach(element => {
 element.setAttribute('data-original-code', element.innerHTML)
 count--
 if(count == 0){
 resolve()
 }
 });
 } catch (error) {
 reject(error)
 }
 })
 }
 const resetProcessed = function(){
 return new Promise((resolve, reject) => {
 try {
 var els = document.querySelectorAll(elementCode),
 count = els.length;
 els.forEach(element => {
 if(element.getAttribute('data-original-code') != null){
 element.removeAttribute('data-processed')
 element.innerHTML = element.getAttribute('data-original-code')
 }
 count--
 if(count == 0){
 resolve()
 }
 });
 } catch (error) {
 reject(error)
 }
 })
 }

 const init = ()=>{
 saveOriginalData()
 .catch( console.error )
 document.body.addEventListener('dark-theme-set', ()=>{
 resetProcessed()
 .then(loadMermaid('dark'))
 .catch(console.error)
 })
 document.body.addEventListener('light-theme-set', ()=>{
 resetProcessed()
 .then(loadMermaid('default'))
 .catch(console.error)
 })
 }
 window.initMermaid = init
})(window);

여기 바탕이 되는 코드는 다음을 참고했습니다.

Reinitialize with new theme #1945

header.html의 테마 전환 시의 처리를 수정합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


function switchTheme(theme) {
 switch (theme) {
 case 'light':
{{ if or .Params.mermaid .Site.Params.mermaid }}
 document.body.dispatchEvent(new CustomEvent('light-theme-set'));
{{ end }}
 document.body.classList.remove('dark');
 break;
 case 'dark':
{{ if or .Params.mermaid .Site.Params.mermaid }}
 document.body.dispatchEvent(new CustomEvent('dark-theme-set'));
{{ end }}
 document.body.classList.add('dark');
 break;
 // auto
 default:
 if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
{{ if or .Params.mermaid .Site.Params.mermaid }}
 document.body.dispatchEvent(new CustomEvent('dark-theme-set'));
{{ end }}
 document.body.classList.add('dark');
 }
 }
}

layouts/shortcodes/mermaid.html을 생성합니다.

1
2
3


<div class="mermaid" align="{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}">
 {{ safeHTML .Inner }}
</div>

이상으로 mermaid.js를 사용할 준비가 완료되었습니다.

mermaid.js 사용해 보기

게시글 정의에 다음을 추가합니다.

1

marmaid: true

게시글 본문에 다음을 추가합니다.

플로우차트

1
2
3
4
5
6


{{<mermaid align="center">}}
graph TD
 A[시작] -->|조건1| B(조건2)
 B --> C{조건3}
 C -->|조건4| D[종료]
{{</mermaid>}}

출력 결과

graph TD A[시작] -->|조건1| B(조건2) B --> C{조건3} C -->|조건4| D[종료]

간트 차트

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


{{<mermaid align="center">}}
gantt
 section Project
 요구사항 정의 :done, a, 2024-05-25, 5d
 기본 설계 :done, b, after a, 5d
 상세 설계 :done, c, after b, 5d
 구현 :active, d, after c, 10d
 단위 테스트 :crit, e, after d, 5d
 통합 테스트 : f, after e, 5d
 종합 테스트 : g, after f, 5d
 릴리스 :milestone, h, after g, 1d
{{</mermaid>}}

출력 결과

gantt section Project 요구사항 정의 :done, a, 2024-05-25, 5d 기본 설계 :done, b, after a, 5d 상세 설계 :done, c, after b, 5d 구현 :active, d, after c, 10d 단위 테스트 :crit, e, after d, 5d 통합 테스트 : f, after e, 5d 종합 테스트 : g, after f, 5d 릴리스 :milestone, h, after g, 1d

시퀀스 다이어그램

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


{{<mermaid align="center">}}
sequenceDiagram
 participant user
 participant view
 participant controller
 participant model
 participant database
 user->>view: ID/PW 입력
 view->>controller: 인증 요청
 controller->>model: 인증 요청
 model->>database: 인증 요청
 database-->>model: 인증 결과 반환
 model-->>controller: 인증 결과 반환
 controller-->>view: 인증 결과 반환
 view-->>user: 인증 결과 표시
{{</mermaid>}}

출력 결과

sequenceDiagram participant user participant view participant controller participant model participant database user->>view: ID/PW 입력 view->>controller: ajax 문의 controller->>model: 인증 요청 model->>database: SQL 실행 database-->>model: SQL 결과 반환 model-->>controller: 인증 요청 결과 반환 controller-->>view: ajax 문의 결과 반환 view-->>user: 인증 결과 표시

이상입니다.

참고

생성형 AI에 대하여

Tue, 16 Apr 2024 02:13:56 +0900

생성형 AI에 대한 강의 영상

「생성형 AI」(1) 나카오 마사유키·도쿄대학 교수　2023.9.8

「생성형 AI」(2) 사카이 쿠니요시·도쿄대학 대학원 교수　2023.10.11

「생성형 AI」(3) 마츠오 유타카·도쿄대학 대학원 교수　2024.3.15

paint.net에서 이미지의 특정 부분에 모자이크 처리하는 방법

Tue, 11 Apr 2023 16:33:10 +0900

paint.net에서 이미지의 특정 부분에 모자이크 처리하는 방법을 소개합니다.

인터넷에 이미지를 업로드할 때, 이미지의 특정 부분에 모자이크를 처리하고 싶은 경우가 있을 텐데요, paint.net을 사용하면 이미지를 금방 가공할 수 있습니다.

순서

1. 모자이크 처리를 할 이미지를 paint.net에서 열기

2. 선택 도구를 사용하여 모자이크할 부분을 선택하기 (다중 선택 가능)

3. 메뉴 ＞ 효과 ＞ 왜곡 ＞ 모자이크 선택

셀 크기로 모자이크 처리의 거칠기를 설정합니다. 수치가 클수록 은닉성이 높아집니다.
[축소]멀티샘플 바이리니어법을 선택
[확대]최근접 이웃법을 선택

OK로 대화 상자를 닫습니다.

4. 이미지에 모자이크 처리가 되므로, 이미지를 저장합니다.

이상.

paint.net을 사용하여 이미지에 테두리를 넣는 방법

Tue, 11 Apr 2023 14:31:59 +0900

paint.net을 사용하여 이미지에 테두리를 넣는 방법을 소개합니다.

절차

1. 테두리를 넣을 이미지를 paint.net으로 엽니다

2. 보조 색상을 설정합니다 (이것이 테두리 색상이 됩니다)

색상 팔레트가 표시되지 않는 경우, 키보드의 F8 키를 누르세요.

검은색으로 설정하려면 을 클릭하세요.

3. 메뉴＞이미지＞캔버스 크기 변경을 선택

너비와 높이를 각각 2픽셀씩 늘립니다. 2픽셀을 늘리면 테두리가 1픽셀이 됩니다. 테두리를 5픽셀로 설정하고 싶은 경우, 너비와 높이를 각각 10픽셀씩 늘립니다.

앵커는 ‘가운데’를 선택하고, OK를 클릭합니다.

4. 이미지에 테두리가 추가되면, 이미지를 저장합니다.

이상.

paint.net의 매력

Wed, 14 Sep 2022 19:33:31 +0900

제가 개발 작업을 하면서 자주 사용하는 이미지 편집 프로그램 paint.net을 소개합니다.

Windows 기본 그림판에서는 불가능한 유용한 점

투명 및 투과율을 다룰 수 있다
복잡한 형태의 범위 자동 선택이 가능하다
레이어를 다룰 수 있다
레벨 보정, 명도, 대비 등의 조정을 할 수 있다
다양한 효과(흐림, 왜곡, 노이즈 등)를 적용할 수 있다

기타 특징

무료로 사용할 수 있다
동작이 비교적 가볍다
직관적으로 사용할 수 있어 다루기 까다롭지 않다
일본어(다국어 지원)

고기능이면서도 사용하기 쉬운 프로그램입니다. 저 자신도 아직 모든 기능을 다루지는 못하고 있습니다.

설치는 이곳에서

https://www.getpaint.net/download.html

무료 버전을 선택할 경우에는 링크 대상의 아래 빨간 테두리 부분을 클릭해 주세요.

Microsoft Store를 경유하여 설치하면 유료가 되는 대신 자동 업데이트가 가능해지는 것 같습니다. 무료 버전에서도 최신 버전 업데이트 정보를 알려주므로 비교적 원활하게 업데이트할 수 있습니다.