Video: 앱 개발에서 한발짝 앞서 나가는 Codex! iOS 공식 개발 플러그인 및 시뮬레이터 미러링 기능 출시!
Channel: 코드팩토리
Duration: 9m 47s
Source: subtitle (auto, ko)
Transcript:
에이전틱툴 역사상 처음으로 iOS를 가장 효율적으로 개발할 수 있는 네이티브한 시뮬레이터 접근 기능 및 iOS 개발 기능을 코덱스에서 제공해 주고 있어요. 자, 지금 오른쪽에 있는이 창은 제가 시뮬레이터를 직접 띄운게 아니라 시뮬레이터를 코덱스 안에서 확인할 수 있도록 해 주는 건데요. 코덱스가 직접 스크롤하거나 버튼을 누르거나 사진을 찍어서 디버깅을 할 수 있는 능력들이 전부 다 들어갔고요. 기존에 어려웠던이 컴포넌트들을 인스펙트하는 방법과 우리가 원하는 요소에 이렇게 코멘트를 달아서 에노테이션을 추가해서 코덱스에게 바로 수정을 요청하는 기능까지 전부 다 들어왔습니다. 자, 우리가 이걸 세팅을 하려면은 몇 가지 알아야 되는 것들이 있는데 함께 알아보고 한 번에 어디까지 개발이 가능한지 어떤 식으로 쓰면 우리가 가장 효율적으로 쓸 수 있을지 한번 얘기를 해 보도록 할게요. 쏘as지. 자, 그래서 오늘은 코덱스에서 몇 시간 전에 업데이트된 iOS 기능을 한번 사용을 해 볼 건데요. 여러분이 일단은 최신 버전으로 코덱스를 업데이트를 해 주셔야 되고요.

여기서 여러분이 플럭인으로 가서 일단 설치를 해 주셔야 돼요. 바로 그냥 사용을 할 수 있는 건 아닙니다. 플러그인에 가서 iOS라고 검색을 하면은요. 빌드 iOS 앱스라는 플러인이 이렇게 있어요. 자,이 친구를 꼭 설치를 해 주시면 되고 밑으로가 보면은 자,이 스킬들이 함께 들어가는 거를 확인할 수가 있어요. 자, 그리고 여기서 가장 중요한 거는 바로이 iOS 시뮬레이터 브라우저 스킬입니다. 지금 아직 조금 최적화가 덜 돼 있어서 여러분이이 플러인을 써서 개발을 하더라도이 iOS 시뮬레이터 브라우저 스킬로 레퍼런스를 안 해 주면은 그냥 시뮬레이터를 일반적으로 틀어 가지고 개발하려고 하는 경우가 생기거든요. 제가 테스트를 많이 해 봤는데. 자, 그때 여러분이 꼭이 스킬을 레퍼런스를 해 줘야 되고요. 그렇기 때문에 이게 설치가 돼 있는 거를 꼭 확인해 주셔야 됩니다. 오른쪽에이 틱이 들어가 있어야 돼요. 자, 그럼 우리가 한번 개발을 해 볼 건데 자, 어떤 식으로 되는지 우리가 한번 확인을 해 보겠습니다.

자, 일단은 골뱅이하고서요. 우리가 iOS라고 치면은 아까 설치했던 iOS 빌드 iOS 앱스라고 꼭 이렇게 써져 있어야 됩니다. 자, 그리고 우리가이 시뮬레이터를 사이드바에서 틀으려면은 보완적인 요소를 바이스를 많이 해 줘야 되거든요. 그러니까 꼭 권한은 풀 엑세스로 넣어 주세요. 자, 그리고 뭐라고 할 거냐면요. 그냥 대충 인스타그램 클론 UI을 만들어 주라고 한번 요청을 해 볼게요. 자, 일단은 데이터베이스 연동하지 말고 목 데이터만 생해 주라고 한번 요청해 보겠습니다. 그리고 기다리면은 작업을 슬슬 할 거예요. 자, 이때 iOS 시뮬레이터를 직접 바로 틀 수도 있고이 친구가 또는 사이드바이 틀 수도 있거든요. 또는 아예 안 틀 수도 있습니다. CLI 퍼스트로 작업을 하는 경우가 있기 때문에 그런 내용이 빌드 iOS 앱스 플러그인에 있는 거 같거든요. 자, 그런 경우에는 아예 시뮬레이터를 안 틀 수도 있어요. 자, 어떤 상황이 됐든 어,이 다 완료가 됐다고 나왔을 때 우리가 사이드바이다가 어떻게 트는지 우리가 한번 봐 보도록 할게요.

