Creating the Smartest Learning Book with AI Integration

일러스트 입문서는 AI와 스토리텔링을 결합하여 개인화된 학습 경험을 제공합니다.

### 일러스트 입문서 만들기: 재미있고 인터랙티브한 학습 경험
* 📚 무엇이든 재미있게 알려주는 책인 일러스트 입문서의 컨셉은 **1995년에 출간된 공상과학 소설에서 영감을 받아 AI가 생성한 스토리와 비주얼의 잠재력**을 보여줍니다.
* 💻 이 아이디어를 실현하기 위해 저는 비싼 가격에도 불구하고 **이 혁신적인 프로젝트의 플랫폼 역할을 할 Cold Books E-Ink 태블릿**을 주문했습니다.
* 📝 저의 브레인스토밍 과정은 **애플리케이션의 구조를 설계하는 것**부터 시작하여 사용자 프롬프트에 따라 **내러티브와 비주얼을 생성하는 AI**를 통합하는 데 중점을 두었습니다.
* 🎨 저는 Figma를 사용하여 **환영 페이지, 사용자 입력 페이지, 코스 콘텐츠 페이지 등 사용자 인터페이스의 대략적인 프로토타입**을 만들었으며, 모두 개별 학습 경험에 맞게 조정했습니다.
* ✨ 저는 **Midjourney를 활용하여 페이지에 고유한 일러스트**를 생성하고, 시각적 요소가 흥미롭고 교육하는 콘텐츠와 연관성이 있도록 했습니다.
* 🔧 프로젝트를 코딩하는 단계로 전환하면서 디자인 프로세스를 간소화하는 새로운 기능과 **Tailwind CSS와의 원활한 통합**을 위해 **Next.js 버전 15**를 선택했습니다.
* 📊 백엔드 개발을 위해 **LangChain을 기반으로 구축된 Langflow**를 선택하여 데이터와 AI 모델을 효과적으로 관리하면서 복잡한 애플리케이션을 구축하기 위한 사용자 친화적인 인터페이스를 만들 수 있었습니다.
* 🚀 광범위한 테스트와 통합을 거쳐 사용자가 배우고자 하는 프로그래밍 언어 또는 프레임워크를 기반으로 **개인화된 스토리를 생성하는 일러스트레이션 입문서**를 성공적으로 출시했습니다.

How I Used AI to Bring Sci-Fi’s Smartest Book to Life

I'm Adrian from Australia, a designer and developer who makes websites and apps using platforms like React Native. I'm hoping to share some of the things I've learnt over the years about my career and hobbies for coding, user interface and experience!

Some of the things we will cover will include:
- Development for React, React Native, Javascript, HTML, CSS, etc
- Small changes to improve UI & UX, like the use of colour, positioning and size
- Large changes like websites or apps, like entire re-designs
- Techniques on creating style-guides
- Reviews of existing businesses online presence and tips on improving them

#coding #programming #ui #ux #webdevelopment #development #react #reactnative #design #userexperience #userinterface

Adrian Twarog

가장 스마트한 책을 위한 컨셉과 영감

재미있고 교육적인 책에 대한 아이디어를 영상으로 구현했습니다.

1995년 공상과학 소설에서 영감을 받아 실시간으로 이미지와 내레이션으로 무한한 스토리를 생성할 수 있습니다.

이 책으로 친구를 키로, 함수를 상호작용으로 사용하여 파이썬을 배우는 예제입니다.

프로젝트용 전자 잉크 태블릿을 구입합니다.

AI, 내러티브, 시각적 요소, 텍스트 등 애플리케이션의 요소를 브레인스토밍하고 순서도를 작성합니다.

텍스트, 오디오, 이미지 생성을 위해 OpenAI, ElevenLabs, Midjourney를 활용합니다.

환영, 학습 입력, 코스 콘텐츠 페이지의 세 가지 페이지로 디자인합니다.

시각적 요소와 글꼴을 고려하여 Figma를 사용한 완성도 높은 디자인.

Google 글꼴 및 기타 웹사이트에서 글꼴을 선택하여 중세 스타일의 글꼴을 선택합니다.

SVG를 사용하여 페이지 모서리, 밑줄 및 테두리를 디자인합니다.

Midjourney를 사용하여 이미지 생성, 변형 생성 및 전자 잉크 디스플레이에 맞게 조정합니다.

태블릿 도착 및 Figma 디자인 테스트.

태블릿의 Android 시스템과 Figma 앱을 사용하여 프로토타입을 제작합니다.

Next.js, HTML, CSS를 사용한 프런트엔드 개발.

LangChain을 활용한 Langflow를 통한 백엔드 개발.

랭플로우와 랭체인에 대한 소개와 설명입니다.

파일 업로드, 텍스트 분할, 임베딩 생성, 데이터베이스 사용 등 데이터 준비에 Langflow를 사용합니다.

채팅 입력을 위해 Langflow에서 새 플로우를 만들고, 데이터베이스에 연결하고, RAG를 사용합니다.

Langflow API를 Next.js 앱에 통합합니다.

기능을 소개하는 일러스트 입문서가 완성되었습니다.

AI 구성 요소를 통합하는 데 따르는 어려움과 노력에 대해 논의합니다.