[Flutter] flutter iphone 연동하기

728x90

반응형

flutter로 앱을 열심히 개발하다 보니 iphone에 직접 실행시켜서 개발 과정을 확인하고 싶었다.

실제 앱에서는 padding이나, 이미지 크기 등이 어색하게 보일 수 있기 때문에 iphone 연동이 시급했다.

하지만 flutter 초보인 내게 xcode를 다루는 일은 너무 어려웠다😭

여러 reference들을 참고했는데, 오히려 그것이 내게는 독이 되었던 것 같다.

여러 번의 실패 끝에 프로젝트를 다시 시작하기를 반복했다.

다시는 같은 실수를 하지 않기 위해 하나씩 정리하며 기록하려 한다.

 

 

1. iphone을 맥에 연결한다.

맥에 연결하면, finder에서 연결된 iphone을 확인할 수 있다.

해당 기기를 선택하면, 신뢰에 대한 부분이 나오는데 신뢰를 선택하면 된다. 

 

 

 

 

2. 실행하고자 하는 폴더를 찾는다.

나같은 경우, 실행하고자 하는 폴더 명이 "my_work_plz" 였다. (폴더명에서도 간절함을...)

해당 폴더에 들어가서 ios > Runner.xcworkspace 로 이동해서 파일을 연다. 파일을 열고 상단에 있는 Runner > 김하람의 iphone이 되도록 한다.

Runner > 이 부분에 ios Device가 선택되면 된다.

 

 

 

 

 

3. Runner > Targets에 Runner를 선택하고, Signing & Capabilities의 Signing

여기에서 add account를 선택해서 apple id로 로그인을 한다. 

* 전제조건은, apple developer.com 에서 개발자 등록을 해야 한다는 것!

 

Bundle Identifier는 다른 사람이 사용하지 않을만한 것으로 지정해야 한다. 그래서 나는,

com.example.firstwork -> com.example.firstworksesd 로 바꿔줬다. 

 

 

 

 

4. 이렇게 Bundle Identifier 가 통과되면, 이 실행 버튼을 눌러주면 된다.

 

 

 

 

5. keychain password

이렇게 실행을 하다 보면, keychain password를 입력하라는 창이 나오는데, 이 부분은 미처 캡쳐하지 못했다..😭

사실 나는 keychain password에서도 꽤나 많은 시간을 쏟았다.. keychain이 뭔지도 잘 모르겠는데, 갑자기 비밀번호를 입력하라고 하니 매우 당황스러웠다. 비밀번호를 설정한 적이 없어 굉장히 당황했으나, 대부분 컴퓨터 잠금 비밀번호라고 한다. 

물론 나는 되지 않아서, keychain password를 초기화하고, 재설정했다. 기회가 된다면 이 부분도 포스팅 해봐야겠다.

Always Allow를 선택하면 나중에 훨씬 편하다!

 

그렇게 실행을 하다 보면, Could not launch "Runner" 라는 다이얼로그가 뜬다. 이는 연결하려는 기기가 당신을 개발자로 신뢰하지 않기 때문이다. 일단 OK를 선택하고, 연결하려는 기기로 가보자.

 

 

 

 

 

6. 기기에서 설정 > 일반 > VPN 및 기기 관리

기기에서 설정 > 일반 > VPN 및 기기 관리로 이동해서 Apple Development~~ 부분을 선택하고, 신뢰하겠다는 버튼을 누르면 된다.

 

여기까지만 했다면 벌써 80%이상 끝났다!!

이렇게 기기에서 신뢰하겠다는 것까지 선택한 뒤, 다시 xcode에서 실행 버튼을 누르면....!!

기기에서 또 어떤 창이 나온다. 이 모든 부분을 캡쳐 했어야 했는데.. 너무 아쉽다..😢

어쨌든, xcode를 실행했을 때 기기에서 어떤 창이 나온다면 OK 또는 확인을 선택하면 된다.

아마 로컬 네트워크에 기기를 연결할 것이느냐에 대한 창이 나올 것이다.

 

 

 

 

 

7. vscode 빌드

이제 xcode를 잠시 뒤로 두고, 다시 vscode로 넘어와보자.

vscode에서 빌드를 하기 전에, vscode 우측 하단에 원하는 기기가 잘 연결 됐는지 확인해보자.

확인이 됐다면, vscode에서 빌드를 시작하면, 연결한 기기에서 코드가 실행되는 것을 확인하면 좋겠지만, 아쉽게도 vscode에서 또 하나의 창이 뜰 것이다...

마지막 창이다.. 이 부분도 캡쳐를 하지 못했는데, "iproxy"에 대한 부분이었다. vscode를 실행하는 중에 "iproxy"로 시작하는 창이 뜬다면, 일단 cancel을 누르자.

 

 

 

 

 

8. iproxy 해결하기

컴퓨터에서 flutter를 찾는다. flutter 폴더를 찾으면, flutter > bin > cache 로 이동한다.

cache에 오면, "artifacts"라는 폴더가 있을 것이다.

이 artifacts를 삭제하면 된다.

 

 

 

 

 

9. 다시 빌드

다시 vscode로 돌아와서 빌드하면, 파일들이 다운로드되고, 기기에서 코드가 실행되는 것을 확인할 수 있다 !!