자, 지금 구현이 완료됐다고 나왔고요. 지금 보면은 시뮬레이터가 이렇게 자동으로 실행이 됐어요. 알아서 켜 버렸습니다. 자, 제가 아까 말씀을 드렸죠. 시뮬레이터 그냥 이렇게 켜져 버릴 수도 있다고. 그죠? 자, 근데 이렇게 하면은 우리가 스크린샷 찍어서 뭐 설명하고 이렇게 해야 되니까 귀찮단 말이에요. 그죠? 바로 우리가 다이렉트하게 사이드바에서 띄우고 싶은데 아까 말씀을 드린 것처럼 아직 최적가 안 돼 있기 때문에 이게 바로 안 되는데 어떻게 쓰면 되냐면요. iOS라고 자, 이렇게 태그를 하신 다음에 아까 제가 말씀을 드렸던 자,이 iOS 시뮬레이터 브라우저 스킬 있죠? 자, 이거를 그대로 태그 해 줍니다. 태그 한 다음에 자, 시뮬레이터 사이드바이 띄어 줘라고 한번 얘기를 해 볼게요. 그리고 아까 말씀을 드렸지만 한 번 더 강조를 하자면은 approved for me 어 실행이 안 되는 경우가 많아요. 그래서 꼭 풀 엑세스를 여러분이 두고서 실행을 해 줘야지 사이드바에서 떠집니다. 자, 이렇게 되면 어떻게 되냐면요.

자, 지금 실행되고 있는이 iOS 시뮬레이터가 뭐 필요 없어지고 막 이런 거는 아니고요. 이거를 띄운 상태에서 그대로 이게 브라우저로 리플렉트가 된 다음에 뭐 로커로스트 어디로 해 가지고이 시뮬레이터가 돌아가게 돼요. 그러면은 그거를 또 바로 여기에다가 보여 줘서 우리가 바로 코덱스에서 직접 컨트롤을 할 수 있도록 된다라는 겁니다. 조금 기다려야 됩니다. 한번 기다려 볼게요. 자, 기다리니까 오른쪽에 바로 이렇게 어 시뮬레이터 나온 거 볼 수가 있습니다. 그리고 재밌는게 자,이 탭 기능이 시뮬레이터에서도 바로 써지긴 써지거든요. 우리가 조금 더 직관적으로 볼 수가 있고 이제 여기에서는 우리가 어 이따 보여 드릴 건데 에노테이션을 통해서 우리가 특정 위치 자 이런 것들이죠. 제가 고치라고 이따가 해 볼게요. 실 훨씬 더 쉽게 할 수가 있습니다. 자 그리고 실제로 브라우저를 미러링하고 있다는 거를 우리가 알 수 있는 이유는 로커로스 3201이죠. 자, 그래서 서버 이렇게 실행이 되고 있는 거고 원래이 시뮬레이터 있는 기능들이 전부 다 있어요.

