Latest / M365.FM – Microsoft 365, Copilot & AI 팟캐스트 (한국어) / GitHub Copilot과 @powerpages로 Power Pages 양식 유효성 검사 빠르게 고치기 – VS Code 활용 (AI 더빙)

Transcript

GitHub Copilot과 @powerpages로 Power Pages 양식 유효성 검사 빠르게 고치기 – VS Code 활용 (AI 더빙) · M365.FM – Microsoft 365, Copilot & AI 팟캐스트 (한국어)

• 0:00
  파워페이지즈 양식의 유효성 검사가 작동하지 않고
• 0:02
  오류 메시지가 마치 404 오류처럼 아무런 도움이 안 될 때 느끼는 그 답답함을 아시나요?
• 0:07
  오늘 바로 그 골칫거리를 해결해 보겠습니다.
• 0:10
  다섯 가지 단계를 다룰 예정입니다.
• 0:12
  리퀴드 템플릿 단소화, 자바스크립트 및 양식 유효성 검사 속도 향상,
• 0:16
  키온 코드로 설명받기, 반응형 레이아웃을 위한 부트 스트랩과 HTML 통합,
• 0:20
  그리고 웹 API 호출 단순화입니다.
• 0:22
  한 가지 주의할 점은 파워 플랫폼 툴즈 확장 프로그램이 설치된 데코드,
• 0:25
  기터브 코파일럿 챗, 그리고 데이터버스 인증을 통해 파워 플랫폼 CLI로 가져온 사이트 콘텐츠가 필요합니다.
• 0:31
  이 설정 덕분에 코파일럿은 문맥을 파악하게 됩니다.
• 0:34
  준비가 완료되면 코파일럿은 무작위 코드 조각을 던지는 일을 멈춥니다.
• 0:37
  시행착오를 줄여주는 문맥 기반의 반복적 인코드를 제공하죠.
• 0:40
  직접 결과를 재현할 수 있도록 정확한 프롬프트를 보여드리겠습니다.
• 0:43
  대부분의 고충은 자바스크립트에서 시작되니 양식 오류가 내추럴 원, 내추럴 원처럼 느껴질 때 어떤 일이 벌어지는지 살펴보죠.
• 0:49
  자바스크립트가 꼬이기 시작하면 간단해야 할 양식 검사가 순식간에 재앙으로 변할 수 있습니다.
• 0:55
  키 입력 한 번만 잘못되어도 잘못된 입력을 맡기는 커녕 전체 흐름이 무너져버립니다.
• 1:00
  보통은 화면을 멍하니 바라보며 어떻게 바나나 같은 값이 공들여 작성한 유효성 검사 로직을 통과했는지 위아해하게 됩니다.
• 1:06
  다들 아시죠?
• 1:07
  무예해해 보이는 양식, 엄뚱한 값을 걸러내기 위한 검사기, 그리고 미처 예상치 못한 값을 입력하는 영리한 사용자 말이죠.
• 1:13
  갑자기 콘솔로그는 오류로 가득 차고 데코드 위 모든 탭이 막 다른 길처럼 느껴집니다.
• 1:18
  사소한 오류가 가장 치명적인 법이죠.
• 1:20
  세미콜론 하나가 빠지거나 스코프 버그가 있으면 머릿속으로는 논리적이어도 코드가 실행될 때는 치명적인 독이 됩니다.
• 1:26
  이런 작은 실수들은 실제 배포 환경에서 항상 나타나며 유효성 검사 오류가 웹 개발에서 왜 그렇게 흔한 문제인지 잘 보여줍니다.
• 1:33
  보통은 무차별 대입 방식으로 해결하려 합니다.
• 1:36
  코드를 수정하고 새로 고침하고 다시 오류를 마주하고 결국 해결될 때까지 과정을 반복하죠.
• 1:41
  저녁 시간은 다 지나가고 결과물은 결국 임시방편으로 겨우 돌아가는 스크립트일 때가 많습니다.
• 1:46
  와함도 없고 배울 점도 없죠.
• 1:48
  유효성 검사를 디버깅하는 것이 마치 주사위 1이 나오는 내추럴 원처럼 느껴지는 이유입니다.
• 1:51
  주사위는 던졌지만 결과는 이미 불리하게 기울어져 있는 거죠.
• 1:54
  이때 코파일럿 2 활약합니다.
• 1:56
  일반적인 코파일럿 제안도 도움이 될 때가 있지만 대부분은 기억나지 않는 퀘스트 기록에서 가져온 무작위 조각처럼 보일 때가 많습니다.
• 2:02
  위도는 좋지만 디테일은 틀린 거죠.
• 2:04
  그건 일반 코파일럿 2 파워페이지즈 위 독특한 특성을 모르기 때문입니다.
