Merge pull request #12 from Wannabe-Woowa-Article/master-wi

Beyond-Chatbots:How-AI-Can-Change–Frontend-Development

June/article/Beyond-Chatbots:How-AI-Can-Change–Frontend-Development.md

@@ -0,0 +1,57 @@
+# [Beyond Chatbots: How AI Can Change Frontend Development](https://thenewstack.io/beyond-chatbots-how-ai-can-change-frontend-development/)
+
+### 🗓️ 번역 날짜: 2024.06.10
+
+### 🧚 번역한 크루: 마스터위(명재위)
+
+---
+
+Loraine Lawson   
+Updated On Jun 6, 2024   
+Keyword : **AI**, **Frontend**   
+
+전 프론트엔드 개발자이자 관측 플랫폼 [Honeycomb](https://www.honeycomb.io/?utm_source=the+new+stack&utm_medium=referral&utm_content=inline-mention&utm_campaign=tns+platform)의 엔지니어링 부사장인 [에밀리 나카시마(Emily Nakashima)](https://www.linkedin.com/in/eanakashima/?utm_source=the+new+stack&utm_medium=referral&utm_content=inline-mention&utm_campaign=tns+platform)는 프론트엔드 프로그래머들이 [인공지능(AI)](https://thenewstack.io/ai-for-developers-how-can-programmers-use-artificial-intelligence/)이 그들의 도구에 어떻게 기여할 수 있는지 탐구할 수 있는 최적의 위치에 있다고 말했습니다.
+
+"프론트엔드 생태계는 매우 빠르게 변화하고 있으며, 프론트엔드 엔지니어들은 새로운 도구를 빠르게 익히고 이를 통합하여 다양한 워크플로우를 최적화하는데 익숙하기 때문에 AI를 도구에 적용하는 방법을 찾는 데 가장 적합합니다," 라고 Honeycomb의 엔지니어링 부사장인 에밀리 나카시마가 말했습니다.
+
+나카시마는 jQuery 시대의 웹 개발자로 시작하여 React의 발전을 높이 평가합니다. 현재 그녀는 Honeycomb에서 소프트웨어 엔지니어링, 보안, 사이트 신뢰성 엔지니어링 팀을 총괄하고 있습니다.
+
+AI 보조 도구가 개발자 경험을 어떻게 혁신할 수 있는지에 대해서는 많은 이야기가 있었지만, The New Stack는 코드 자체에 어떻게 영향을 미칠지 궁금했습니다. 우리는 에밀리 나카시마와의 인터뷰를 통해 그녀가 관찰한 내용과 Honeycomb에서 AI를 어떻게 활용하고 있는지에 대해 논의했습니다.
+
+### AI의 잠재력: 프론트엔드 코드의 에러 처리
+
+> "Honeycomb의 엔지니어링 부사장인 에밀리 나카시마는 Adobe나 Figma와 같은 회사들이 디자이너와 개발자 간의 공통적인 작업 형식에 주목하고 있다는 점에서 큰 기대를 걸고 있습니다."
+> —에밀리 나카시마, Honeycomb의 엔지니어링 부사장
+
+나카시마는 AI가 프론트엔드의 코드 품질에 긍정적인 영향을 미칠 가능성이 백엔드보다 높다고 말했습니다. 프론트엔드 프로덕션 환경은 훨씬 더 복잡하고 통제되지 않는데, 다양한 모바일 기기뿐만 아니라 서로 다른 브라우저, 심지어 다른 언어에서도 실행되어야 한다는 점을 지적했습니다. 이와는 대조적으로 백엔드 개발자들은 자신의 코드 환경을 통제할 수 있기 때문에 문제가 발생하면 "상당히 간단하게" 무엇이 일어나고 있는지 이해할 수 있다고 말했습니다.
+"AI가 이러한 모든 신호를 살펴보고 공통된 요소를 찾을 수 있는 능력 덕분에, 단일 프론트엔드 개발자가 누구나 그 오류에 대해 배운 모든 것을 활용하여 근본 원인을 찾을 가능성이 훨씬 높아집니다. 이는 개발자가 메시지의 의미를 이 컨텍스트에서 이해하고, [원래 코드 라인으로 맵핑하고](https://thenewstack.io/4-ways-to-get-your-code-back-in-shape-after-black-friday/), 많은 다른 데이터 포인트를 가져오는 여정을 가는 것과는 대조적입니다. 패턴을 완성하는 것은 백엔드에서는 사실상 도움이 되지 않는 방식으로 실제로 매우 유용합니다."
+
+그렇지만 그녀는 AI가 실제로 프론트엔드의 도구 생태계를 혁신할 것이라고는 다소 회의적인데, 이미 빠르게 진화하고 있다고 말했습니다. 그럼에도 불구하고 그녀는 [디자이너와 개발자 간의 인터페이스 개선 가능성](https://thenewstack.io/improving-communication-between-development-and-design/)에 대해 기대하고 있습니다. 실제로 The New Stack에서 소개한 초기 AI 사용 사례 중 하나는 [개발자가 디자인을 코드로 변환](https://thenewstack.io/figma-caters-to-developers-with-dev-mode-and-ai-integrations/)하는 데 도움을 주었습니다.
+
+"오늘날 약간의 비효율성이 있는 곳인데, 이러한 두 기능 간의 커뮤니케이션을 간소화할 수 있는 도구를 갖추면 많은 반복 작업이 프로세스에서 제거되고 사람들이 더 빨리 함께 반복할 수 있는 영역이 될 것입니다"라고 나카시마는 말했습니다. "Adobe나 Figma와 같은 회사에서 나오는 워크플로우에 가장 낙관적인데, 이들은 디자이너와 개발자 간의 일반적인 인수인계 형식을 살펴보고, 과거에 '이 색상을 사용하고 이 픽셀 크기'와 같이 상세한 사양을 작성했던 곳을 찾고 있습니다."
+
+### AI는 프론트엔드에서 마이그레이션과 업그레이드 관리에 도움이 된다
+
+AI 코드 생성 도구는 마이그레이션과 업그레이드 관리에도 도움이 될 수 있어, 프론트엔드 개발자가 직무의 창의적인 부분에 더 많은 시간을 할애할 수 있게 해줄 것입니다.
+
+> "오늘날 가장 흥미로운 것은 UI에서 다단계 워크플로우를 처리하고 1단계에서 5단계로 건너뛸 수 있는 방법을 찾는 것입니다."
+
+예를 들어 새로운 React 버전이 출시되면 기존 코드베이스를 전부 살펴보고 새 버전을 사용하고 새로운 프레임워크의 이점을 활용하기 위해 변경해야 하는 모든 것을 바꾸는 데 상당한 작업이 필요하다고 설명했습니다. AI는 현재 불가능한 방식으로 그러한 [작업의 일부를 자동화](https://thenewstack.io/three-ways-automation-can-improve-workplace-culture/)할 수 있을 것이라고 시사했습니다.
+
+"엔지니어들은 마이그레이션과 업그레이드, 특히 의존성 업그레이드나 프레임워크 업그레이드에 많은 시간을 보냅니다. 창의성은 많이 필요하지 않지만 꼼꼼함과 주의력이 필요하고, 특정 API의 한 버전에서 새 버전으로 변환하는 패턴을 이해해야 합니다. 일부 AI 코드 생성 도구가 프론트엔드 엔지니어의 하루 일과에서 시간을 빼앗지만 기술의 가장 좋은 점을 활용하는 창의적인 부분이 아닌 그런 잡무나 워크플로우에 정말 도움이 될 것이라고 낙관하고 있습니다."
+
+Honeycomb은 내부적으로 co-pilot 도구를 사용하고 있으며 GitHub 사용자가 많고 많은 개발자들이 VS Code를 에디터로 사용하고 있습니다. 또한 OpenAI를 주로 사용하여 AI 기반 제품 요소를 구축하는 실험도 하고 있지만, 고객에게 최고의 경험을 제공할 수 있는 공급업체를 찾기 위해 해당 분야의 다른 공급업체도 살펴보고 있다고 합니다. 그러한 요소 중 일부는 Honeycomb의 프론트엔드 UI에 통합된 고객 대상 기능입니다.
+
+### 프론트엔드 AI UI를 챗봇 이상으로 발전시키기
+
+현재 챗봇이 AI를 프론트엔드에 통합하는 주된 방식이지만, 나카시마는 이것이 비효율적인 사용자 인터페이스(UI) 패턴으로 느껴지는 많은 곳이 있다고 말했습니다. 그녀는 프론트엔드 및 웹 애플리케이션 개발자들이 AI를 사용자 인터페이스에 통합하는 다른 방법을 내놓기를 희망하지만, 이것이 개발자들이 실험을 시작한 분야라는 것을 인정합니다.
+
+"오늘날 가장 흥미로운 것은 UI에서 다단계 워크플로우를 처리하고 1단계에서 5단계로 건너뛸 수 있는 방법을 찾는 것입니다. 하지만 더 창의적이고 시각적인 인터페이스를 위한 자리가 있다고 생각합니다."
+
+예를 들어 Honeycomb에는 화면에 시스템의 맵을 그려주는 대화형 데이터 시각화가 있습니다. 이것이 AI를 통해 자동화될 수 있는 것일 수 있다고 그녀는 말했습니다.
+
+"그런 종류의 기능은 초기 단계인 것 같습니다. 사람들이 이런 AI 도구에서 본 것처럼 채팅 워크플로에 실험을 집중하고 있는 것을 봅니다. 곧 좀 더 다양해지기를 희망합니다."
+
+Honeycomb에서는 텍스트를 입력란에 입력하면 쿼리를 생성하는 쿼리 빌더 UI를 통해 이를 달성했습니다.
+
+"때로는 쿼리를 작성하고 정확한 내용을 입력하는 것이 어려울 수 있어서, 좀 더 일반적인 텍스트 설명을 제공하면 클릭했을 때 그래프를 생성해드립니다. 웹 애플리케이션에서 느린 경험을 한 모든 사용자들의 그래프를 보여달라고 말하면, 우리가 그 그래프를 보여드릴 것입니다."