내 손으로 직접 만드는 Mac 앱? 코딩 없이 HTML 파일을 영구 데스크톱 앱으로 바꾸는 방법
혹시 이런 경험 없으신가요? 업무 효율을 높이기 위해 직접 만든 멋진 HTML 계산기, 자주 쓰는 코드 조각을 모아둔 나만의 라이브러리, 혹은 완벽하게 커스터마이징한 투두리스트(To-Do List). 하지만 이 보물 같은 파일은 결국 다운로드 폴더 어딘가에 잠들어 있거나, 이미 수십 개가 열려 정신없는 브라우저의 새 탭으로 열릴 뿐입니다.
만약 이 HTML 파일을 Dock에 있는 아이콘 클릭 한 번으로, 군더더기 없는 독립된 창으로 띄울 수 있다면 어떨까요?
이 글에서는 복잡한 개발 도구나 추가 프로그램 설치 없이, 여러분의 Mac에 이미 내장된 기능과 최신 브라우저(Microsoft Edge, Google Chrome)만으로 로컬 HTML 파일을 완벽한 데스크톱 앱으로 '영구 변신'시키는 모든 과정을 알려드립니다.
실전! 5단계로 나만의 Mac 앱 만들기
이제 마법의 원리를 알았으니, 직접 나만의 앱을 만들어 봅시다.
1단계: 작전 본부로 이동하기 (터미널 실행 및 폴더 이동)
먼저 우리의 '일회용 카페'를 차릴 장소로 가야 합니다.
- 터미널(Terminal) 앱을 실행합니다.
- Spotlight 검색(
⌘+Space)에서 'Terminal'을 입력하거나,응용 프로그램 > 유틸리티폴더에서 찾을 수 있습니다.
- HTML 파일이 있는 폴더로 이동합니다.
- 터미널 창에
cd를 입력합니다. (c, d, 그리고 반드시 띄어쓰기 한 칸 ) - HTML 파일이 들어있는 폴더 를 마우스로 끌어다 터미널 창 위에 놓습니다. 폴더 경로가 자동으로 입력됩니다.
Enter키를 누릅니다.
2단계: '일회용 카페' 오픈! (로컬 서버 켜기)
이제 마법의 주문으로 서버를 켭니다. 터미널에 아래 명령어를 그대로 입력하고 Enter를 누르세요.
python3 -m http.server
성공적으로 실행되면, 터미널 창에 Serving HTTP on 0.0.0.0 port 8000 ... 과 같은 메시지가 나타납니다. 이제 당신의 Mac에서 작은 웹 서버가 작동하기 시작했습니다.
3단계: '레시피' 가져오기 (브라우저로 접속 및 앱 설치)
이제 스마트한 브라우저로 카페에 방문해서 레시피를 통째로 가져올 차례입니다.
- Microsoft Edge 또는 Google Chrome 을 엽니다.
- 주소창에
http://localhost:8000을 입력하고Enter를 누릅니다. - 아까 지정한 폴더의 파일 목록이 나타납니다. 여기서 앱으로 만들고 싶은 HTML 파일을 클릭 합니다.
- 브라우저에 페이지가 잘 보이면, 오른쪽 위 점 세 개 메뉴(
...) 를 클릭합니다. 앱>이 사이트를 앱으로 설치를 선택합니다.- 앱의 이름을 원하는 대로 지정하고 '설치' 버튼을 누릅니다.
설치가 완료되면, Dock에 새로운 아이콘이 생기고 앱이 독립된 창으로 바로 실행됩니다.
4단계: 깔끔하게 뒷정리 (서버 끄기)
우리는 이미 '레시피(HTML 파일)'를 통째로 테이크아웃했기 때문에, '일회용 카페(로컬 서버)'는 더 이상 필요 없습니다.
- 아까 서버를 켰던 터미널 창으로 돌아갑니다.
- 키보드에서
Control+C를 함께 누릅니다. - 서버가 중지되었다는 메시지와 함께 다시 명령어를 입력할 수 있는 상태로 돌아옵니다. 이제 터미널 앱을 완전히 종료해도 좋습니다.
5단계: 나만의 앱을 만나보세요!
이제 당신의 Dock을 보세요. 방금 만든 앱 아이콘이 자리 잡고 있습니다. 클릭해 보세요. 터미널이 꺼져 있어도, 브라우저의 주소창이나 탭 없이 오직 당신의 HTML 페이지만을 담은 깔끔한 앱이 실행됩니다.
혹시 문제가 생겼나요? (FAQ & 해결법)
Q: python3 명령어를 입력하니 command not found 오류가 발생합니다.
A: Mac에 Python이 제대로 설정되지 않은 경우입니다. 터미널에 xcode-select --install 명령어를 입력하여 Apple의 개발자 도구를 설치하면 대부분 해결됩니다.
Q: 터미널에 "Address already in use" 또는 "port 8000" 관련 오류가 뜹니다.
A: 다른 프로그램이 이미 8000번 포트를 사용하고 있다는 의미입니다. 이럴 땐 다른 포트 번호를 사용하면 됩니다. python3 -m http.server 8001 처럼 다른 번호(예: 8001, 8080, 9000 등)를 지정하고, 브라우저에 접속할 때도 http://localhost:8001과 같이 해당 번호로 접속하세요.
Q: 제 HTML 파일은 이미지나 CSS 파일도 함께 사용하는데, 괜찮을까요?
A: 네, 완벽하게 작동합니다. 앱으로 만들려는 HTML 파일과 같은 폴더(또는 그 하위 폴더)에 이미지, CSS, JavaScript 파일들이 있다면, '앱으로 설치' 과정에서 브라우저가 이 모든 파일들을 함께 '테이크아웃'하여 앱 안에 저장해 줍니다.
Q: 앱 아이콘을 제가 원하는 이미지로 바꿀 수 있나요?
A: 물론입니다.
응용 프로그램폴더에서 방금 만든 앱을 찾아 마우스 오른쪽 클릭 후 '정보 가져오기'를 선택합니다.- 바꾸고 싶은 이미지 파일(가급적
.png)을 복사(⌘+C)합니다. - 정보 창 왼쪽 상단의 작은 아이콘을 클릭하여 파란색 테두리가 생기게 한 뒤, 그대로 붙여넣기(
⌘+V) 합니다.
You know what's cooler than magic? Math.
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!