• 2:07
  하지만 골뱅 EPOWERPAGS 참가자를 추가하면 더 이상 뻔한 코드를 내뱉지 않고 사용자의 환경에 딱 맞는 문맥 인식 코드를 제공합니다.
• 2:14
  마이크로소프트는 리퀴드 템플릿과 데이터버스 바인딩을 포함한 파워페이지즈 위 세부사항을 처리하도록 이를 구축했습니다.
• 2:19
  즉 제한사항은 여러분을 자주 곤란하게 만드는 기능까지 고려합니다.
• 2:23
  단순히 코드 조각을 생성하는 것만이 아닙니다.
• 2:25
  골뱅 EPOWERPAGS 통합 기능을 통해 파워페이지즈 전용 구문을 설명받을 수 있어 무작정 복사해 붙여넣는 대신 스크립트의 작동 원리를 정확히 이해할 수 있습니다.
• 2:33
  덕분에 디버깅은 윤을 가리고 헤매는 것이 아니라 같은 던전을 이미 정복한 동료와 함께 일하는 것처럼 느껴집니다.
• 2:39
  예를 들어 코파일러 채팅에 다음과 같이 입력할 수 있습니다.
• 2:43
  골뱅 EPOWERPAGS 전화번호 필드 값이 올바른 형식 인지 확인하는 양식 필드 유효성 검사용 자바스크립트 코드를 작성했죠.
• 2:49
  이것은 단순한 이론이 아니라 이 연습 과정의 후반부에서 보게 될 바로 실행 가능한 데모용 입력 값입니다.
• 2:54
  제공되는 코드는 모호한 웹조각이 아니면 파워페이지즈 환경에서 바로 컴파일하고 적용할 수 있도록 설계되었습니다.
• 3:00
  이러한 예측 가능성이 진정한 변화의 핵심입니다.
• 3:03
  사용할 때는 마치 올바른 코드를 연주할지도 모르는 음유시인을 데려온 기분이지만 절반은 현재 전투와 아무 상관없는 곡을 연주할 때가 많습니다.
• 3:09
  골뱅 EPOWERPAGS를 사용하면 함정이 어디에 숨어있는지 이미 알고 있는 정찰대원과 함께 여행하는 것과 같습니다.
• 3:14
  이제 모험의 목적은 함정에서 살아남는 것이 아니라 명확한 사용자 경험을 설계하는 것으로 바뀝니다.
• 3:18
  이 도구는 여러분의 판단을 대체하는 것이 아니라 더욱 날카롭게 만들어줍니다.
• 3:21
  무엇이 유효한 입력인지 오류가 사용자를 어떻게 안내해야 하는지는 여전히 여러분이 결정합니다.
• 3:25
  하지만 구문 오류나 불린 불리언, 오타를 수정하느라 시간을 허비하는 대신 워크플로우를 직관적으로 만드는 데 힘을 쏟을 수 있습니다.
• 3:31
  유효성 검사 단계를 올바르게 처리하면 이는 더 이상 방해 요소가 아니라 양식을 사용하는 사람에게 매끄러운 경험을 제공하는 일부가 됩니다.
• 3:37
  겉으로 드러나는 큰 성과는 아닐지 몰라도 기본적인 오류를 방지하는 것만으로도 나중에 쏟아질 사소한 기술 지원 티켓을 줄일 수 있습니다.
• 3:44
  코파일럿이 정확한 유효성 검사 코드 생성이라는 고된 작업을 대신해주면 여러분의 시간은 생존 모드에서 앱의 동작을 개선하는 생산적인 방향으로 전환됩니다.
• 3:51
  잘 타겟팅된 명령어가 코드 생성 흐름을 어떻게 바꾸는지 알게 되면 그 명령어가 또 무엇을 해낼 수 있을지 궁금해지기 때문에 이러한 차이는 중요합니다.
• 3:59
  바로 그때가 파워페이지즈에서 코파일럿을 사용하는 진정한 이점이 분명해지는 순간입니다.
• 4:03
  코파일럿 명령어로 이점을 굴려보세요.
• 4:05
  여기서 이점을 굴린다는 것은 주사위 운에 맡기는 대신 코파일럿에 적절한 명령어를 입력하는 방법을 안다는 뜻입니다.
• 4:11
  그것이 바로 골뱅이 p-o-w-e-r-p-a-g-s 참여자를 사용하는 진짜 강점입니다.
• 4:14
  이 기능은 코파일럿 채팅을 일반적인 도우미에서 파워페이지즈 환경을 위해 최적화된 문맥인식 파트너로 바꿔줍니다.
• 4:20
  사용방법은 다음과 같습니다.
• 4:22
  데코드 내에서 코파일럿 채팅 창을 열고 명령어 맨 앞에 골뱅이 p-o-w-e-r-p-a-g-s를 입력하세요.
• 4:27
  이 태그를 통해 코파일럿은 일반 모드 대신 파워페이지즈 전용 엔진을 로드하게 됩니다.