그리고 원한다면은 이렇게 바꿀 수도 있습니다. 직접적으로 우리가 컨텍스트 스위칭 없이 바로 할 수 있도록 이렇게 설계가 많이 돼 있는 걸로 볼 수가 있고요. 자, 스크린샷 찍는 거 당연히 가능합니다. 그리고이 세 번째 버튼을 누르게 되면은요. 우리가이 각각 컴포넌트들을 정확히 볼 수가 있어요. 그래서 이렇게 뭐 눌러 볼 수도 있고 지금은 컨텍스트에 바로 들어가진 않거든요. 그리고 드래그를 해도 뭐 어떤 일이 일어나진 않더라고요. 자, 그런데 장점이 뭐냐면요. 이걸 켜 놓고서 우리가 에노테이트. 자,이 위에 보면이 플러스 채팅 아이콘이 있습니다. 자,이 친구를 누르면은 우리가이 각각의 요소를 정확하게 조금 더 볼 수가 있습니다. 뭐 버튼 컴포넌트고 색깔이 어떻고 폰트가 어떻게 돼 있고 이런게 분석이 되고요. 만약에 우리가 자,이 요소를 바꾸고 싶다라고 하면은 눌렀을 때 바로 직접적으로 여기다 에노테이트를 넣을 수가 있어요. 같은 요소를 넣으면은요. 우리가 바로 여기서 색깔을 뭐 바꾸거나 이런 식으로 이것도 가능하고요.

저는 한번 이렇게 내부원이 정중앙이 아니야. 확인하고 개선해 주라고 에노테이트를 한번 해 볼게요. 자, 넣으면은 넣는 순간에 바로 여기 에노테이션이 우리 코덱스 채팅창이 들어갑니다. 자, 만약에 우리가 또 다른데도 바꾸고 싶으면은 예를 들어서 클론 스타그램이라고 써져 있는 거를 그냥 인스타라고 앱 이름 바꿔 줘라고 우리가 또 넣어 주면은 에노테이션 두 개 들어갔죠. 수정 진행해 줘라고 우리가 한번 요청을 해 볼게요. 자, 그러면은 우리가이 실제로 요청했던 것들이 스크린샷으로 들어갔고요. 여기에 어떤 내용이 들어갔는지 자, 이렇게 정확히 우리 요소 우리가 고쳐 달라고 했던 것들이 추가됐기 때문에 코덱스가 정확히 뭘 우리가 수정하라고 했는지를 완벽하게 이해를 할 수가 있다라는 거죠. 자, 이게이 과정이 정말 힘들고 계속 스크린샷 찍고 이거를 읽어 드려 가지고 뭐 어쩌저쩌하고이 과정을 무한반복했기 때문에 사람이 중간에 개입할 일도 되게 많았고 우리가 모바일 앱을 개발할 때가 웹보다 굉장히 어려웠던 요소 중 하나였거든요.

그런데 코덱스에서 드디어 네이티브하게 이런 기능을 서포트를 하면서 제가 봤을 때는 정말 혁신적으로 빠르게 모바일 앱을 개발할 수 있게 될 거 같아요. 이제는. 그리고 재밌는게이 여러 개를 우리가 돌려 볼 수도 있는데요. 자, 여기에서 우리가 네모 칸이 있단 말이에요. 오른쪽에. 자,이 칸을 누르면은 우리가 원하는이 아이폰 시뮬레이터들을 여러 개 실행을 해서 우리가 여기서 동시에 볼 수도 있습니다. 자, 이것도 굉장히 귀찮았던게 우리가 여러 개 사이즈를 확인을 하고 싶을 때 시뮬레이터별로 컨텍스트 스위칭을 막 해 줬어야 됐거든요. 근데 이게 한 번에 여기서 이제 확인이 되니까 굉장히 편해졌고요. 우리이 화면에이 상태를 자,이 사이드바 같은 거를 다시 누르면은요. 그러니까 위에 사이드바가 아니고 사이드바 안에 있는 사이드바입니다. 자,이 친구를 누르게 되면은 우리 테마들, 자, 우리이 시뮬레이터에 기본적으로 제공되는 기능들 그런 것들 우리가 수정을 할 수도 있고요. AX3를 우리가 여기서 직접 볼 수도 있습니다.

