안녕하세요, oliveves.blog의 디자인 엔지니어 올리브입니다. 🌿
여러분, 혹시 이런 경험 있으신가요? Vercel에 배포된 사이트는 0.1초 만에 번쩍번쩍 잘 뜨는데, 정작 수정을 하려고 내 컴퓨터(로컬)에서 미리보기를 켜면 암전 상태일 때… 🫠
분명 ‘디자인 엔지니어’로서 완벽하게 세팅했다고 생각했는데, 제 로컬 컴퓨터는 아주 정직하게 “난 아무것도 할 수 없어”라고 말하고 있더라고요. 오늘은 그 킹받는(?) 민낯을 탈탈 털어보려 합니다.
1. 일꾼이 부재중입니다 (Node.js의 실종) 🙅♂️
가장 먼저 터미널에 당당하게 npm run dev를 입력했습니다. 그런데 돌아온 대답은 “npm? 그게 뭔데? 먹는 거야?” 수준의 무시였죠.
알고 보니 제 컴퓨터에는 이 프로젝트를 돌려줄 핵심 일꾼, Node.js가 설치조차 안 되어 있었습니다. 서버(Vercel)에는 유능한 관리자가 상주하고 있어서 몰랐던 거죠. 엔진 없는 차에 올라타서 “왜 시동이 안 걸리지?”라고 고민하던 격이랄까요? 😅 바로 노드라는 일꾼부터 급하게 고용(설치)해왔습니다.
2. 우리 집인데 문을 안 열어줘요 (보안 정책의 벽) 🛡️
일꾼을 겨우 모셔왔더니, 이번엔 윈도우 파워쉘(PowerShell)이라는 보안 요원이 길을 막아섭니다. “이 스크립트는 허가되지 않았으니 실행할 수 없다!” 라며 시뻘건 경고창을 띄우더군요.
이게 바로 그 악명 높은 ExecutionPolicy 문제입니다. 제 컴퓨터인데도 제가 고용한 일꾼이 일을 못 하게 막는 상황이죠. 결국 Set-ExecutionPolicy RemoteSigned라는 허가증을 직접 발급해주고 나서야 “아, 주인님 지인이시군요?” 하며 길을 터주었습니다. 아무래도 보안은 중요하니까요.
3. 일꾼은 왔는데 연장이 없네? (node_modules의 부재) 📦
이제 되겠지 싶었는데, 일꾼이 멀뚱멀뚱 서 있습니다. 일을 할 재료(node_modules)를 안 가져왔거든요. 보통 깃허브에는 용량 문제로 이 ‘재료꾸러미’를 올리지 않기 때문에, 로컬로 가져오면 제가 직접 챙겨줘야 합니다.
npm install을 입력하자마자 제 컴퓨터로 쏟아져 들어오는 수만 개의 파일들… 그 묵직한 node_modules 폴더가 생기고 나서야 비로소 제 컴퓨터는 ‘개발 서버’로서의 기능을 갖추게 되었습니다. 역시 장비 빨, 재료 빨은 어디서나 진리인가 봅니다. 🛠️
💡 디자인 엔지니어가 깨달은 ‘당연하지 않은 것들’
이번 소동을 겪으며 뼈저리게 느꼈습니다. 우리가 매일 보는 웹은 결코 ‘당연하게’ 돌아가는 마법이 아니라는 것을요.
디자인 엔지니어로서 화면의 픽셀을 조정하는 것만큼이나, 내 로컬 환경에 일꾼(Node)을 앉히고, 권한(Security)을 조율하고, 도구(Install)를 직접 세팅해주는 기초 공사가 얼마나 중요한지 다시금 깨달았습니다. 🏗️
올리브의 한 줄 요약: “배포된 사이트가 백조라면, 내 로컬 컴퓨터는 물 밑에서 미친 듯이 발버둥 치는 오리였다… 🦆”
#디자인엔지니어 #로컬환경 #Nodejs #Vercel #개발일기 #올리브로그