• 4:32
  유효성 검사기, 리퀴드 스니팻, 심지어 데이터버스 바인딩 호출까지 요청할 수 있으며,
• 4:37
  코파일럿은 기아가 실제로 코딩 중인 시스템에 맞춰 답변을 구성합니다.
• 4:41
  자, 이 기능이 작동하려면 먼저 적절한 환경 설정이 필요합니다.
• 4:44
  비주얼 스튜디오 코드 설치, 파워 플랫폼 툴즈 확장 프로그램,
• 4:48
  기터브 코파일럿 챗 확장 프로그램,
• 4:50
  그리고 데이터버스 환경에 인증된 파워 플랫폼 CLI가 준비되어야 합니다.
• 4:53
  로그인 상태에서 사이트 콘텐츠를 데코드로 가져와야만
• 4:56
  코파일럿 이 환경을 이해할 수 있기 때문에 인증 단계가 가장 중요합니다.
• 5:00
  그렇지 않으면 단순히 추측만 하게 됩니다.
• 5:02
  그리고 거버넌스 관련 주의 사항이 하나 있습니다.
• 5:04
  일부 파워페이지즈 용 코파일럿 기능은 아직 미리 보기 상태이며,
• 5:07
  테넌트 관리자가 거버넌스 설정의 코파일럿 허브를 통해 활성화 여부를 제어합니다.
• 5:10
  여기서 시연된 기능이 귀하의 조직에서 꺼져 있더라도 놀라지 마십시오.
• 5:13
  이는 버그가 아니라 관리자 설정 때문입니다.
• 5:15
  설정을 마친 후에 차이점을 보여드리겠습니다.
• 5:17
  일반 코파일럿은 마치 음유 시인에게 전장 상황에 대한 조언을 구하는 것과 같습니다.
• 5:21
  듣기 좋은 소리나 일반적인 조언은 들을 수 있지만,
• 5:23
  리퀴드 템플릿이나 데이터버스 엔터티 필드를 다룰 때 필요한 세부적인 내용은 얻을 수 없습니다.
• 5:27
  골뱅 EPOWERPAGS 첨가자는 이미 지형을 파악하고 있는 정찰병에 더 가깝습니다.
• 5:32
  단순히 컴파일되는 코드가 아니라 올바른 바인딩을 참조하고,
• 5:35
  폼 유효성 검사기에 적합하며 파워페이지즈 위 실제 작동 방식에 부합하는 코드를 제공합니다.
• 5:39
  하나의 비유, 하나의 대비, 그리고 하나의 성과입니다.
• 5:42
  취약하고 일반적인 스니펫 대신 상황을 인식하는 유용한 출력 결과를 얻게 됩니다.
• 5:46
  결과를 살펴보겠습니다.
• 5:47
  일반 코파일럿에게 유효성 검사 루틴을 요청하면,
• 5:49
  아마 기본적인 HTML 폴에서만 작동하는 스크립트를 줄 것입니다.
• 5:52
  하지만 이를 파워페이지즈에 적용하면 막 다른 길에 부딪히게 됩니다.
• 5:55
  엔터티 스키마를 인식하지 못하고,
• 5:57
  리퀴드 태그가 무엇을 하는지 모르며,
• 5:59
  데이터버스 규칙에 대한 인식이 전혀 없기 때문입니다.
• 6:01
  마치 덕테이프로 붙인 것처럼 작동은 하지만 신뢰할 수 없습니다.
• 6:04
  골뱅 EPOWERPAGS를 사용하여 동일한 요청을 보내면,
• 6:07
  단순히 실행만 되는 것이 아니라 실제로 필요한 올바른 엔터티 필드 참조에
• 6:09
  바인딩되는 유효성 검사기를 얻게 됩니다.
• 6:11
  동일한 요청, 상황에 맞게 조정된 출력, 야간 수정 작업도 필요 없습니다.
• 6:15
  그리고 이는 단순히 스크립트를 생성하는 것에 그치지 않습니다.
• 6:18
  골뱅 EPOWERPAGS와 같은 명령어로 코드를 설명하거나 페이지 복사를 포함하는 등의 기능을 사용하면,
• 6:23
  리퀴드나 파워페이지즈 특정 구문을 쉽게 이해할 수 있습니다.
• 6:26
  무작정 복사해서 붙여넣는 것이 아니라 실제로 이해하면서 작업하게 됩니다.
• 6:29
  이는 눈문자를 사용하는 법을 배우는 동시에 주문을 외우는 것과 같아서 색다른 힘을 발휘합니다.
• 6:34
  이러한 명령어들을 오래 사용할수록 작업 방식이 변화합니다.
• 6:37
  새벽 2시에 혼자 오류를 수정하는 대신,
• 6:39
  유사한 빌드에서 90% 이상의 오류 원인을 이미 알고 있는 보조자와 함께 작업하게 됩니다.
