5.AI로 프로페셔널하게 활용하기. 1
Stream Deck
AI, 이제 프로처럼 써먹어 보자. 1 (feat. Stream Deck)
지난번 타이머 앱.
재밌게 만들어 보셨나요?
이제 AI 코딩(바이브 코딩) 기본기를 어느 정도 다지셨으니 이번에는 회사에서 칼퇴를 부르는 진짜배기 첫 번째 꿀템을 하나 소개해 드릴까 해요. 이걸 함께 만들어보면 '와, 바이브 코딩 생각보다 훨씬 쓸만한데?' 하고 느끼실지도 몰라요.
Button 앱탐색기/파인더, 이젠 안녕!
이번에 만들 앱의 아이디어는 아주 사소한 불편함에서 시작됐어요. 혹시 수많은 폴더 창 사이를 헤매다가 문득 현타 온 적 없으세요? (저만 그런 거 아니라고 말해주세요... 제발..)
저희 회사만 해도 워낙 많은 사람들이 함께 일하다 보니, 참고할 자료 찾다가 탐색기 안에서 길 잃는 일이 정말 많거든요. 프로젝트 폴더 안에 또 다른 폴더, 그 안에는 또또 다른 폴더... 꼬리에 꼬리를 무는 이 트리 구조. 정말이지 너란 녀석...
보통 이렇게 띄워놓고 작업하죠?"딱 내가 쓰는 폴더만 버튼 하나로 뿅! 하고 열리면 얼마나 좋을까?"
아마 컴퓨터로 일하는 분들이라면 한 번쯤 이런 생각해 보셨을 거예요. 특히 프로젝트가 복잡해질수록 폴더 찾다가 퇴근 시간 훌쩍 넘기기 일쑤잖아요.
물론 '컴잘알' 분들은 즐겨찾기나 단축키를 척척 쓰시겠지만, 솔직히 우리 대부분은... 그냥 불편함을 감수하고 마우스로 꾸역꾸역 클릭하고 있잖아요. (저만 그런가요?)
그래서 기존 방식, 대체 뭐가 문제냐고요?
컴퓨터로 일하는 회사. 특히 저희처럼 많은 사람들이 함께 일하는 곳이라면 데이터는 정말 어마어마하죠. 근데 우리가 매일 쓰는 탐색기(윈도우)나 파인더(맥)는... 솔직히 좀 비효율적일 때가 많아요.
어떤 점이 불편했냐면요.
폴더는 끝도 없이 많아서 막상 필요한 자료 찾다 보면 시간이 순삭되구요.
어디 숨었는지도 모를 폴더를 찾아 들어가는 무한 클릭의 늪...
결정적으로 나한테 딱 맞는 맞춤 설정이 너무 어려워요.
예를 들어볼까요? 이런 거죠.
USA_DB/jobs/1506/Scene-006/frames
이 경로의 frames 폴더를 찾아가려면... 마우스를 최소 다섯 번은 클릭해야 해요. 그 안에서 또 다른 파일을 찾으려면 클릭, 클릭, 또 클릭...
필요한 자료 찾으려고 "폴더 1 → 폴더 2 → 폴더 3 → 폴더 4 → 폴더 5"...
폴더가 조금만 많아져도 프로젝트에 집중하는 시간보다 폴더 찾는 시간이 더 길어지는 매직! 다들 경험해 보셨죠?
맥 파인더이게 다가 아니죠. 진짜 혈압 오르는 순간들...
앱 여러 개 띄워야 할 때: 앱 다중 실행 안 되면?
웹사이트 북마크 기능 필요할 때: 웹 브라우저 북마크? 컴알못에겐 넘사벽...
사내 컴에 파일 동시에 보내야 할 때: 파일 복붙 노가다...
같은 앱 여러 개 띄우기. 왜 안 되는데!
일하다 보면 같은 프로그램을 5~6개씩 띄워놓고 막 퐈이야!! 해야 할 때 있잖아요? (저만 그런 거 아니죠...?) 근데 어떤 앱들은 멀티 실행을 막아놔서 속 터지게 만들어요.
기본 설정 앱 1개 실행(툰붐 하모니, 너 말이야 너... ㅂㄷㅂㄷ) 기본 설정은 앱 딱 하나만 실행? 장난하냐...? 오히려 작업할 때 더 많이 띄워야 할 때가 많은데!!
AI로 만든 앱으로 같은 앱 3개 실행웹사이트 북마크? 컴알못에겐 넘.사.벽
자주 가는 사이트 북마크 해두면 편한 거 누가 모르나요... 하지만 솔직히 이 기능 자체를 쓰는 게 은근 허들일 때가 많아요. (나만 그래...?)
사내 컴에 파일 일괄 전송? 노가다 이제 그만!
회사 컴퓨터 여러 대에 똑같은 파일을 보내야 할 때... 업데이트가 필요한 설정 파일을 일일이 복붙해야 할 때... 생각만 해도 머리가 지끈거리는 이 노가다. 이제는 정말 그만할 때도 됐잖아요?
앱 설계 : 엘카토 스트림덱에서 영감!
이런 끝없는 불편함 속에서 저희 팀의 눈에 운명처럼 들어온 것이 있었으니... 바로 엘가토 스트림덱(Elgato Stream Deck)이라는 컨트롤러였어요. 이걸 보는 순간 다 같이 "오, 이거다!" 싶었죠.
엘가토 스트림덱 이게 뭐냐면요, 물리 버튼 몇 번만 누르면 원하는 앱이나 명령을 바로 실행해주는. 그야말로 '마법의 리모컨' 같은 거였어요. 버튼마다 내가 자주 쓰는 앱이나 폴더를 지정해두기만 하면 끝!
물론 저희가 진짜 하드웨어를 만들 순 없겠지만, 그 '철학'만큼은 카피 할 수 있겠다 싶었죠. 직원들이 각자 자기 업무에 딱 맞는 '소프트웨어판 스트림덱'을 가지게 되면 정말 좋지 않을까? 하고요.
하드웨어의 그 손맛까지 따라 할 순 없어도 기능만큼은 우리 회사 작업 환경에 최적화해서 만들 수 있겠다는 자신감이 생겼답니다.
우리가 사용할 드림팀은?
저희가 사용할 도구는 이전 챕터에서 말씀드렸던 바로 그 친구들입니다.
ChatGPT, Claude, Grok, Gemini 같은 AI 모델들
우리의 만능 작업대 Cursor 편집기
아, 그리고 이건 저만의 꿀팁인데, 요즘 Google AI Studio 성능이 정말 괜찮더라고요. 한번 써보시는 것도 추천드려요.
AI, 첫 코드를 부탁해!
ChatGPT, Claude, Grok, Gemini, Google AI Studio 중에 마음에 드는 친구를 하나 골라서 이렇게 한번 물어보는 거예요.
엘가토 스트림덱과 같은 기능을 구현하는 코드를 작성해 줘. Pyqt5로 해줘.
AI가 코드를 뚝딱 만들어주면 이제부터는 우리가 익히 연습했던 'AI와 티키타카' 시간입니다.
AI 코드 복붙! (Cursor 활용) → 'Run Python File' 클릭! → 코드 실행 확인! 앱 실행 안 되고 에러? 에러 메시지 복사해서 AI한테 다시 질문!
1. AI가 만들어준 코드 Cursor에 붙여넣기
Cursor에 붙여넣기2. Run Python File 버튼을 클릭해서 코드 실행 확인!
Run Python File 버튼을 클릭해서 코드를 실행해 보세요. 아마 십중팔구 아니 거의 무조건 에러가 날 거예요. 괜찮아요! 이게 지극히 정상입니다. AI 바이브 코딩은 원래 이렇게 에러와 함께 춤을 추는 과정이랍니다.
터미널 탭에서 에러 확인3. 에러 메시지 들고 다른 AI에게 SOS 치기
터미널에 뜬 빨간 에러 메시지를 그대로 복사해서 이번엔 구글 AI Studio 같은 다른 친구에게 한번 물어보는 거예요. (커서에서 바로 되지만, AI를 활용하는 방법을 설명하기 위해 잠깐 돌아가 보아요)
"이거 왜 안 되는지 알려주고 에러 좀 고쳐줘!" 라고 부탁하면 또 금방 해결책을 알려줄 거예요.
구글 AI Studio4. AI가 수정한 코드를 다시 Cursor에 복사 붙여 넣기 후 다시 Run Python File 버튼으로 실행합니다.
AI가 고쳐준 코드를 다시 Cursor에 붙여넣고 또 실행! 에러가 나면 또 물어보고, 또 실행! 이 과정을 몇 번 반복하다 보면...
5. 짜잔! 못생긴 첫 버전의 탄생
드디어 뭔가 창이 하나 떴습니다!
솔직히 말씀드리면... 처음 모습은 정말 볼품없을 거예요. 저도 그랬거든요.
스트림덱 초기 버전하지만 가장 중요한 건 여기서부터가 진짜 시작이라는 거예요. 이 못생긴 뼈대 위에 AI와 함께 대화하며 살을 하나씩 붙여나가다 보면, 어느새 우리만의 '갓-앱'이 탄생하게 된답니다.
스트림덱 초기 버전 파일.
맥 파인더 대체하는 Button 앱: 드디어 공개!
앞서 보여드린 그 방법으로 수많은 시행착오 끝에 탄생한 'Button' 앱을 드디어 소개해 드릴게요.
솔직히 말씀드리면 회사에서 진짜 쓸 만한 수준으로 만들려면 꽤 많은 '질문과 답변'을 반복해야 했어요. AI와 정말 끝없는 티키타카를 주고받았죠. 제가 이 앱의 코드 구조를 다 이해하냐고요? 전혀요! 저희는 전문 개발자가 아니니까요. (물론 이 과정을 통해 코딩에 흥미가 생기셨다면 정말 좋은 길잡이가 되어줄 거라 믿어요.)
참고로 이 놀라운 앱. 저희 팀 동료가 이 방법을 익히고 한 달도 안 돼서 직접 만들었답니다. 정말 대단하지 않나요?
그래서 이 앱으로 뭘 할 수 있냐고요?
핵심 기능만 살짝 보여드릴게요.
원클릭 폴더 열기: 맨날 사용하는 폴더는 이제 드래그 앤 드롭으로 등록만 해두세요.
자주 쓰는 앱 실행: 앱 아이콘만 등록해두면 바로 실행!
웹사이트 바로가기: 북마크보다 편하게 버튼 하나로 자주 가는 사이트 접속!
네트워크 파일 전송: 네트워크에 연결된 컴퓨터에 파일 슝- 보내기.
네트워크 드라이브 연결: SMB, AFP 같은 복잡한 네트워크 스토리지도 한방에 연결
1. 폴더 즐겨찾기? 이제 드래그 한 번이면 끝!
자주 사용하는 폴더는 '설정하기' 버튼 위로 툭, 하고 끌어다 놓기만 하면 끝! 정말 이게 다예요.
파인더에서 "convertimage" 폴더를 "설정하기" 버튼 안으로 드래그 앤 드롭합니다. 자신에게 필요한 폴더를 드래그하면 됩니다.
북마크 한 폴더
버튼 안에 'convertimage' 폴더가 쏙 들어왔죠?
이제 이 버튼만 누르면...
폴더가 바로 짠! 하고 열립니다. 더 이상 폴더 찾으러 마우스 클릭 노동할 필요가 없어요. 자료 찾는 시간 이제 확실하게 아낄 수 있답니다.
2. 자주 사용하는 앱도 원클릭으로 실행!
버튼에 등록한 하모니 앱앱 실행도 폴더랑 똑같아요. 자주 쓰는 앱을 버튼 위로 드래그 앤 드롭!
툰붐 하모니 앱을 한번 등록해 봤어요.
버튼 안에 예쁘게 앱 아이콘이 표시되죠?
이제 이 아이콘만 클릭하면 바로 앱이 실행된답니다. 세상 편하죠?
3. 웹사이트 즐겨찾기보다 편하게!
이번엔 자주 가는 웹사이트를 등록해 볼까요?
웹 사이트 바로가기 등록ChatGPT 사이트 바로가기 등록
'설정하기' 버튼에서 마우스 오른쪽 버튼을 클릭하고, 'URL 설정'을 선택해주세요.
여기에 ChatGPT 사이트 주소를 입력하고 'OK'를 누르면...
짜잔! ChatGPT 바로가기 버튼이 생겼어요.
이제 이 버튼만 누르면 바로 사이트가 열린답니다. 여러분이 매일 가는 사이트를 등록해보세요.
4. 파일 전송 : 네트워크에 연결된 컴퓨터에 파일 전송.
이건 저희 회사 환경에 맞춰서 특별히 만든 기능인데요. 여러 컴퓨터에 동시에 파일을 보내야 할 때 정말 꿀이랍니다. 설정 파일 같은 걸 하나하나 복사 붙여넣기 하던 그 시절의 노가다를 한방에 해결해줘요.
파일 전송
'전송 버튼'을 누르고 보낼 파일을 드래그해서 넣은 다음, 파일을 받을 컴퓨터의 IP 주소만 추가해주면 끝! 여러 대의 컴퓨터로 파일을 정말 쉽게 보낼 수 있어요
AI와 함께 앱 레벨업 시키기
이제 우리가 만든 'Button' 앱을 조금 더 편하게 만들어 볼까요? 앱 크기를 마우스로 조절하고, 단축키로 확대/축소하는 기능을 추가해 볼게요. 지금까지 잘 따라오셨다면 이건 정말 껌이에요! 왜냐하면 우리는 그저 '질문'만 하면 되니까요.
1. 기존 코드를 통째로 복사해서 AI에게 가져가기
우리가 만든 'Button' 앱의 전체 코드를 복사해주세요. 그리고 ChatGPT나 Claude, Grok, Google AI Studio 같은 친구들 중 마음에 드는 AI를 골라 붙여넣기 한 다음, 이렇게 질문하는 거예요.
(저는 요즘 핫하다는 Google AI Studio 2.0 프로를 한번 써봤습니다. 현재는 2.5 Pro)
질문: "이 코드에 마우스로 창 크기를 조절하는 기능과, 숫자 1번 키로 창을 축소하고 2번 키로 창을 확대하는 단축키 기능을 추가해 줘."
AI의 친절한 답변
질문을 던지자마자 AI가 "네, 알겠습니다! 이렇게 수정하면 될 것 같아요" 라며 정말 친절하게 답변을 해줍니다.
창 크기를 확대/축소하는 단축키(1번 키로 축소, 2번 키로 확대)를 추가하려면 StreamDeck 클래스에 다음을 추가해야 합니다:
1. 단축키 설정: QShortcut을 사용하여 1번 키와 2번 키에 대한 단축키를 생성하고, 각각 창 크기를 줄이고 늘리는 함수에 연결합니다.
2. 창 크기 조절 함수: 창의 크기를 변경하는 함수(increase_size와 decrease_size)를 정의합니다.
다음은 수정된 StreamDeck 클래스 코드입니다.
정말 놀랍지 않나요? 어떻게 수정할 건지 과정부터 실제 수정 코드까지 전부 다 알려준답니다. (보통 AI가 알려준 빨간색 부분만 기존 코드에 쏙쏙 추가해주면 끝이에요!)
아래가 수정된 코드입니다!
class StreamDeck(QWidget):
# ... (이전 코드) ...
def __init__(self):
super().__init__()
self.buttons = []
self.is_pinned = False
self.shortcut = None
self.pin_shortcut = None
self.auto_hide = False
self.hide_timer = None
self.screen = QApplication.primaryScreen().geometry()
self.initUI()
self.setup_pin_shortcut()
self.setup_shortcuts()
self.setup_auto_hide()
self.setup_size_shortcuts() # 확대/축소 단축키 설정 추가
self.tray_icon = QSystemTrayIcon(self)
# ... (나머지 __init__ 코드) ... -->>> 기존 코드를 그대로 사용하라는 뜻입니다.
def setup_size_shortcuts(self):
"""창 크기 확대/축소 단축키 설정"""
# 1번 키: 축소
self.decrease_shortcut = QShortcut(QKeySequence("1"), self)
self.decrease_shortcut.activated.connect(self.decrease_size)
self.decrease_shortcut.setContext(Qt.ApplicationShortcut) # 애플리케이션 전체에서 작동
# 2번 키: 확대
self.increase_shortcut = QShortcut(QKeySequence("2"), self)
self.increase_shortcut.activated.connect(self.increase_size)
self.increase_shortcut.setContext(Qt.ApplicationShortcut) # 애플리케이션 전체에서 작동
def increase_size(self):
"""창 크기를 확대"""
current_size = self.size()
new_width = min(self.screen.width(), current_size.width() + 50) # 최대 화면 너비 제한
new_height = min(self.screen.height(), current_size.height() + 30) #최대 화면 높이 제한
self.resize(new_width, new_height)
def decrease_size(self):
"""창 크기를 축소"""
current_size = self.size()
new_width = max(self.minimumWidth(), current_size.width() - 50) # 최소 너비 제한
new_height = max(self.minimumHeight(), current_size.height() - 30) # 최소 높이 제한
self.resize(new_width, new_height)
# ... (나머지 StreamDeck 코드) ... -->>> 기존 코드를 그대로 사용하라는 뜻입니다.
2. Cursor에서 코드 조립하기:
이제 AI가 알려준 코드를 우리 원래 코드에 옮겨 심어줄 시간이에요. 마치 숨은 그림 찾기 하듯이 AI가 알려준 빨간색 코드를 우리 코드의 제자리에 쏙쏙 넣어주면 된답니다.
코드를 붙여넣을 위치. 어떻게 찾을까?
코드가 길어서 어디에 붙여넣어야 할지 막막하시죠? 그럴 땐 검색 기능(Ctrl+F 또는 Cmd+F)을 쓰면 정말 편해요.
붙여 넣기 할 부분을 코드에서 검색합니다.
여기서 꿀팁!
새로 추가할 코드는 당연히 아직 우리 파일에 없으니 검색해도 안 나오겠죠? 그래서 AI가 알려준 코드의 '이웃'을 찾아주는 게 중요해요.
예를 들어 AI가 'def __init__(self): 구문 아래에 붙여넣으세요' 라고 했다면, 바로 그 def __init__(self):를 검색해서 위치를 찾는 거죠.
첫 번째 코드 조각 붙여넣기
AI가 알려준 코드 중에서 self.setup_size_shortcuts() 이 한 줄을 찾아볼까요?
self.setup_size_shortcuts() # 확대/축소 단축키 설정 추가
이 코드를 기존 코드에 있던 self.setup_auto_hide() # 초기 위치 설정 바로 아래 줄에 쏙! 하고 넣어주시면 된답니다.
코드가 추가됐습니다.
수정된 나머지 코드도(빨간색 코드) 같은 방법으로 붙여 넣기 합니다.
이제 나머지 코드 덩어리를 붙여넣을 차례예요.
AI가 알려준 나머지 빨간색 코드들 있죠? 그 코드 뭉치를 통째로 복사해서 def __init__(self): 구문이 끝나는 바로 아래에 착! 하고 붙여넣어 주세요. 어렵지 않죠?
최종 테스트: 마법이 일어나는 순간
이제 정말 마지막 단계예요!
익숙한 Run Python File 아이콘을 클릭해서 앱을 다시 실행해 주세요.
그리고 키보드의 숫자 1번, 2번 키를 한번 눌러볼까요? 앱 크기가 줄어들고 커지는 게 보인다면... 대성공입니다!
마무리하며
이번 챕터에서는 AI의 도움을 받아 매일 사용하던 탐색기/파인더의 불편함을 해결해주는 작은 앱을 함께 만들어 봤어요. 전문 개발자가 아니어도 이렇게 AI와 함께라면 나에게 꼭 필요한 프로그램을 직접 만들 수 있다는 작은 가능성을 보여드리고 싶었답니다.
다음 챕터에서는 이 앱을 한 단계 더 발전시켜서 회사에서의 업무 효율을 한껏 끌어올리는 방법에 대해 이야기해 볼게요.
