시작하며

개발하다보면 종종 코드를 작성하는 도중에 기획자나 디자이너에게 작업을 공유해야 하는 상황이 생깁니다. 디자이너가 애니메이션 구현을 확인하고 싶다던지, 기획자가 스펙을 검증한다던지, 아니면 개발자 스스로 진행중인 작업을 자랑하고 싶어서요.

내 컴퓨터로 보여주자니 보여주는 동안 작업을 멈춰야하고, 내 모니터를 바라보는 상대방의 자세도 어정쩡하네요. 디자이너의 5K 아이맥에 띄워주고 싶은데, 거쳐야 할 과정이 너무 많아요.

문법에러로 빌드에 실패하면 안 되니 먼저 작성중이던 함수를 주석처리하고 //TODO로 진행중이던 부분을 표시합니다. 테스트서버에 배포하기 위해 코드를 빌드하고요. "아 네네 디자이너님, 지금 빌드하고 있어요. 한 10분 뒤에 테스트서버 올라갈 것 같아요. 배포하고 다시 알려드릴게요." 아, 급하게 빌드를 했더니 원래 프로세스였다면 없었을 오류로 빌드에 실패했습니다. "디자이너님, 지금 오류가 있어서 이것만 해결하고 배포할게요. 조금만 기다려주세요." 휴, 빌드가 됐습니다. 이제 테스트서버에 배포되면 디자이너님께 전달할 수 있겠네요. "아, 디자이너님. 로컬에서는 되는데 테스트서버는 죽네요. 해결하고 알려드릴게요." 테스트서버 로그를 읽어 원인을 확인합니다.

윗 문단 읽으며 스트레스 받았을 이름모를 개발자님, 미안해요. 하지만 만약 디자이너와 물리적으로 같은 공간에 있다면 위의 과정을 생략하고 간단하게 작업을 공유해줄 수 있습니다.

로컬서버는 서버다

로컬서버가 열려있다면, localhost를 그대로 입력하는 대신 사설IP로 접속하면 디자이너의 컴퓨터에서 제 컴퓨터로 접근할 수 있습니다.

확인해야 할 것이 몇가지 있는데요. 모두 만족한다면 디자이너의 컴퓨터에서 localhost로 열린 결과와 같은 결과를 확인할 수 있습니다.

1. 서버의 HOST 설정하기

서버가 localhost로 접속할 때에만 애플리케이션을 보여준다면 localhost로만 접속할 수 있겠죠. localhost 외에 다른 IP로 접속해도 연결하기 위해서 host를 0.0.0.0으로 서버를 열어주세요. 사용중인 환경마다 host 설정 방법이 다릅니다.

2. 같은 네트워크에 연결하기

내 컴퓨터와 디자이너의 컴퓨터가 같은 망에 연결되어 있는지 확인합니다. 사설IP는 사설망에 부여되므로 망이 같아야합니다. 케이블이든 와이파이든, 같은 라우터에 묶여있으면 됩니다.

3. 내 사설IP 확인하기

Windows를 사용하신다면 ipconfig를 입력하세요.

Linux를 사용하신다면 ifconfig를 입력하세요.

Mac을 사용하신다면 시스템환경설정 > 네트워크에서 확인하세요.

노란색으로 표시한 주소가 내 사설IP입니다. 이제 디자이너의 5K 아이맥에서 저 주소로 접속해보세요. 포트번호 붙이는 것 잊지 마시고요.

만약 접속되지 않는다면 방화벽에서 접속을 막고있을 수 있습니다.

4. 방화벽 설정하기

Windows 기준으로, 시작버튼을 누르고 '방화벽'을 검색한 뒤 표시한 앱을 실행하세요.

보통은 이렇게 앱 설치할 때 인바운드 설정이 되어서 따로 설정할 필요가 없어요. 만약 내 서버 프로그램이 등록되지 않았다면 규칙을 추가해주세요. 이제 내 컴퓨터는 접속을 받아들일 준비가 됐습니다.

마치며

혼자서 개발할 때도 유용해요. PC가 아닌 태블릿이나 스마트폰에서도 접속할 수 있으니 FE 개발 시 Hot Reload가 설정되어 있다면 서브모니터처럼 활용할 수 있어요.