• 6:45
  이 명령어들은 단순한 치트코드가 아니라 환경의 특수성을 고려한 통찰력과 실제 작동하는 샘플을 제공합니다.
• 6:51
  끝없는 재작업 과정에서 여러분을 구해주죠.
• 6:53
  일반적인 코파일럿 역할에서는 중간 정도의 성과를 냅니다.
• 6:56
  괜찮은 스크립트지만 추가 수정이 필요하고 딱 맞을 때까지 시행착오가 따르죠.
• 7:00
  골뱅 EPOWERPAGS 역할에서는 마치 자연스러운 22 나온 것 같은 느낌입니다.
• 7:04
  유효성 검사 스크립트가 파워페이지즈 양식에 딱 맞게 들어가고,
• 7:06
  리퀴드 포함 항목은 실제로 통과하며, 데이터버스 바인딩은 오류를 일으키지 않습니다.
• 7:10
  운이 아닙니다.
• 7:11
  코파일럿이 여러분이 코딩하는 환경을 정확히 알 때 일어나는 일이죠.
• 7:15
  하지만 그 이점은 초안을 만드는 데까지만 유효합니다.
• 7:17
  작동하는 코드 조각이 곧 완성된 사용자 경험을 의미하지는 않으니까요.
• 7:20
  사용자는 이상한 입력을 하고, 오류 메시지에는 상세함이 필요하며,
• 7:24
  스크립트는 코파일럿이 건네준 뼈대 초안을 넘어 진화해야 합니다.
• 7:26
  거기서부터 다음 도전이 시작됩니다.
• 7:28
  스크립트 뼈대에서 완벽히 갖춰진 코드로 나아가는 과정은 대부분의 유효성 검사가 그렇듯 기본적인 틀에서 시작됩니다.
• 7:35
  기술적으로 실행은 되지만, 가장 뻔한 오류만 막아내는 기본적인 스크립트 초안을 얻게 되죠.
• 7:40
  종이 방패를 든 레벨 1전사라고 생각하세요.
• 7:43
  한두 번이 약한 공격은 막아내지만, 실제 사용자가 몰아붙이기 시작하면 금방 부서져버리죠.
• 7:48
  양식을 배포해본 사람이라면 누구나 스크립트가 초기 상태로 오래 유지되지 않는다는 걸 압니다.
• 7:52
  쉬운 실수는 막아내지만, 사용자가 전화번호 필드에 이모지를 붙여넣거나 생년월일에 내일 날짜를 입력하는 순간 문제가 생기죠.
• 7:59
  갑자기 방어선이 무너지고, 문의 티켓이 쏟아지며 허둥대기만 하는 취약한 유효성 검사만 남게 됩니다.
• 8:04
  근본적인 문제는 유효성 검사의 범위가 아니라 피드백에 있습니다.
• 8:08
  유효하지 않은 입력 같은 메시지는 휴지판 없는 잠긴 문과 다를 바 없습니다.
• 8:12
  사용자에게 아무런 정보도 주지 않으니 그들은 추측하다 다시 실패하고 결국 여러분에게 문제를 떠넘기게 되죠.
• 8:17
  그때부터 똑같은 이유로 헬프 데스크 티켓이 계속 늘어나는 것입니다.
• 8:20
  이제 관점을 바꿔보죠. 그 종이 같은 스크립트가 계속 취약할 필요는 없습니다.
• 8:24
  코파일럿과 함께 라면 단순히 뼈대만 받는 것이 아니라 갑옷으로 다듬어 나갈 수 있습니다.
• 8:28
  작업 방식은 4단계 루프처럼 기억하기 쉽습니다.
• 8:31
  뼈대 생성, 코파일럿에게 오류 메시지 개선 요청, 예외 처리 추가, 마지막으로 배포하기.
• 8:37
  매 단계마다 얇은 칼자루가 현장에서 믿고 쓸 수 있는 강력한 무기로 업그레이드됩니다.
• 8:41
  코파일럿은 세션 내에서 작동함으로 이 과정이 빠릅니다.
• 8:44
  뼈대를 만든 동일한 채팅창에 있으니 코드를 업데이트하고 상세한 오류 메시지를 작성해줘 라고 입력하기만 하면 됩니다.
• 8:50
  코파일럿은 처음부터 다시 시작하지 않고 편집기에 있는 코드를 그대로 업데이트합니다.
• 8:55
  브라우저 탭을 오가거나 프롬프트를 처음부터 다시 만들 필요가 없죠.
• 8:58
  잘라내어 붙여넣기가 아닌 반복적인 개선 작업입니다.
• 9:00
  그리고 그 효과를 즉시 확인할 수 있습니다.
• 9:02
  비포와 애프터를 상상해보세요.
• 9:04
  초안에는 잘못된 입력입니다 라고만 표시됩니다.