이렇게 뭐 카메라 바꾸거나 권한 바꾸거나 아니면 위치 같은 거 우리가 다 바꿀 수가 있어서 진짜 완전히 우리가 iOS 개발을 할 때 사용에 필요한 것들이 다 들어왔다라고 생각하시면 됩니다. 자, 그리고 지금 수정이 된 거를 볼 수가 있죠. 그죠? 자, 에노테이션을 썼기 때문에 정확하게 우리가 어 고쳐야 될 요소를 클릭해서 위치를 정확하게 우리가 트리거를 해 줄 수가 있었고 채팅에다 막 원이 어디 있는지 어떤 걸 얘기하는지 우리가 정확하게 우리가 계속 길게 설명할 필요가 없었죠. 그게 이제 굉장히 큰 장점으로 이제는 다가오게 된다라고 여러분이 생각하시면 됩니다. 자, 여기서 재미있는게이 기능들이 전부 다 네이티브하게 들어가 있기 때문에 코덱스한테 자, 프로파일 탭 눌러 줘라고 우리가 한번 요청을 해 볼게요. 자, 보면은 제가 누르지 않았는데 바로 이렇게 프로파일 탭으로 바로 클릭이 되는 거를 볼 수가 있어요. 자,이 뜻은 뭐냐? 그 플레이라이트 써 가지고 디버깅하던 그 프로세스 있잖아요. 그거 이제는 우리가 그냥 코덱스에서 네이티브하게 디버깅을 해 줄 수가 있다라는 겁니다.

자, 우리 에이전틱 툴 중에서는 가장 먼저 모바일을 네이티브하게 디버깅할 수 있도록 서포트를 해 주기 시작을 했는데요. 코덱스가 드디어 어 다른 곳들에도 이제는 뭐 클로드 코드가 됐든 어 슬슬 들어가기 시작을 할 것 같아요. 왜냐면 이게 주는 편의성이 굉장하니까요. 그죠? 자, 그래서 이렇게 UI를 만들고 나면은 여러분이 이제 한 번에 어 완성도를 우리가 높여 보기 위해서 골 같은 거 있죠? 자, 이런 친구 우리가 실행해서 제가 항상 메타프롬프팅 해서 그거은 실행해 달라고 제가 말씀을 드렸지만 대강적으로 제가 그림을 보여 드린다면은 뭐 슈퍼베이스 로컬과 연동해 주고 연동이 끝나면 각 유의 요소들을 직접 탭하면서 디버깅하고 버그가 없을 때까지 개선해 줘. 이런 것들을 우리가 이제 실행을 직접 할 수 있게 된다라는 거죠. 자, 우리가 테스트를 진행을 할 때 UI부터 시작하는 엔드투 엔드 테스트를 하냐 아니면은 내부적인 인테그레이션이나 유닛 테스트만 하냐는 굉장히 큰 차이를 불러오게 됩니다.이 완성도에 대해서.

자, 그래서 그런 부분에서 우리가 굉장히 큰 장점을 누릴 수 있다라고 생각이 들고요. 자, 우리 고에서도 이렇게 나오는 것처럼 직접 탭 UI를 실제 로컬 데이터 기반으로 동작하기 수정 시뮬레이터에서 주요 UI 직접 탭 디버깅이라고 나오는 것처럼 우리가 바로 제공해 준 스킬로 바로 우리가 코덱스 안에서의 시뮬레이터 직접 사용해서 우리가 완벽하게 디버깅을 할 수가 있다. 기억을 해 주시면 될 것 같습니다. 자, 그래서 앞으로 여러분들이 앱을 개발할 때 훨씬 더 간단하게 할 수가 있을 것 같고요. 만약에 터미널에서만 계속 여러분이 작업을 하고 있으셨다면은 꼭 한번 어 코덱스 앱에서 한번 시뮬레이터 네이티브하게 틀어서 작업을 해 보세요. 속도도 정말 빠르고요. 여러분이 한 눈에 볼 수 있어서 같이 디버깅하기도 좋고 에노테이션 기능 특히나 너무 좋습니다. 그래서 많이들 테스트를 해 보시고 어 댓글에 여러분들 경험 남겨 주시면은 저희 한번 같이 소통을 해 봐도 좋을 것 같아요. 자 제가 오늘 준비한 영상 여기까지입니다.

영상이 좋았다면 구독과 좋아요 알림 설정에 댓글 그리고 하이보이까지 해 주시면 제가 다음 영상을 제작하는데 더 큰 도움이 됩니다. 감사합니다. So easy.