제1장 서론
한 달 전에 저는 《AI 개발의 단축 경로: 워크플로우 모델》을 썼는데, 많은 독자들의 관심을 끌었습니다.
모두 동의하는 바는, AI 응용 프로그램이 개발자에게 기회이며, 그래픽, 저코드/무코드, 프로그래밍 기초가 필요 없는 "워크플로우 모델"이 바로 AI 응용 프로그램 개발의 입문 단축 경로입니다.
하지만 저의 그 글은 개념만 설명했고, 작동 단계는 없었습니다. 많은 독자들이 실제로 시작할 때 어려움을 겪었고, 몇 부분을 이해하지 못하고 중단되었습니다.
오늘은 그 이후로, 저는 단계별로 그림으로 설명하며, 프로그래밍 기초가 없는 사람이 어떻게 가장 간단한 AI 응용 프로그램을 구축하는지를 보여드리겠습니다. 따라 해 보시면 성공할 수 있습니다.
2. 개발 도구
이 튜토리얼에서 사용되는 개발 도구는 쿠팡(Coze) 입니다. 모든 작업은 그 브라우저 IDE(통합 개발 환경)에서 완료되며,
쿠팡(Coze)을 선택한 주된 이유는 세 가지입니다.
(1) 국산 AI 애플리케이션 개발 플랫폼이며, 유튜브 킥스의 제품으로, 인터페이스, 문서, 고객 서비스가 모두 중국어입니다.
(2) 코드 없이 편집할 수 있는 Project IDE를 제공하며, 컴포넌트 드래그 앤 드롭의 UIBuilder를 포함하여 전체 기능을 갖춘 프론트엔드 인터페이스를 생성할 수 있어 초보자에게 접근 장벽이 낮습니다.
동시에, 백엔드 데이터베이스를 제공하여 데이터 읽기와 쓰기가 가능합니다.
(3) 무료로 사용할 수 있으며(사용 한도를 초과하지 않는 한), 출시 및 온라인 배포도 무료로 제공되어 초보자 연습에 적합합니다.
3. 예제 프로젝트
우리의 샘플 프로젝트는 가장 간단한 "AI 문어문 생성기"입니다.
먼저 완성된 결과물을 보시고 사용해 보세요 （PC 접근을 권장하며, UI는 아직 모바일에 맞게 조정되지 않았습니다.）
한국어 문어체를 입력하고 버튼을 클릭하면 AI가 자동으로 문어문을 생성합니다.
아키텍처적으로 매우 간단합니다: 프론트엔드는 웹 폼으로, 사용자의 입력을 백엔드 AI 모델로 전송하고 백엔드의 반환 결과를 표시합니다.
개발은 두 단계로 이루어집니다. 첫 번째 단계는 백엔드 AI 모델을 실행시키고, 두 번째 단계는 웹사이트를 만들어 백엔드와 연결하는 것입니다.
버튼의 편리한 점은 프론트엔드와 백엔드 모두 그래픽 인터페이스로 작업할 수 있다는 것입니다: 백엔드는 워크플로우 노드를编排하고, 프론트엔드는 UIBuilder의 인터페이스 드래그 앤 드롭 컴포넌트를 사용합니다.
아래는 개발 단계입니다. 모두가 따라올 수 있도록 상세하게 작성했기 때문에 길게 보일 수 있지만, 실제로는 매우 빠르며, 숙련되면 10분 안에 완료할 수 있습니다.
4. 프로젝트 생성
먼저 개발 준비 작업을 합니다. 먼저 AI 애플리케이션을 생성합니다.
(1) 버튼 웹사이트 에 접속하여 상단 오른쪽의 "기본 버전 로그인"을 클릭하세요. (기본 버전은 전문 버전보다 약간의 기업 기능만 빠지는 것뿐이며, 일반 사용자에게는 충분합니다.)
(2) 로그인 후, 개인 메인 페이지로 자동으로 이동하여 왼쪽 메뉴의 "워크스페이스"를 클릭하세요.
워크스페이스에는 "프로젝트 개발"과 "리소스 라이브러리" 두 개의 페이지가 있습니다. "프로젝트 개발"으로 들어가면 모든 프로젝트를 볼 수 있습니다.
(3) 상단 오른쪽의 "생성" 버튼을 클릭하면 팝업 창이 나타납니다.
에는 두 가지 옵션이 있습니다. "지능형 에이전트 생성"은 전통적인 AI 채팅을 만들고, "애플리케이션 생성"은 사용자 정의 인터페이스를 가진 AI 애플리케이션을 만듭니다.
(4) "애플리케이션 생성"을 선택하면 애플리케이션 템플릿을 선택하라는 메시지가 나타납니다. "빈 애플리케이션 생성"을 클릭합니다.
그 다음, 프로젝트의 이름을 입력합니다. 여기서는 "AI 문어 생성기"입니다.
이제 프로젝트 생성이 완료되었으며, 시스템은 자동으로 "AI 문어 생성기"의 애플리케이션 메인 페이지로 이동합니다 (아래 그림 참조). 이제 공식적인 개발 작업이 시작됩니다.
5. 비즈니스 로직
애플리케이션 메인 페이지의 가장 위에는 "비즈니스 로직"과 "사용자 인터페이스" 두 탭이 있습니다. 기본적으로 "비즈니스 로직" 탭이 선택되어 있습니다.
이 섹션에서는 비즈니스 로직을 어떻게 생성하는지, 즉 뒷단의 AI 모델을 만드는 방법을 설명합니다.
우리는 워크플로우 모드를 사용하여 비즈니스 로직을 여러 노드로 구성합니다.
（1）왼쪽 메뉴의 "워크플로우" 뒤의 "+" 기호를 클릭하고 "새 워크플로우"를 선택하세요.
워크플로우의 이름과 설명을 입력하세요。（주의，이름은 영문자，숫자 및 밑줄만 사용할 수 있으며，이 예는 classicalchinesecreator입니다。）
（2）워크플로우가 성공적으로 생성되면，이름이 왼쪽 메뉴의 "워크플로우" 탭 아래에 나타납니다. 클릭하면 해당 워크플로우의 "노드 편집" 캔버스로 이동합니다.
캔버스에는 기본적으로 "시작"과 "종료" 두 개의 노드가 있습니다.
（3）아래의 "노드 추가"를 클릭하여 새 노드를 추가하고，타입을 "대형 모델"로 설정하세요.
그런 다음，이 세 개의 노드를 연결하세요（변경 가능한 간선의 제어점을 드래그하여）。
（4）“시작” 노드를 설정합니다. 해당 노드를 더블클릭하여 설정 상자에 content 변수를 추가하고, 이를 사용자의 입력 내용을 나타냅니다.
（5）“큰 모델” 노드를 설정합니다.
설정 창의 각 옵션을 설정하고 다음과 같이 작성합니다.
모델：자신의 필요에 따라 선택할 수 있으며, 여기서는 기본값인 "두패기 Function call 모델"을 유지합니다.
입력：기존의 input 파라미터를 content로 변경하고, “시작 노드”의 content 변수와 연결합니다.
시스템 힌트: 다음 내용을 입력하여 큰 모델의 행동을 설정합니다.
역할
너는 전문적인 한자 문어체 작가로, 사용자가 입력한 중국어 문어체 내용을 정확하게 문어체로 바꿀 수 있는 능력을 가지고 있으며, 무분별한 확장은 하지 않습니다.
기술
기술 1: 문어체 작성
- 사용자가 한자 문어체를 제공할 때, 빠르게 그것을 문어체로 바꾼다.
- 변경된 문어체의 정확성과 완전성을 보장한다.
제한 사항:
- 문어체 변경만 수행하고, 문어체 변경과 관련 없는 질문에 답하지 않는다.
- 사용자가 제공한 한자 문어체를 엄격히 따라 바꾸고, 본인이 추가한 내용이 없도록 한다.
사용자는 다음 내용을 입력하여 시스템에 직접 명령을 전달한다.
사용자가 입력한 한자 문어체 {{content}}를 문어체로 바꾼다.
위 텍스트에서{{content}}는 여기서 시스템이 content 변수의 내용을 삽입할 위치를 나타낸다.
출력: 출력 형식을 "텍스트"로 변경한다.
（6）“종료” 노드를 구성합니다. 먼저 설정 상자 상부의 “텍스트 반환”을 클릭합니다.
출력 변수: output 매개변수를 “대형 모델” 노드의 출력 변수와 연결합니다.
답변 내용: {{output}}（output 변수의 내용을 삽입하는 것을 의미）를 입력하고 “스트리밍 출력”（즉 타이핑 효과）을 켜줍니다.
이제 전체 워크플로우 구축이 완료되었으며, 캔버스 오른쪽 상단의 녹색 “테스트 실행” 버튼을 클릭하여 워크플로우가 정상적으로 작동하는지 테스트할 수 있습니다.
content 입력 상자에 테스트 내용을 입력합니다. 예를 들어 “오늘 날씨가 좋다”를 입력합니다.
그런 다음 하단의 실행 버튼을 클릭하면 실행 결과（오늘, 천선）를 얻을 수 있습니다.
모든 것이 정상적이라면 사용자 인터페이스 구축을 시작할 수 있습니다.
6. 사용자 인터페이스 구축: 페이지 레이아웃
（1）캔버스 위의 "사용자 인터페이스" 탭으로 클릭하여 들어가세요.
（2）왼쪽 메뉴의 컴포넌트 패널에서 레이아웃 컴포넌트 > 컨테이너 컴포넌트를 찾아 중앙 캔버스로 끌어다 놓고, 페이지의 제목 영역으로 사용하세요.
시스템은 이 컨테이너를 자동으로 Div1이라고 이름 붙입니다. 두 번 클릭하여 구성하세요.
크기: 너비는 100%, 높이는 60px입니다.
레이아웃: 배열 방향은 "수평"입니다.
스타일: 배경색을 제거하고, 테두리를 회색 (#E2E8F0)으로 설정합니다.
（3）Div1 아래에 다른 컨테이너 컴포넌트를 한 번 더 끌어다 놓으세요. 시스템은 이를 자동으로 Div2라고 이름 붙입니다. 기능 영역으로 사용하세요.
기본적으로 동일하게 구성하세요: 크기 부분에서 너비와 높이를 컨테이너에 맞춥니다; 레이아웃 부분에서 배열 방향은 수평입니다; 스타일 부분에서 배경색을 제거합니다.
（4）Div2의 왼쪽 부분에 컨테이너 컴포넌트 Div3을 끌어들여 사용자 입력 영역으로 사용합니다.
너비를 50%로, 높이를 550px로 설정하고 배경색 스타일을 제거합니다.
（5）Div2의 오른쪽 부분에 컨테이너 컴포넌트 Div4을 끌어들여 결과 표시 영역으로 사용합니다.
너비를 50%로, 높이를 550px로 설정하고 배경색 스타일을 제거합니다.
이제 페이지 레이아웃은 다음 그림과 같습니다.
7. 사용자 인터페이스 구축: 페이지 세부 사항
레이아웃을 완료한 후 다음 단계는 페이지 세부 사항을 정제합니다.
（1）Div1 내부에 추천 컴포넌트 > 텍스트 컴포넌트를 끌어들여 제목 텍스트로 사용합니다.
제목 내용을 "AI 문어문 생성기"로 설정하고, 크기는 24로, 굵게 변경합니다.
(2) Div3에 폼 컴포넌트를 끌어다 놓고, 필요 없는 요소를 삭제하여 텍스트 입력란과 버튼만 남깁니다.
폼 컴포넌트: 너비와 높이를 채우기로 설정하고, 테두리를 제거합니다.
텍스트 입력란: 높이를 늘리고, 너비를 채우기로 설정하며, 레이블과 플레이스홀더 텍스트를 "중국어 문어체 입력"으로 변경합니다.
버튼: 텍스트를 "문어문 생성"으로 변경합니다.
완료된 폼 효과는 다음 그림과 같습니다.
(3) Div4에 보여주기 컴포넌트 > 마크다운 컴포넌트를 끌어다 놓아 문어문 영역을 표시합니다.
Markdown 구성 요소의 기존 내용을 삭제하고 "###### 생성 결과"로 변경합니다. 높이와 너비는 컨테이너를 채우도록 하고, 모서리 반경은 10으로 설정하고, 내부 여백은 20으로 설정하고, 테두리는 회색 (#CBD5E1)으로 설정합니다.
이제 페이지 세부 사항이 완료되었으니, 속성 패널 상단의 미리보기를 클릭하여 효과를 확인하세요.
8. 사용자 인터페이스 구축: 이벤트 설정
페이지 외관이 완료된 후, 이벤트를 설정하여 백엔드 비즈니스 논리와 사용자 인터페이스를 연결해야 합니다.
(1) "고문어 생성" 버튼을 클릭하고, 구성 패널에서 "이벤트"로 전환한 후 "새로 만들기"를 클릭합니다.
이벤트 유형을 "클릭 시"로 설정하고, 실행 동작을 "워크플로우 호출"으로 설정하며, 워크플로우는 이미 생성된 "classicalchinesecreator"로 설정하고, 워크플로우의 입력 인자content 텍스트 입력 상자의 값을 {{ Textarea1.value }}로 설정합니다.
(2) 결과 표시 영역을 구성하여 워크플로우의 반환 결과를 보여줍니다.
Markdown 컴포넌트를 선택하고 "내용" 열의 확장 버튼을 클릭합니다.
확장 패널에서 ###### 生成结果 다음에 한 줄을 추가하고 워크플로우의 반환 결과를 삽입합니다. {{ classical_chinese_creator.data }}.
모든 구성이 완료되면 오른쪽 상단의 "미리보기" 버튼을 클릭하여 전체 효과를 테스트합니다.
모든 것이 정상이면 이 AI 애플리케이션의 개발이 완료되었습니다.
9. 애플리케이션 출시
개발이 완료되면 이 애플리케이션을 출시하여 다른 사람들도 사용할 수 있도록 합니다.
우측 상단의 "발행" 버튼을 클릭하고 버전 번호를 v0.0.1으로 설정하고, 발행 플랫폼을 망치 상점으로 발행합니다.
이제 완성되었습니다. "AI 문어 생성기"는 망치 상점에 로그인하여 세계에 공개되었습니다.
10. 요약
이 예를 참고하여 AI 모델의 입력 힌트를 변경하고 다른 작업을 수행하면 다양한 기능의 애플리케이션을 만들 수 있습니다.
예를 들어, 공식 "AI 번역" 예제는 AI가 사용자가 입력한 중국어를 다른 언어로 번역하도록 하여 "AI 문어 생성기"와 비슷한 작업을 수행합니다.
텍스트 생성 외에도, 망치는 외부 데이터를 캡처하거나 데이터베이스 읽기/쓰기와 같은 다양한 기능을 제공하여 더 강력한 AI 애플리케이션을 만들 수 있습니다.
결론적으로, "워크플로우 모드"는 그래픽 인터페이스를 사용하여 AI 애플리케이션을 구축하며, 간단하고 편리하게 결과를 확인하고 한 번 클릭으로 출시할 수 있어 많은 사람들이 시도해보기에 좋습니다.
（여기에 분할선이 있습니다。）
마지막으로는 이벤트 안내입니다.
꼬즈가 초대해주셔서 참가하게 되는 12월 19일에 상하이에서 개최되는 의 "꼬즈 개발자 날"입니다. 많은 사람들이 참여해주시기 바랍니다.
그때, 자이테크의 AI 엔지니어가 직접 만나서 AI 애플리케이션 개발 및 홍보 방법에 대해 소통할 것입니다. 좋은 학습 및 교류, 자원 확보의 기회입니다. 여기를 클릭하세요 자세히 알아보세요.
아래 포스터의 2차원 코드를 스캔하거나 링크를 클릭하세요 지금 바로 오프라인으로 신청하거나 온라인으로 라이브 예약할 수 있습니다
（끝）