• 9:07
  한 번 다듬고 나면 전화번호는 숫자만 입력해야 하며 최소 십자 이상 이어야 합니다.
• 9:11
  로 바뀝니다.
• 9:11
  그 명확함이 사용자 경험을 완전히 바꿉니다.
• 9:14
  벽을 세우는 대신 가이드라인을 만드는 것이죠.
• 9:16
  사용자는 무엇이 잘못되었는지 어떻게 해결할지 스스로 알게 됩니다.
• 9:19
  문의 티켓도 불만도 없고 여러분의 시간 낭비도 줄어듭니다.
• 9:22
  엣지 케이스를 더 고려하면 코파일럿 이 방어막을 확장합니다.
• 9:25
  숫자 필드에 특수 문자가 들어가는 걸 막아야 하나요?
• 9:28
  같은 대화창에서 코파일럿에게 요청하세요.
• 9:30
  오류 유형별로 더 세분화된 응답이 필요하신가요?
• 9:33
  워크플로우는 동일합니다.
• 9:34
  스크립트는 계속 탄탄해지며 단순한 웹코드가 아닌 파워페이지즈 환경에 맞춘 맥락을 반영합니다.
• 9:41
  사실 여러분의 디버깅 방식 자체가 변화하고 있는 것입니다.
• 9:43
  망가진 구문의 단일 라인을 수정하는데 급급했던 방식에서 벗어나 완성도 있는 초안을 다듬는 과정으로 변합니다.
• 9:48
  코파일럿이 이미 작동하는 기본 형태를 제공하므로 여러분은 다듬는 데만 집중하면 됩니다.
• 9:52
  구문 오류를 잡느라 시행착오를 겪는 대신 코드가 사용자에게 어떤 정보를 전달할지 위도적으로 설계하는 것입니다.
• 9:57
  그 결과 제작업 시간과 지원 업무량이 대폭 줄어듭니다.
• 10:01
  뼈대 구성, 메시지 개선, 엣지 케이스 보완, 배포라는 루프를 통해 보면 데이터 오류 방지를 넘어 미래의 지원 부담까지 줄이고 있음을 깨닫게 됩니다.
• 10:09
  공들여 만든 오류 메시지 하나가 왜 안되죠? 라는 질문 하나를 줄입니다.
• 10:13
  여러분의 대기목록에 쌓일 티켓 하나가 사라지는 것이죠.
• 10:16
  엣지 케이스를 하나씩 처리할 때 마다 프로덕션 환경에서 발생할 위험 요소도 하나씩 줄어듭니다.
• 10:20
  코파일럿 위 개선 사항이 층층이 쌓이면 내부의 뼈대는 그대로 읽지라도 완전히 다른 모습이 됩니다.
• 10:25
  임시 방편으로 시작했던 것이 이제는 사용자를 막아서는 대신 교육하는 프로덕션 환경에 적합한 경고한 도구로 변모합니다.
• 10:33
  종이 방패가 철갑 방패로 바뀐 것처럼 화면 양쪽 모두의 경험을 바꿉니다.
• 10:37
  스크립트를 통한 유효성 검사가 퍼즐의 한 조각이라면 그 주변에는 더 넓은 전장이 펼쳐져 있습니다.
• 10:42
  코드는 보강할 수 있지만 전체 구조를 속도 저하 없이 어떻게 관리할 것인가가 관건입니다.
• 10:48
  다음 도전 과제는 스크립트 자체가 아니라 사이트의 지도를 어떻게 다루느냐에 있습니다.
• 10:53
  CLI 와대 코드로 던전 지도를 편집하는 일이죠.
• 10:57
  단일 스크립트를 넘어 사이트 전체를 관리하려면 무작정 수정하는 방식으로는 부족합니다.
• 11:02
  제대로 된 지도가 필요합니다.
• 11:04
  CLI 와대 코드로 던전 지도를 편집하면 눈을 감고 헤매는 대신 모든 통로를 한눈에 파악할 수 있습니다.
• 11:10
  번거로운 방식은 브라우저 디자인 스튜디오에 탭을 오가며 터미널을 들락거리고
• 11:14
  작은 변경 하나를 위해 파일을 이리저리 옮기는 것입니다.
• 11:17
  작동은 하지만 매끄럽지 못하죠.
• 11:19
  통합된 방식은 파워 플랫폼 CLI로 모든 사이트 콘텐츠를 로컬에 다운로드한 다음
• 11:23
  데코드 위 파워 플랫폼 툴즈 확장 프로그램을 통해 편집하고 배포하는 것입니다.
• 11:26
  복잡한 과정 없이 하나의 워크플로우로 처리됩니다.
• 11:29
  진행 방식은 이렇습니다.
• 11:31
  무엇보다 먼저 데이터버스 환경에 인증해야 합니다.
• 11:34
  CLI가 사이트에 접근할 수 있도록 정문을 여는 과정이라고 생각하세요.
• 11:39
  인증이 완료되면 단 하나의 명령어로 웹사이트 콘텐츠를 로컬 작업 공간에 다운로드합니다.
• 11:44
  이 명령으로 템플릿, 스크립트, CSS, 에셋을 모두 가져옵니다.
• 11:49
  사이트의 모든 정보를 내 컴퓨터에 완벽하게 복사하는 것이죠.
• 11:52
  코파일럿도 로컬 파일 덕분에 일반적인 추측 대신 환경별 엔터티를 직접 참조할 수 있어 훨씬 유용합니다.
• 11:59
  이제부터는 계속 데코드만 사용하면 됩니다.
• 12:01
  리퀴드 템플릿을 수정하고 싶으신가요?
• 12:03
  파일이 바로 거기에 있습니다.
• 12:04
  유효성 검사 로직을 수정해야 하나요?
• 12:06
  옆에 있는 자바스크립트 파일을 열면 됩니다.
• 12:08
  모든 것이 중앙 집중화되어 있어 전체적인 맥락을 놓친 채 도구를 전환할 필요 없이
• 12:12
  각 요소가 어떻게 연결되는지 실시간으로 확인할 수 있습니다.
• 12:14
  파워 플랫폼 툴즈 확장 프로그램은 CLI 명령어를 더 쉽게 사용할 수 있게 해줍니다.
• 12:19
  물론 원시 명령줄도 계속 사용할 수 있지만
• 12:21
  이제는 코딩 중인 작업 공간과 연결된 데코드 위 통합 터미널에서 바로 실행할 수 있습니다.
• 12:26
  즉, 매번 긴 명령어를 외우며 입력할 필요가 없습니다.
• 12:30
  다운로드하고, 편집하고, 배포하세요.
• 12:32
  매끄러운 순환 과정입니다.
• 12:34
  동기화가 어긋나 남겨진 조각도 없습니다.
• 12:36
  배포 자체도 훨씬 간단해집니다.
• 12:38
  편집 후에는 동일한 CLI 기반 워크플로우를 사용하여 변경사항을 파워페이지즈 환경으로 다시 푸시하면 됩니다.
• 12:44
  이렇게 하면 중복 작업이나 버전 충돌 없이 깔끔하게 마무리됩니다.
• 12:48
  폴더를 수동으로 복사하거나 브라우저 세션이 만료될까 걱정할 필요가 없습니다.
• 12:52
  직접 제어 가능한 하나의 환경 내에서 모든 것을 관리하는 것이죠.
• 12:56
  여기에 코파일러까지 추가하면 생산성은 더욱 향상됩니다.
• 13:00
  파편화된 코드 조각을 관리하는 대신,
• 13:01
  이제는 사이트 콘텐츠와 동일한 작업 공간에서
• 13:03
  골뱅이 P-O-W-E-R-P-A-G-E-S 프롬프트를 사용할 수 있습니다.
• 13:06
  유효성 검사 스크립트를 수정하고
• 13:07
  두 탭 옆에 있는 리퀴드 템플릿과 어떻게 상호작용하는지 즉시 테스트할 수 있습니다.
• 13:11
  하나의 환경, 하나의 맥락, 질문에서 답변까지 단 한 단계면 충분합니다.
• 13:14
  더 구체적으로 보여드리기 위해 짧은 데모를 준비했습니다.
• 13:17
  CLI 명령어로 사이트를 가져오고,
• 13:19
  데코드에서 페이지에 리퀴드 파일과 유효성 검사 스크립트를 연 뒤,
• 13:23
  골�이 P-O-W-E-R-P-A-G-E-S 에러 메시지 개선을 요청해보세요.
• 13:26
  이것이 전체 과정입니다.
• 13:27
  지도는 눈앞에, 파일은 손에, AI 어시스턴트는 대기 상태입니다.
• 13:32
  진정한 성공은 도구를 더 늘리는 것이 아니라 통합하는 데 있습니다.
• 13:36
  컨텍스트 전환을 없애고 집중력을 유지하며,
• 13:39
  코딩, 콘텐츠, 지원이 한 곳에 모인 안정적인 환경에서 작업하는 것이죠.
• 13:44
  시간을 절약할 뿐만 아니라,
• 13:45
  개발이라는 본질 대신 다른 곳의 에너지를 낭비하는 일을 막아줍니다.
• 13:49
  지도를 손에 쥐었으니,
• 13:51
  이제 다음 장애물이 어디인지 고민하며 헤맬 필요가 없습니다.
• 13:54
  하지만 던전 구조가 명확해도,
• 13:56
  보스가 수많은 디버그 오류로 변장에 나타나면,
• 13:59
  그 공격 패턴을 읽어낼 수 있는지가 진짜 시험대입니다.
• 14:03
  그것은 많은 개발자가 여전히 무방비 상태로 맞닥뜨리는 전투이기도 합니다.
• 14:07
  코파일럿과 함께하는 디버깅 보스전,
• 14:09
  가끔 진짜 시험은 새 코드를 작성하는 것이 아니라,
• 14:12
  잘 작동하던 것이 왜 갑자기 문제를 일으키는지 파악하는 것입니다.
• 14:15
  바로 그 지점에서 코파일럿을 활용한 디버깅 보스전이 증가를 발휘합니다.
• 14:20
  파워페이지즈 디버깅은 공격 패턴을 숨긴 보스 몬스터와 싸우는 것과
• 14:23
  비슷합니다.
• 14:24
  오류는 무작위로 나타나는 듯 보이죠.
• 14:26
  로그는 맥락도 없이 비명을 지릅니다.
• 14:28
  긴 스크립트를 뒤져도 구문 문제인지,
• 14:31
  리퀴드 태그 오류인지,
• 14:32
  아니면 데이터버스 바인딩 문제인지 알기 어렵습니다.
• 14:35
  간단히 끝낼 이를 의미 없는 코드를 한 줄씩 해석하느라,
• 14:37
  세션 전체를 다 써버리기도 하죠.
• 14:39
  리퀴드는 이 과정을 더 어렵게 만듭니다.
• 14:41
  작은 태그 하나가 페이지를 완전히 바꿀 수 있으니까요.
• 14:43
  깔끔하게 해결될 때도 있지만,
• 14:45
  완전히 망가질 때도 있습니다.
• 14:46
  어떤 인클로드 태그는 아무 문제 없이 콘텐츠를 불러옵니다.
• 14:49
  하지만 조금 다른 맥락에서 쓰인 태그는 네이아웃 전체를 망가뜨리기도 합니다.
• 14:53
  데이터버스 바인딩은 갈등을 더 키웁니다.
• 14:55
  어떤 양식에서는 제대로 작동하다가도 다른 곳에서는 조용히 실패하곤 하죠.
• 14:59
  마이크로소프트 위 공식 가이드에서도 이러한 특성을 인정하고 있습니다.
• 15:02
  리퀴드와 데이터버스는 위치에 따라 다르게 작동하기 때문에,
• 15:05
  제대로 작동할 때까지 위치를 옮기는 것이 비공식적인 작업 방식이 되곤 합니다.
• 15:09
  바로 그 지점이 코파일럿 위 파워 페이지즈의 기능이 승기를 가져오는 순간입니다.
• 15:12
  오후 내내 무작정 실험하느라 시간을 허비하는 대신 코드의 조명을 비추듯 분석할 수 있습니다.
• 15:18
  코파일럿 채팅창에 add power pages, 다음 코드인 include 태그를 설명해줘 라고 입력하기만 하면 됩니다.
• 15:25
  모호한 답변이나 일반적인 조언은 없습니다.
• 15:28
  출력 결과는 태그의 기능, 불러오는 내용, 그리고 페이지 내 위치가 동작에 미치는 영향을 알기 쉽게 설명해줍니다.
• 15:34
  사실상 추측을 멈추고, 드디어 보스의 공격 패턴이 적힌 명확한 공략집을 갖게 되는 셈이죠.
• 15:39
  이를 최대한 활용하려면 디버깅을 짧은 데모처럼 구성하세요.
• 15:42
  첫째, 오류가 발생한 코드 조각을 찾아 냅니다.
• 15:45
  include 태그 이후 양식이 깨지는 상황이죠.
• 15:47
  둘째, 해당 코드를 복사해 코파일럿의 설명, 명령과 함께 입력하세요.
• 15:50
  셋째, 코파일럿 위 설명을 바탕으로 코드를 다시 작성하거나 레이아웃을 조정하세요.
• 15:54
  그런 다음 테스트합니다.
• 15:55
  설명, 적용, 테스트, 단계는 아주 간단합니다.
• 15:58
  끝없는 시행착오에 갇히지 않고 결과를 바로 확인할 수 있습니다.
• 16:01
  코파일럿은 단순한 번역 그 이상을 수행합니다.
• 16:03
  같은 채팅창에서 바로 수정을 요청할 수 있습니다.
• 16:05
  예를 들어, 코파일럿은 레이아웃과 잘 맞도록 include 중첩 방식을 조정하거나,
• 16:10
  이벤트 핸들러가 콘솔 오류 없이 작동하도록 자바스크립트를 수정할 수도 있습니다.
• 16:14
  파워페이지즈 작업 공간에서 상황을 인지하며 실행되기 때문에,
• 16:18
  일반적인 웹 공간의 조언이 아닌 여러분의 환경에 직접 연결된 조언을 제공합니다.
• 16:22
  이는 무작위 포션 상임과 여러분이 싸우는 보스에 대해 잘 아는 전문가의 차이와 같습니다.
• 16:26
  그 혜택은 즉각적입니다.
• 16:28
  깨진 바인딩 하나를 찾느라 반나절을 허비하는 대신,
• 16:30
  왜 실패하는지 바로 파악할 수 있습니다.
• 16:32
  그 덕분에 디버깅은 무작위적인 노가다에서 전략적인 작업으로 바뀝니다.
• 16:35
  무엇이 문제인지 파악하고, 필요한 부분을 패치한 뒤,
• 16:38
  동작이 안정화되는지 확인하면 됩니다.
• 16:39
  마치 저주받은 주머니에서 주사위를 꺼내는 느낌이 아니라,
• 16:42
  눈에 보이는 패턴에 대응하는 느낌이 듭니다.
• 16:44
  실제 사례를 통해 비교해보죠.
• 16:45
  예전에는 무언가 잘못되었습니다.
• 16:47
  같은 오류 메시지만 보고 문제를 빙빙돌기 일쑤였습니다.
• 16:51
  코파일럿 위 설명을 통해 include 태그가 특정 페이지 조각을 불러오고,
• 16:55
  배치 과정에서 필수 컨테이너를 덮어썼다는 사실을 알게 됩니다.
• 16:58
  코파일럿 위 제안대로 배치를 다시 작성하고 테스트하면 양식은 정상적으로 유지됩니다.
• 17:02
  세 단계만 거치면 혼란에서 해결책까지 도달합니다.
• 17:05
  물론 다시 한번 강조할 규칙이 있습니다.
• 17:07
  코파일럿은 강력한 제안을 제시하지만, 그것이 정답을 보장하는 것은 아닙니다.
• 17:10
  프로덕션 환경에 배포하기 전에는 항상 검토하고 테스트하세요.
• 17:13
  출력 결과를 무턱대고 장착하는 전리품이 아니라 전략 가이드로 활용해야 합니다.
• 17:17
  결과는 시간을 절약해주지만, 시스템의 안정성은 여러분의 판단에 달려있습니다.
• 17:20
  설명, 조정, 확인이라는 피드백 루프를 구축하면 디버깅에 대한 두려움이 점차 사라질 것입니다.
• 17:26
  리퀴드는 더 이상 골치 아픈 존재가 아니고, 데이터버스 위 특이사항은 더 이상 미스터리가 아니면, 자바스크립트 위 돌발 상황도 관리 가능한 반격 대상이 됩니다.
• 17:34
  보스전은 여전히 도전적이지만, 무작위로 공격당하는 대신 상황을 파악하며 싸우게 되며, 그 관점의 변화가 진정한 승리입니다.
• 17:41
  코파일럿과 함께하는 디버깅이 보스전을 없애주는 것은 아닙니다.
• 17:44
  여전히 코딩하고, 테스트하고, 문제 해결을 해야 하지만, 알 수 없는 출력 결과를 보며 낭비하던 에너지를 줄이고, 확실한 우위를 점하며 싸우게 됩니다.
• 17:51
  이것이 마지막 단계를 위한 발판이 됩니다.
• 17:54
  한 걸음 물러나 더 큰 퀘스트를 바라보며니, 모든 변화가 무엇을 의미하는지 알게 될 것입니다.
• 17:58
  결론은 이렇습니다.
• 17:59
  코파일럿은 싸움을 건너뛰는 게 아니라, 싸우는 방식을 바꿔주는 것입니다.
• 18:03
  불안정한 시행착오에서 벗어나 스스로 설명하고, 명령에 따라 개선되며, 사용자가 포기하지 않고 원활하게 탐색할 수 있는 흐름을 구축하는 AI 지원 코딩으로 나아가는 것입니다.
• 18:12
  다섯 가지 성과를 소개합니다.
• 18:14
  리퀴드 템플릿 반소화, 자바스크립트 및 양식 유효성 검사 속도 향상, 복잡한 코드 조각에 대한 쉬운 설명, 반응형 네이아웃을 위한 HTML 및 부트스트랩 삽입, 그리고 추측 없이 웹 API 호출을 간소화할 수 있습니다.
• 18:25
  일부 기능은 아직 미리 보기 상태입니다.
• 18:27
  테넌트 관리자가 파워 플랫폼 관리 센터의 코파일럿 허브에서 해당 기능을 활성화하므로, 기능이 보이지 않으면 관리자에게 확인하세요.
• 18:33
  보스 처치 완료, 전리품 획득 성공, 구독 버프를 장착하고 알림 설정을 켜서 향후 데모를 확인하세요.
• 18:38
  댓글로 코파일럿 이 다음번에 해결해주었으면 하는 유효성 검사 나 리퀴드 관련 문제를 알려주세요.
• 18:42
  여러분께서 겪는 가장 까다로운 문제를 중심으로 다음 가이드를 더 날카롭게 준비하겠습니다.