[연말 정산 프로젝트: 회고] 디자이너가 디자인부터 개발까지?!

2023년에 완성하지 못한 디자인 포트폴리오를 노코드툴 webflow를 이용해서 함께 만들어보았습니다.

이 글은 12월 26일(화)부터 12월 30일(토)까지 진행되었던 노코드툴로 웹사이트를 제작하는 [연말 정산 프로젝트]의 회고입니다.

🚀 연말 정산 프로젝트의 시작

디자이너/기획자분들이 포토폴리오 혹은 프로토타이핑 등 피그마로 만들어놓은

멋진 웹디자인을 직접 노코드로 구현해볼 수는 없을까?

GPT4 Vision의 등장으로 다양한 AI 웹사이트 빌더들이 생겨나고 있는 시기입니다.

관심을 가지고 보던 중 기존의 노코드툴들도 강력한 기능들을 가지고 있다는 것을 알게 되었습니다.

AI 웹사이트 빌더들은 AI가 웹사이트를 제작해주기는 하지만,

같은 Input에도 다른 Output을 가져오는 등 랜덤한 값을 결과로 가져온다는 한계가 있습니다.

빠르게 웹사이트를 얻을 수 있지만, 세밀하게 실제로 원하는 결과를 얻을 수는 없었습니다.

이미 기존 노코드툴들에는 랜덤하게 나오는 값을 추후에 원하는 결과로 조절할 수 있는 기능이 있습니다.

AI 웹사이트 빌더들이 기존 노코드툴에 결합되면서 더 강력해질 수 있었고,

뿐만 아니라, 기존 노코드툴 또한 그 자체로 강력한 기능들을 내포하고 있다는 것을 알게 되었습니다.

webflow는 웹사이트의 랜딩페이지나 CMS(Content Management system, 블로그 등과 같은 static한 데이터를 관리할 수 있는 시스템)를 코드없이도 만들 수 있는 최고의 툴이었습니다.

또한 프론트엔드 개발을 하던 입장에서 보더라도,

퍼블리싱의 영역(HTML, CSS)의 모든 것을 노코드로 옮겨놓았기 때문에

드래그 앤 드롭과 설정 변경만으로도 특정한 한계없이 웹사이트를 만들 수 있었습니다.

(이와 같은 실험의 결과로 드로잉코딩클럽에서 다양한 인터렉션 웹사이트를 제작해보았습니다.)

이런 간편한 UI로 무궁무진한 결과물을 낼 수 있다는 것을 보고

또 하나의 가능성을 느꼈습니다. 가능성 바탕으로 세운 가설은 다음 2가지입니다.

디자이너/기획자분들은 이미 피그마와 같은 디자인툴을 통해서

드래그 앤 드롭 + 설정변경과 같은 간편한 UI에 익숙해져 있기 때문에

이와 같은 노코드툴을 굉장히 빠르게 학습할 수 있을 것이다.

디자이너/기획자분들이 개발적 지식이 없이도 노코드툴을 활용하면

피그마 포트폴리오 혹은 프로토타이핑한 결과물들을

웹사이트로 만들 수 있기 때문에 이전과 다른 가치를 창출할 수 있다.

이건 개발자분들이 노코드툴을 활용하는 것보다

더 큰 결과를 낳는다고 생각했습니다.

그래서 이러한 2가지 가설을 검증하기 위해서 연말 정산 프로젝트를 진행하게 되었습니다.

연말 정산 프로젝트는

디자이너분/기획자분들이 피그마 포트폴리오 혹은

프로토타이핑으로 만들어놓은 멋진 웹디자인을

직접 노코드로 구현해보는 프로젝트입니다.

12/26(화) ~ 12/30(토)동안 온라인 세션(3시간) 1회, 오프라인 세션 1회를 진행했습니다.

온라인 세션(3시간)에서 webflow의 기본적인 내용과 심화 내용을 다루고,

오프라인 세션에서 결과물을 발표하고 질의응답을 받았습니다.

다른 노코드툴들도 각기 다른 장점이 있지만, 특히 webflow를 이용하면

실제 개발하는 것보다도 편리하고 빠르게 다양한 인터렉션을 구현할 수 있다는 점에서

webflow를 교육에서 다룰 노코드툴로 설정했습니다.

창의력을 요하는 인터렉션 디자인 포트폴리오에 webflow는 적합한 도구였습니다.

(다양한 노코드툴[노코트 웹사이트 빌더]에 대한 비교는 드로잉 코딩클럽의 포스팅을 참조해주세요)

✅ 실제로 모집하는 글을 올렸을 때, 반응은 어땠을까?

함께 드로잉코딩클럽을 함께 운영하는 주환님께서 디스콰이엇에

[연말정산 프로젝트] 홍보글을 12월 19일에 올렸습니다.

실제로 프로젝트를 진행하는

12/26(화) ~ 12/30(토)까지 일주일 남은 시점에 급하게 홍보를 했고 연말임에도 불구하고

13분이 신청해주셨습니다.

원래는 선착순으로 딱 두분만 진행하려고 했으나, 많은 분들이 신청해주신 관계로

의견을 묻고 일정을 조정하여서 6분이 오픈 카톡방에 들어와주셨습니다.

실제로 디자인 업무에 종사하고 계신분 + 기획자분들이 대부분이셨고

노코드툴을 다뤄본 경험이 적으신 분들이었습니다.

🖐️ 세션 준비 과정과 세션 진행

세션 준비 과정

귀중한 신청인만큼 한분한분 모두 원하는 결과를 얻어갈 수 있도록

세션을 디테일하게 준비를 했습니다.

먼저 신청해주신 분들을 대상으로 본인의 포트폴리오와 레퍼런스를 받았습니다.

(레퍼런스)

레퍼런스와 포트폴리오를 보면서 공통되는 효과들을 카테고리별로 모았고,

공통되는 효과를 표현하는 하나의 인터렉션을 실습 예제로 다뤄서

webflow의 인터렉션에 대한 이해를 높이고자 했습니다.

그 결과 crowdyflow라는 웹사이트를 실습 예제로 잡았고,

한가지 예시와 3가지 섹션을 실습하며 온라인 세션을 진행했습니다.

온라인 세션 진행과 반응

온라인 세션의 진행 목차는 다음과 같습니다.

먼저, button을 호버했을 때, 실행되는 애니메이션을 시작으로 기본적인 웹플로우 사용법을 간략하게 다뤘고

그 후에는 폰트 설정부터 공통 속성을 넣는 방법에 대해서 배웠습니다.

위에서 다루는 3가지 예시 중(시간 관계상) 2가지 예시를 다루면서 실습과 강의를 진행했습니다.

온라인 세션의 특성상 한 부분이라도 놓치면, 따라오지 못하는 낙오자가 발생하기 때문에

설명과 실습의 한 챕터가 끝날 때마다 질문을 받고,

해결되지 않는 부분이 있다면 수강생분들의 화면을 공유해서

함께 해결하고 넘어가는 것을 기본으로 삼았습니다.

그런 노력 덕분인지 이 점을 굉장히 좋아해주셨습니다.

세션도 참여해주신 모든 분들이 5점 만점에 5점으로 만족해주셨고, 좋은 반응을 보여주셨습니다.

(실제 세션 진행 화면)

온라인 세션을 진행한 결과 하루동안 세션을 진행하셨음에도

모든 분들이 웹플로우의 기본 사용법에 익숙해지셨습니다.

최초에 설정했던 가설 중

"디자이너분들이 기존 역랑을 활용하면 학습속도가 더 빠를 것이다."라는

가설이 일부 검증될 수 있었습니다.

오프라인 세션 진행

온라인 세션 후 오프라인 세션 전까지 본인의 포트폴리오를 만들면서 질의응답을 진행했고,

12월 30일 토요일에 오프라인 세션을 진행했습니다.

오프라인 세션에서는 실제 포트폴리오를 바탕으로 발표와 질의응답, 심층 인터뷰를 진행했습니다.

온라인 세션 이후 카톡방에서 질의응답을 받으면서

"webflow to figma"를 활용해서 figma로 만든 프레임을 바로 webflow로 옮기는 방법을 공유해드렸습니다.

"webflow to figma 플러그인"이 상당히 반응이 좋았는데요.

실제로도 프트폴리오를 만드실 때, "webflow to figma" 활용해서 편리하게 제작할 수 있다고 말씀해주셨습니다.

심층 인터뷰에서는

디자이너분들이 본인만의 웹사이트를 만들고 싶은 니즈가 있는지?

있다면 인터렉티브한 웹사이트를 만들고 싶은 니즈가 있는지?

부수입에 대한 니즈가 있는지?

현재도 디자인 외주를 통한 부수입 활동을 하는 사람들이 많은지?

웹사이트를 만들 수 있는 능력이 생긴다면 부수입을 위한 활동을 한 것인지 등을 물었습니다.

조금 더 디자이너의 입장에서 노코드툴에 대한 니즈를 검증해볼 수 있는 기회였던 것 같습니다.

🧐 진행하면서 느낀점

노코드툴의 빠른 학습 속도

언급했던 대로 webflow를 배우는 속도가 빠르셨습니다.

webflow를 처음부터 끝까지 배우는데 0 ~ 10의 리소스가 든다면

0 ~ 4의 기본적인 내용을 배울 때, 시간이 많이 소모됩니다.

하지만, 피그마 등의 디자인툴 활용역량이 이미 있으셨고,

그것과 비슷한 메커니즘이기 때문에 빠르게 배우실 수 있으셨습니다 .

Figma to Webflow

figma to webflow라는 플러그인을 굉장히 좋아하셨습니다.

figma로 작업된 내역을 webflow의 형식에 맞게 조금만 수정하면,

figma에서 작업한 페이지, 특정 버튼 등등을 바로 webflow에서 사용할 수 있는 툴입니다.

아직까지 폰트랑 svg 등이 호환이 안 된다는 불편함이 있지만,

이미지 등은 따로 import해서 사용하면 되고, 폰트도 한번에 적용할 수 있기 때문에

굉장히 편리하게 웹사이트를 만들 수 있다고 하셨습니다.

모두가 함께 하는 세션의 가치

온라인 세션이더라도 한 분 한 분 잘 따라오고 있는지

확인하면서 진행했을 때, 확실하게 많은 것들을 얻어가시는 것을 확인할 수 있었습니다.

그에 따라 반응도 좋았습니다. 앞으로도 이와 같은 매니징으로 세션을 진행하고자 합니다.

노쇼 방지비라도 일부 유료가 필요하다.

연말에 전부 무료로만 진행하다보니, 세션을 거듭할수록 참여율이 떨어졌습니다.

참여하시는 분들의 초기의 목표를 달성하기 위해서라도, 모든 세션 참여를 독려하기 위해서라도

일부 유료가 필요하다고 생각했습니다.

앞으로 교육 프로그램을 진행하면서 보안해야 할 내용

웹플로우 스크롤 시 크기가 변하는 애니메이션을 다룰 때, 내용이 일부 어려웠다고 말씀해주셨는데,

이런 부분을 보안해서 준비하면 좋을 것 같습니다.

더 알아가고 싶은 점들을 물었는데, figma to webflow를 위한 webflow 형식에 맞춘

figma frame 세팅방법과 더 다양한 스타일과 인터렉션을 배워보고 싶다고 답해주셨습니다.

🛑 1월 말에 있을 4주 교육프로그램 베타 테스터 모집 🔥

2월 중순에는 기간을 늘려서 4주동안 진행하는 유료 프로그램을 본격적으로 개설할 예정입니다.

그 전에 1월 중순의 유료 프로그램의 배터 테스트를 모집하고 있습니다.

4주간 진행할 예정이고, 사전신청을 받고 있습니다.

이번 교육을 통해서 혼자서도 노코드를 활용한 웹사이트를 제작할 수 있는 실력을 갖출 수 있습니다.

4주동안 진행하기 때문에 더 넓은 범위의 개념과 더 많은 실습 예제를 다룰 수 있습니다.

관심있으신 분들은 아래의 폼에 응답 부탁드려요!

🫵 당신의 비전과 철학을 믿기 때문에 당신의 🔨 제품을 사용합니다.

이 글은 *"백민기의 10분 인사이트" 중 80화의 내용입니다. 위의 두 글을 읽고 느낀 점을 작성합니다.

*: 백민기는 매일 10분 인사이트를 작성하고 있고, 오늘로 80일 연속 작성 중 입니다.

🫵 당신의 비전과 철학을 믿기 때문에 당신의🔨 제품을 사용합니다. 

추상적인 말 같겠지만, 우리는 모든 소비를 할 때

어떤 제품의 비전과 철학에 동의하기 때문에 그 제품을 사용한다.

100번 양보하여 말하면, 특정 제품의 비전과 철학이

우리의 가치와 어긋나지 않기 때문에 그 제품을 구매한다.

하고 싶은 말은 결국 모든 제품에 비전과 철학이 담겨있다는 것이다. 

“뉴진스”, “르세라핌”, “에스파”, “아이브” 4세대 아이돌의 이미지 메이킹을 봐도 

각각의 세계관과 스토리텔링을 가지고 있다. 

우리가 무의식적으로 소비하는 것도 모두 비전과 철학이 담겨있다. 

애플의 감성이니 뭐니 하는 것도 결국 제품의 비전과 철학이다. 

그것들은 크게는 브랜딩과 기업의 스토리, 작게는 하나의 마케팅 하나의 광고에서 드러난다. 

그 제품이 별볼일 없는 시작 단계거나 스타트업의 제품일 때는 더더욱 그 제품의

비전과 철학을 믿기 때문에 제품을 사용한다.

사실 스티브잡스의 2007년 최초의 아이폰도 그 당시에는 MVP였다. 

앱 수에 제한이 있었다. 브라우저를 제외하고는 로드할 수 없었다. 복사 붙여넣기도 안 되었다. 

알림(푸시 알림)도 없었다. 그때만 해도 한국의 다른 폰들이 제공하는 그 흔한 전면카메라도 없었다. 

그래도 사람들은 아이폰이라는 제품에 열광했다. 

근데 왜 열광했느냐? 그 제품의 비전과 가치가 충만했기 때문이다. 

인터넷, 아이팟, 폰(전화), 인터넷, 아이팟, 폰(전화) 

이것이 하나로 합쳐질 것이라는 생각과 기대감.

그것이 사람들을 열광하게 했다. 

지금은 불편하지만, 이 제품을 쓰면 언젠가는 이 제품이 나아져서 꿈꾸는 세상을 만들어줄거야.

그럴 거라는 기대. 

지금의 Chat gpt도 엄청난 발전이 있었고,

와우하지만, 완벽한 AGI는 아니다. 

사람들은 Open AI가 만들어낼 완벽한 AGI를 기대한다.

그렇기 때문에 그 제품을 신뢰하고 사랑한다. 

그래서 최종적으로 하고 싶은 말이 뭐냐. 

빌딩인 퍼블릭에서 가치와 비전을 팔아야 한다. 

제품의 제작과정 말고도 그 너머의 가치와 비전을 널리 알려야 한다.

그럼 그 비전과 가치를 공감해주는 고객들이 온다.

비전과 가치를 알리는 것에 미숙했던 것 같다.

앞으로의 콘텐츠에는 가치와 비전을 담아야겠다.

어떤 다른 관점으로 바라보고 있고, 그걸 어떤 단계로 할 거고,

지금은 어떤 것들을 하고 있고, 그것이 어떻게 가치와 비전을 이뤄줄 건지에 대해서 담아야겠다.

끝.

노코드로 만든 바이럴 서비스: "청룡이의 다짐"

👩‍💻🙅‍♀️ 이 모든 걸 노코드로 만들었다고?

넵! 청룡이의 다짐은 100% 노코드 툴들을 이용해서 만들었는데요.

이번 포스팅에서는 서비스 사용법에 대해서 이야기하고,

다음 포스팅에서는

webflow, memberstack, zapier 등의 노코드툴을 활용해서

어떻게 로그인, 댓글, 회원정보 수정, 프로필 공유 등을 구현할 수 있었는지

이야기해보겠습니다!

👋 안녕! 내 이름은 청룡이!

사실 나는 한국 전설 속에 등장하는 🦕이무기야.

난 2024년을 맞이해서 999살이 되었어.

1000년 중 딱 1년만 🏃갓생을 산다면,

🐉 용으로 변할 운명을 타고 났는데,

999년동안 한번도 이룬 적이 없어😂ㅠㅜㅠㅜ

내가 좋아하는 건 누워서 유튜브 숏츠📺를 보는 거야.

하지만 너무 오랫동안 해서 그것도 😣지겨워졌어!

올해 마지막으로 용이 될 수 있는 기회인데,

계획을 짜고 열심히 실행해서

"이제는 진정한 🐉용이 되고 싶어!"

너의 계획은 뭐야? 너의 계획을 들려줘! 계획을 공유하고 함께 응원해보자고🔥!!!

🐉 청룡이의 다짐 사용법

step1: 아래의 홈페이지에 들어가서 회원가입을 진행해줘!

step2: 나의 이야기를 읽고 너의 2024 계획을 공유해줘!

step3: 너의 계획 카드를 친구들에게 공유해서 응원을 받아봐!

웹플로우(Webflow)로 코드없이 화려한 인터렉션 만들어보기

노코드 서비스 웹플로우(webflow)를 활용하여 어디까지 개발이 가능한가?라는 주제로

글을 쓰고 있습니다.

1. 웹플로우(webflow)로 인터렉티브 웹사이트 만들기

   • 토스랜딩페이지 클론하기

   • 웹디자인 awwwards 수상작 클론하기(현재 포스팅)

2. 웹플로우(webflow)와 노코드 툴을 활용하여 웹서비스 만들기

이번 포스팅은 웹디자인 awwwards같은 수상작과 같은 화려한 인터렉션을 클론하는 것인데요.

정확하게 awwards 수상작은 아니지만, awwwards 수상작과 같은 화려한 웹사이트를 가져와봤습니다.

@연주환 님과 함께 한해동안 작업한 웹디자인 포트폴리오를 직접 웹사이트로 구현하는 [연말정산 프로젝트]를 진행하고 있습니다.

현업 디자이너분들, 취업을 준비하시는 분들이 참여해주셔서 webflow의 기본적인 내용을 배우고, 본인만의 포트폴리오를 웹으로 만들고 계신데요. 거기서 교육자료 함께 만들어본 내용을 공유드립니다.

다음 게시글에서는 [연말 프로젝트]가 어땠는지, 공유해드리겠습니다.

스크롤 인터렉션 분석해보기

들어가기 전에 먼저 위 인터렉션을 자세히 분석해봅시다.

1. 스크롤에 따라 "Work"와 "Our recent"라는 텍스트가 일정 수준으로 작아집니다.

2. Work(Our recent)라는 글자가 특정 영역에서 가운데 화면에 고정되어있습니다.

1. 이미지 요소들이 커지면서 등장했다가 작아지고, 투명해지면서 사라집니다.

이와 같은 분석결과를 구현하기 전에 뼈대를 만들고 스타일을 구현해보겠습니다.

뼈대 만들어보기

지난 글들에서도 많이 다뤘지만, 인터렉션을 만들기 전에 뼈대와 스타일을 잡는 것이 중요합니다.

뼈대 구성하기

전체적인 큰틀과 레이아웃을 이렇게 잡아보았습니다.

webflow, 브라우저, 피그마에서는 모두 마찬가지지만,

각각의 요소들이 모두 박스처럼 구성되어 있어서 박스형태로 구성요소들을 잡아주고

만들어나가는 것이 편합니다.

뼈대 만들기

텍스트 구성하기

이미지 레이아웃 구성하기

이미지 아이템 박스만들기

스타일 넣기

스크롤 인터렉션 적용하기

이제 본격적으로 스크롤 인터렉션을 만들어보겠습니다.

지정한 스크롤 영역에서 스크롤되는 동안 텍스트를 가운데로 고정하기

아래는 완성본인데요. Work라는 텍스트가 스크롤이 아무리 되어도 가운데 특정 위치를 지키고 있는 모습을 볼 수 있습니다.

이 인터렉션은 복잡해보이지만, 사실 position: sticky 속성 하나면 충분합니다.

position: sticky 속성은 부모가 스크롤하는 동안 화면 영역(Viewport)의 특정 영역에 고정된 상태로 이동하는 속성입니다. 위의 애니메이션을 보면, work라는 글자가 특정 영역에 고정된 상태로 이동하는 모습을 볼 수 있습니다.

위의 그림은 position: sticky를 표현한 그림인데요. 1번 그림에서 동그란 요소는 자기의 높이를 지키고 있다가, 2번째 그림에서 스크롤이 진행되고, 화면 영역이 특정 높이를 지날 때, 고정되어서

3번, 4번 그림처럼 부모요소의 스크롤 영역동안 화면 영역에 고정되어 스크롤되는 것을 볼 수 있습니다.

스크롤에 따라 텍스트 크기 작게 만들기

스크롤에 따라 텍스트 크기를 작게 만들려면 while scrolling in view 트리거를 먼저 알고 넘어가야 합니다.

While scrolling in view 트리거는 애니메이션 트리거의 한 종류입니다.

트리거는 간단하게 말해서 애니메이션을 언제 실행할 것인지를 결정하는 계기입니다.

위의 그림을 보면 while scrolling in view 트리거를 잘 표현하고 있습니다.

검은색 상자가 전체 웹사이트 페이지, 파란색 영역이 화면 영역, 빨간색 영역이 특정 박스의 높이, Work는 특정 텍스트 요소라고 가정합니다.

스크롤이 될 때마다 파란색 화면 영역은 아래로 움직입니다.

While scrolling in view 트리거를 빨간색 박스 영역에 지정한다면,

빨간색 박스영역이 화면영역에 드러나는 순간을 0%,

화면에서 사라지는 영역이 100%되면서 트리거가 설정됩니다.

이렇게 지정된 0% ~ 100% 사이에 영역에서 특정 요소가 어떻게 변할지 애니메이션을 넣을 수 있습니다.

위 그림에서는 0%에서 70%의 영역으로 갈 때, work라는 글자가 작아지도록 설정했습니다.

1번그림에서 3번 그림으로 갈수록 work라는 텍스트가 작아지는 것을 알 수 있습니다.

이러한 트리거와 애니메이션을 webflow에서 직접 설정해주면 아래와 같습니다.

이미지 요소들 커졌다가 사라지게 만들기

위처럼 이미지 요소들은 등장할 때, 커졌다가 특정 지점을 넘었을 때, 작아지고 투명해지면서 사라집니다.

이건 아까 위에서 배웠던 while scrolling in view 트리거가 이미지를 감싸는 박스 요소 하나하나에 설정되었던 것인데요. 설정 방법은 아래와 같습니다.

6번을 보면 아까와 달리 여러가지 애니메이션들이 중첩되어서 사용됩니다.

이는 while scrolling in view 중에 커졌다가, 다시 작아지는 것을 표현한 scale 애니메이션과 투명도가 진해졌다가 다시 연해지면서 사라지는 애니메이션을 표현했기 때문입니다.

전체결과는 아래의 웹사이트에서 확인하실 수 있습니다.

(첫 화면은 흰색인데, 아래로 스크롤해보세요)

다음 게시글에는

이제 계획했던 노코드 서비스 웹플로우(webflow)를 활용하여 어디까지 개발이 가능한가?에서

인터렉티브 웹사이트 만들기의 챕터가 끝났는데요. 다음주부터는 새로운 주제로 포스팅해보도록 하겠습니다.

1. 웹플로우(webflow)로 인터렉티브 웹사이트 만들기

   • 토스랜딩페이지 클론하기

   • 웹디자인 awwwards 수상작 클론하기(끝)

2. 웹플로우(webflow)와 노코드 툴을 활용하여 웹서비스 만들기

Outro

코드없이 디자이너/기획자분들의 포트폴리오를 웹사이트를 제작하는 [연말정산 프로젝트]가 이번주 토요일 오프라인 세션을 끝으로 마무리됩니다.

참여해주신 반응과 리뷰가 좋아서 가장 빠르게 1월 말쯤 새로운 프로젝트 진행을 계획하고 있습니다.

노코드로 본인만의 포트폴리오를 만들고 싶으신 분들은 언제든지 참여바랍니다.

노코드 웹빌더 정리 + 비교#2: AI 웹빌더 + 노코드 웹빌더

노코드로 웹사이트를 만들 수 있는

노코드 웹빌더를 정리하는 포스팅입니다.

지난 글에서는 노코드 웹빌더의 대표격인 webflow와 framer를 비교하는 글이었는데요.

이번 포스팅에서는 여러가지 웹빌더를 소개하는 글입니다.

Notion + Oppy

노션의 창업자 Ivan은 처음에 친구들의 1page짜리 포트폴리오 웹사이트를 만들어주기 위한 소프트웨어를 만들었습니다. 이처럼 노션은 그 자체적으로 문서를 관리하고, 문서 자체를 URL 주소로 공유하기 쉽도록 제작되었습니다. 하지만 이것이 홈페이지처럼 동작하기에는 몇 가지 한계가 있었는데요.

Oppy를 활용하면 정말 쉽게 노션 페이지를 최적화된 웹사이트로 만들 수 있습니다.

또한 노션으로 쉽게 수정이 가능해서 많은 기업들에서 회사 브랜딩 페이지, 팀 브랜딩 및 채용 페이지로 만들고 있습니다. 이처럼 Notion + Oppy를 활용하여 빠르게 원하는 페이지를 만들 수 있습니다.

노션으로 만든 링크를 복사해서 넣으면, 자신만의 도메인 주소로 연결가능하고, 노션보다 빠른 페이지 로딩, 구글 내얼리틱스 등의 연결도 가능한 다양한 기능을 제공하고 있습니다.

아임웹(imweb)

아임웹은 카페24, 식스샵과 같이 국내에 있는 브랜드들이 자체적인 몰을 구축하기 위해서 가장 많이 사용하는 쇼핑몰입니다.

국내의 PG사들과 연결이 쉽고, 다양한 템플릿을 제공하고 있어서 손쉽게 제작이 브랜드 몰을 제작하기 쉽습니다.

드래그 앤 드롭 UI를 활용하여 손쉽게 디자인을 구현할 수 있고, 게시판, 갤러리, 일정, 지도 등 굉장히 다양한 모듈들을 사용하여 강력한 기능을 제작할 수 있습니다.

Softr

Softr 또한 많이 사용하는 노코드 웹빌더 중 하나입니다.

드래그 앤 드롭 가능하고요.

softr의 최대 장점은 구글 스프레드 시트, 에어테이블과 같은 데이터 베이스를 손쉽게 연동할 수 있다는 점입니다.

CMS와 같은 서비스를 자체적으로 구축하고 데이터를 관리해주는 서비스들도 있지만, softr은 다른 데이터 베이스들과 연동에 강점이있습니다.

Readymag

Readymag도 드래그 앤 드롭 UI를 활용하여 직관적으로 웹사이트를 개발할 수 있습니다.

Readymag의 뾰족한 장점은 애니메이션과 인터렉티브한 요소인데요.

애니메이션과 인터렉티브한 프리셋들이 자체적으로 구축되어있어서 손쉽게

Relume

Relume은 AI기반의 웹 빌더입니다.

사용자의 입력을 바탕으로 AI가 디자인을 생성하고, 복잡한 디자인 과정 없이도 간편하게 웹사이트를 만들 수 있습니다. 사용자 친화적인 인터페이스를 구성하고 수정할 수 있습니다.

figma와 연동해서 사용하기 위한 figma 플러그인 kit,

webflow와 연동가능한 익스텐션이 있어서 함께 사용하기 용이합니다.

relume으로 먼저 와이어프레임을 만들고, 그것을 figma로 옮겨서 구체적인 디자인을 한 후 webflow로 옮기는 방식으로 작업하면 작업 효율이 이전과 비교할 수 없을 정도로 좋아진다고 말합니다.

Animaapp

anima는 Adobe XD, Sketch, Figma와 같은 인기 있는 UI/UX 디자인 도구를 export하여 웹사이트, 애플리케이션을 바로 HTML, CSS, React 코드로 만들 수 있는 서비스입니다.

이처럼 실제 디자인 도구를 코드로 변환하는데 강점이 있습니다.

Outro

위와 같은 웹빌더들을 정리해보았습니다.

노코드 로우코드 시장이 커지면서 노코드로 웹사이트를 만들 수 있는 서비스들이 고도화되고 있습니다.

최근에는 AI의 결합으로 더 손쉽게 웹사이트를 만들 수 있는 서비스들이 많아졌습니다.

최근에 랜딩페이지와 같이 비즈니스 로직이 없는 정적인(Static) 웹사이트의 경우에는

실제로 개발하는 것보다 노코드툴로 구축하는게 더 효율적인 것 같습니다.

CMS(Content management system)라고 불리는 블로그, 쇼핑몰과 같이 같은 형식에 다른 데이터를 관리하는 웹사이트드로 노코드로 만들어지고 있습니다.

현재 비즈니스 로직이 담긴 웹사이트는 여러가지 노코드 플랫폼들을 결합해야 구현이 가능합니다.

앞으로 노코드 웹빌더들이 어떻게 발전할지 지켜보는 것도 재미있을 것 같습니다.

노코드 웹빌더 정리 + 비교#1: Webflow VS Framer

오늘은 노코드 웹빌더 서비스인 Webflow와 Framer를 비교해보겠습니다.

우선 제가 Webflow에 대한 경험이 많고, Framer에 대한 경험이 더 적어서 정확한 비교가 어려울 수 있다는 점을 전재하고 시작하겠습니다.

webflow, framer 소개

webflow와 framer는 모두 노코드로 웹사이트를 말들 수 있는 서비스입니다.

두 서비스 모두 코딩에 대한 지식없이도 드래그 앤 드롭 인터페이스를 통해서 손쉽게 UI를 구성할 수 있습니다.

클릭 몇 번으로 만들어놓은 프로젝트를 배포할 수 있으며, 개별 도메인과도 연결이 가능합니다.

인터렉티브 웹사이트를 위한 애니메이션도 클릭 몇 번으로 구현할 수 있습니다.

블로그와 같이 컨텐츠를 데이터베이스로 관리하고 업로드할 수 있는 CMS(Content Management System)까지 제작할 수 있기 때문에 랜딩페이지와 같이 정적인 페이지뿐만이 아니라 다양한 용도로 사용될 수 있는 서비스입니다.

Framer

Webflow

(기본적으로 두 서비스 모두 왼쪽 패널에서 요소를 더하고, 오른쪽 패널에서 스타일을 지정하는 방식)

개발자 친화적 VS 디자이너 친화적

framer에서 사용하는 용어나 방식들은 피그마를 쏙 빼닮았습니다. 심지어는 대부분의 단축키가 피그마와 유사하다고 합니다. 그래서 framer는 디자이너 친화적인 노코드 웹 빌더라고 부릅니다.

반면에 webflow에서 사용하는 용어나 방식들은 개발에서 사용하는 용어와 방식을 그대로 가져왔습니다.

그렇기에 webflow를 개발자 친화적인 노코드 웹 빌더라고 부릅니다.

학습속도

피그마를 이미 다루고 있는 분들에게는 framer에 대한 학습속도가 적다고 합니다.

webflow에는 일부의 추가적인 학습이 필요합니다.

개인적인 경험으로는 피그마를 이미 다루고 있으시다면 두 가지 서비스 모두 빠르게 배워서 사용하실 수 있습니다.

인터렉션과 애니메이션

webflow와 framer 모두 강력한 인터렉션과 애니메이션을 제공합니다.

framer에서는 기본적인 효과와 일부 커스텀이 가능하지만,

webflow는 더 자유롭고 복잡한 인터렉션을 사용할 수 있습니다.

CMS(Content management System)

블로그와 쇼핑몰 같은 CMS를 두 서비스 모두 지원히지만, 아직까지는 Framer보다 Webflow가 제공하는 기능이 더 많다고 합니다. 해외에서는 webflow를 통해서 stripe와 같은 결제 시스템을 붙이는 것까지 가능합니다.

반면에 Framer도 CMS를 관리하는 서비스를 사용하는 것이 충분히 가능합니다.

최근 Framer의 커뮤니티의 응집력이나 성장속도가 빨라서 앞으로 많은 기대를 해봅니다.

마무리

이번 포스팅에서는 Webflow와 Framer의 공통점과 차이점에 대해서 알아봤습니다.

저는 Webflow를 주로 사용한 입장에서도 다룬 것이라서 Framer를 사용하신 분들의 의견이 더 궁금합니다.

다음 포스팅에서는 더 다양한 노코드 웹빌더를 소개드리겠습니다. 감사합니다!

랜딩페이지 해킹2편: 세상의 모든 렌딩페이지 인터렉션을 노코드로 구현한다.

오늘은 typed 랜딩페이지의 인터렉션을 노코드로 구현해보겠습니다.

노코드 서비스 웹플로우(webflow)를 활용하여 어디까지 개발이 가능한가?라는 주제로

글을 쓰고 있습니다.

1. 웹플로우(webflow)로 인터렉티브 웹사이트 만들기

• 토스랜딩페이지 클론하기

• 다른 기업 랜딩페이지들 클론하기

• 웹디자인 awwwards 수상작 클론하기

1. 웹플로우(webflow)와 노코드 툴을 활용하여 웹서비스 만들기

토스랜딩페이지, flex 랜딩페이지를 지난 게시글에서 다뤄봤는데요.

오늘은 typed 랜딩페이지에서 멋있는 인터렉션에 대해서 다뤄보겠습니다.

Typed 랜딩페이지 인터렉션 분석

구성 톺아보기

주된 인터렉션은 스크롤에 따라서 Before Typed의 이미지를 After Typed의 이미지가 왼쪽에서 오른쪽으로 겹쳐서 대체되는 것처럼 보이는 것 입니다.

실제로 코드를 보면, Before Typed 이미지의 width는 스크롤에 따라서 점점 줄어들고, 이미 뒷 배경에 준비되어있던 After Typed 이미지가 드러나는 것을 확인할 수 있습니다.

가운데 있는 보라색 바도, Before Typed 이미지의 width(가로 넓이)가 줄어들수록 오른쪽에서 왼쪽으로 이동한다는 것을 알 수 있습니다.

Before Typed, After Typed의 텍스트의 색상도 Before Typed의 width에 따라서 색상이 바뀌는 것도 확인할 수 있었습니다.

그럼 차례대로 만들어보겠습니다.

HTML, CSS + 레이아웃 넣기

HTML, CSS를 속성을 넣어주었습니다.

레이아웃을 잡아주겠습니다.

포지션 absolute를 사용하여서 두 이미지를 겹쳐주고, 바도 오른쪽으로 정렬해주었습니다.

애니메이션 넣기

position:sticky로 위치 고정하기

position:sticky로 위치를 고정했을 때,

스크롤 영역만큼 저 영역이 화면에 고정되어있는 것을 알 수 있습니다.

스크롤에 따라 변하는 애니메이션

이 인터렉션에서 애니메이션은 크게 3가지가 있습니다.

우선 Before typed에서 After typed로 이미지가 바뀌어야 합니다.

다음으로는 보라색바도, 이 Before 이미지의 넓이가 100%에서 0이 되는 순간을 따라올 수 있도록 만들어보겠습니다.

보라색 바의 위치를 transform X 속성을 통해서 바꿔줬습니다.

다음으로는 스크롤 영역에 따라서 폰트 색상을 바꿔보겠습니다.

폰트 색상이 바뀔 시점을 지정해주고, 그 시점에 색상 속성을 바꿔주었습니다.

결과보기

아래는 실제 웹사이트입니다.

정리하기

typed의 랜딩페이지를 직접 구현해봤습니다.

position: sticky 속성을 이용해서 요소를 부모 요소의 스크롤 영역 동안, 화면 영역(viewport)의 특정 부분에 고정시켰습니다.

시점에 맞는 스크롤 애니메이션을 적용해보았습니다.

다음번에는 awward 수상작과 같은 더 복잡한 인터렉션을 구현해보겠습니다!

노코드로 웹디자인부터 웹서비스까지

노코드툴을 활용하여 인터렉티브 웹사이트 또는 백앤드 로직이 담긴 웹서비스를 제작하는 것에 관심이 있으신가요? 함께 만들어보면 좋을 거 같습니다!

노코드로 웹디자인부터 웹서비스까지 만드는 교육 프로그램을 내년 초에 계획하고 있습니다.

관심이 있으신 분은 아래의 구글폼에서 사전 신청해주세요.

어떤 내용에 관심이 있는지를 묻는 사전 수요조사입니다. 가볍게 참여해주세요!

랜딩페이지 해킹1편: 세상의 모든 렌딩페이지 인터렉션을 노코드로 구현한다.

오늘 부셔볼 녀석은 이거다.

노코드 서비스 웹플로우(webflow)를 활용하여 어디까지 개발이 가능한가?라는 주제로

글을 쓰고 있습니다.

1. 웹플로우(webflow)로 인터렉티브 웹사이트 만들기

• 토스랜딩페이지 클론하기

• 다른 기업 랜딩페이지들 클론하기

• 웹디자인 awwwards 수상작 클론하기

1. 웹플로우(webflow)와 노코드 툴을 활용하여 웹서비스 만들기

토스랜딩페이지를 클론을 지난 게시글에서 다뤄봤는데요.

랜딩페이지 인터렉션 클론을 이대로 마무리하긴 아쉬워서

국내 스타트업 랜딩페이지 중 멋있는 인터렉션을 가져와서 제작해봤습니다.

거기서 등장하는 인터렉션의 원리와 실습을 같이 진행해보겠습니다.

flex 랜딩페이지의 인터렉션 소개

오늘은 아래 gif에 있는 인터렉션을 구현해볼 것 입니다.

크게 2가지 섹션을 가지고 있습니다.

첫 번째 섹션

첫 번째 섹션은 "모바일은 핵심 경험에 집중"이라는 택스트가

첫 번째 스크롤 섹션이 끝날 때까지 가운데에 고정(position: "sticky")되어 있는 것이 핵심입니다.

화면 영역(Viewport)에 스크롤이 진입했을 때, 배경 색이 검은색으로 바뀌는 것도 특징이네요.

두 번째 섹션

두 번째 섹션은 아래와 같은 레이아웃에서 스크롤에 따라서 문구와 이미지가 바뀌는 인터렉션입니다.

같은 위치에서 이전 문구가 사라지고 새로운 문구가 등장합니다.

아래의 모바일 이미지같은 경우에 등장할 시점에 투명했다가 진해지고, 위로 이동하면서 등장합니다.

또 이미지가 사라질 시점에는 다시 투명해지고, 위로 이동하면서 사라집니다.

아래에서 다시 디테일한 요소들을 분석해보고 기본 세팅을 진행해보겠습니다.

폰트 + 이미지 세팅

원하는 폰트를 입력하고, 이미지를 다운받는 방법은 아래 토스 랜딩페이지를 제작해보면서 자세히 다뤘습니다.

이번 포스팅에서는 간략하게 설명하니, 궁금하신 분은 아래의 포스팅을 참고하시길 바랍니다.

폰트 세팅

flex에서는 Pretendard 폰트를 사용하고 있어서 pretendard로 설정해주겠습니다.

이전에 토스랜딩페이지를 만들 때, 웹플로우(webflow)에 custom fonts로 넣어주었던 Pretendard 폰트를 Body 태그에 설정해주겠습니다.

Body가 가장 부모 요소이기 때문에 Body에만 설정해주면 자식 요소들에게 모두 적용됩니다.

이미지 세팅

지난 포스팅에도 언급했던 것처럼 웹 상에서 보이는 거의 모든 이미지는 클라우드 상에 저장된 것을 가져오기 때문에 다운받아서 사용할 수 있습니다.

이번에도 클론에 필요한 이미지들을 flex 홈페이지로 가서 다운받아주겠습니다.

기본적으로는 이미지에 오른쪽 마우스 클릭 후 저장하실 수 있습니다.

종종 오른쪽 마우스 클릭이 막혀있거나 이미지를 정확하게 선택하기 어려운 경우 아래의 방법을 사용해주세요.

F12나 오른쪽 마우스 클릭 후 검사(inspect)를 누르시면 개발자 도구를 켜실 수 있습니다.

개발자 도구를 켜셔서 왼쪽 상단에 있는 마우스 버튼을 누르시면, 마우스의 이동마다 HTML 요소를 추적할 수 있습니다.

이미지를 다운받길 원하는 요소에 마우스를 올려놓으면 개발자 도구에 해당하는 요소의 코드를 추적할 수 있습니다. 거기에 연결되어있는 링크로 들어가면 실제 이미지에 접근해서 다운로드할 수 있습니다.

https://landing.flex.team/home/mobile/screen01.png

https://landing.flex.team/home/mobile/screen02.png

https://landing.flex.team/home/mobile/screen03.png

https://landing.flex.team/home/mobile/screen04.png

(이렇게 실제 이미지에 접근할 수 있음)

다운받은 이미지들을 웹플로우에 import한 후에 사용해봅시다.

기본 요소 구성하기

우선 인터렉션을 구현하기 전에 구성하고 있는 기본 요소를 제작해보겠습니다.

이 글에서 박스모델에 대해서 잠깐 설명했는데요.

그것처럼 HTML 요소들을 모두 박스라고 생각하고, 만들어줄 영역을 정의했습니다.

(인터렉션에 집중하는 글이기 때문에 HTML과 CSS를 디테일하게 어떻게 설정했는지는 생략하도록 하겠습니다.)

먼저 레이아웃을 생각하지 않고, CSS 속성만 넣어보겠습니다.

CSS를 모두 넣어주었습니다.

1번 이미지에서 "모바일은 핵심 경험에 집중" 섹션의 부모 박스가 엄청 큰 것처럼 보이는 이유는 실제로 스크롤되는 영역은 이것처럼 길고, 이 영역에서 스크롤되는 동안 "모바일은 핵심 경험에 집중"이라는 텍스트가 가운데로 고정되기 때문입니다.

4개의 subtitle과 4개의 이미지들을 차례로 나열해주었는데요.

두 번째 섹션의 스크롤에 따라 요소들이 쌍으로 나타나고 사라지는 애니메이션을 적용해주기 위해서 입니다.

레이아웃도 적용해보겠습니다.

이전에 아래로 정렬해줬던 이미지와 텍스트들을 한 곳으로 겹쳐줬습니다.

이제 인터렉션을 적용해보겠습니다.

인터렉션 구현하기

첫 번째 섹션 position: sticky + 배경색 변경

position: sticky

첫 번째 섹션의 인터렉션은 스크롤되는 동안 "모바일은 핵심 경험에 집중"이라는 택스트가 화면의 중심에 계속 위치해야 합니다.

이건 CSS의 기본 속성 position: sticky로 구현 가능합니다.

position: sticky는 HTML 요소가 가장 가까운 부모 요소가 스크롤되는 동안 화면 영역(viewport)를

기준으로 특정 영역에 위치를 고정시킬 수 있는 속성입니다. 부모 요소의 스크롤 영역이 끝나면, 화면 영역(viewport)에서 위치 고정이 풀리게 됩니다.

화면을 기준으로 top, bottom, left, right 등의 값으로 위치를 고정시킬 수 있습니다.

화면의 가운데 요소에 위치를 고정시키고 싶기 때문에 top:50%로 설정했습니다. 상단으로부터 50% 비율로 떨어진 곳에 고정할 수 있습니다.

아래는 구현 결과 입니다. 스크롤에 따라서 요소가 고정되어있는 것을 확인할 수 있습니다.

배경색 변경

기존 인터렉션에는 배경색이 변경되는데, 배경색 변경 애니메이션을 넣어보겠습니다.

1. 오른쪽 보조 툴바에 interaction 탭에 들어가서 element tirgger를 추가해줍니다.

2. 스크롤 영역에서 백그라운드가 변경되는 애니메이션을 걸어줄 것이기 때문에 while scrolling in view 애니메이션을 선택해줍니다.

3. Play scroll animation을 선택해줍니다.

1. + 애니메이션을 추가하기 위해서 + 를 눌러줍니다.

2. 새로운 애니메이션의 이름을 정해주고, + 버튼을 눌러서 속성을 추가해줍니다.

3. background color를 바꾸기 위해서 BG color를 넣어줍니다.

1. 처음에는 색상을 흰색으로 넣어주고, 변경되는 색상으로 #0d0c11 값의 검은색을 넣고, save를 누릅니다.

2. 디테일한 설정을 위해서 글씨 요소가 중간에 왔을 때 실행하기 위해서 offset을 50%로 추가해줍니다.

결과는 아래와 같습니다. 이전의 sticky 속성에 background가 서서히 변하는 애니메이션을 추가했습니다.

두 번째 섹션 position: sticky + 요소 opacity and move

position: sticky

두 번째 섹션의 인터렉션도 sticky 속성이 필요합니다.

스크롤되는 와중에도 화면 영역(viewport)의 가운데 영역에 고정해줘야하기 때문입니다.

이 영역 전체를 스티키로 고정하겠습니다.

결과는 아래와 같습니다.

이제 스크롤마다 요소들을 등장시키고, 사라지게 하는 애니메이션을 적용해보겠습니다.

요소 opacity and move

여기 애니메이션 설명하는데 오래걸려서 나중에 자세히 다뤄보도록 하고,

결과만 보겠습니다.

전체결과는 아래와 같습니다.

실제로 이 웹사이트에 배포되어있으니 직접 확인하실 수 있습니다.

정리하기

flex 랜딩페이지를 직접 구현해봤습니다.

position: sticky 속성을 이용해서 요소를 부모 요소의 스크롤 영역 동안, 화면 영역(viewport)의 특정 부분에 고정시킬 수 있다는 것을 배웠고,

시점에 맞는 스크롤 애니메이션을 적용해보았습니다.

이제 이것만 알고 계신다면 웬만한 인터렉티브 랜딩페이지는 문제가 없을 것 입니다.

다음 글에서는 typed 랜딩페이지의 아래의 인터렉션을 구현해보겠습니다.

그 다음번에는 awward 수상작과 같은 더 복잡한 인터렉션을 구현해보겠습니다!

노코드로 웹디자인부터 웹서비스까지

노코드툴을 활용하여 인터렉티브 웹사이트 또는 백앤드 로직이 담긴 웹서비스를 제작하는 것에 관심이 있으신가요? 함께 만들어보면 좋을 거 같습니다!

노코드로 웹디자인부터 웹서비스까지 만드는 교육 프로그램을 내년 초에 계획하고 있습니다.

무조건 자신의 아이디어를 실제 웹사이트로 제작하는 것을 목표로 합니다.

관심이 있으신 분은 아래의 구글폼에서 사전 신청해주세요.

사전 신청해주신 분들에 한하여, 특별한 혜택을 드리려고 합니다! 

웹플로우(Webflow)로 코드없이 어디까지 개발할 수 있을까?#3 - 스크롤 애니메이션2

노코드 서비스 웹플로우(webflow)를 활용하여 어디까지 개발이 가능한가?라는 주제로

글을 쓰고 있는데요.

연재 계획은 아래와 같습니다.

1. 웹플로우(webflow)로 인터렉티브 웹사이트 만들기

   • 토스랜딩페이지 클론하기(현재 포스팅)

   • 웹디자인 awwwards 수상작 클론하기

2. 웹플로우(webflow)와 노코드 툴을 활용하여 웹서비스 만들기

이번 포스팅은 웹플로우(webflow)를 활용한 인터렉티브 웹사이트 만들기 - 토스랜딩페이지 클론하기 스크롤 애니메이션 2입니다.

지난 글에서는 웹플로우(webflow)의 기본세팅과 Fade 애니메이션, 스크롤 애니메이션에 대해서 다뤄봤습니다.

처음부터 읽고 싶으시다면 지난 포스팅을 참조바랍니다.

웹플로우(Webflow)로 스크롤 애니메이션 구현하기

이번 포스팅에서 구현해볼 스크롤 애니메이션은 위와 같습니다 .

스크롤에 따라서 가로 영역이 확장되면서 화면을 모두 채우는 애니메이션입니다.

기본 세팅

위의 요소들을 구현하기 위해서 기본 세팅을 진행하겠습니다.

이렇게 박스 영역들을 지정해주었고, 이에 맞게 웹플로우에서 구현해보겠습니다.

원리 분석

애니메이션을 실제로 구현하기 전에 원리를 분석해보겠습니다.

이 애니메이션은 가운데 스크롤에 따라서 가운데 이미지의 가로 영역(width)가 점점 커지면서 화면 끝까지 차지하는 것처럼 보입니다.

하지만 여기에 눈 속임이 있습니다.

실제로는 양 옆에 흰색 배경 박스가 두 개가 존재합니다.

처음부터 해당 이미지는 가로 영역(width)을 채운 상태로 시작하고,

스크롤에 따라서 양옆의 흰색 배경을 가진 박스가 양옆으로 이동하면서 화면 밖으로 사라지게 됩니다.

이렇게 되면 양 옆의 흰색 배경 박스가 이동하면서 실제 이미지가 점점 커지는 것처럼 보이게 됩니다.

이번 스크롤 애니메이션은 지난번에 다뤘던 스크롤 애니메이션과 다른 점이 있습니다.

이전에 다뤘던 애니메이션은 Webflow의 scroll into view 애니매이션으로써 화면 영역의 끝단(스크롤 좌표값)과 HTML 요소가 만나는 시점에 효과를 줄 수 있습니다.

이번에 다룰 애니메이션은 Scroll의 특정 시점이 아니라, a에서 b로 이동하는 스크롤의 영역 중에 효과를 서서히 바꿀 수 있는 애니메이션입니다. 웹플로우(Webflow)에서는 이것을 While scrolling in view라고 부릅니다.

그렇다면 이제 스크롤 중에 변화하는 효과를 구현하는 실습을 진행해봅시다.

스크롤 애니메이션 구현하기

1. 스크롤 이벤트를 설정하고 싶은 요소를 클릭합니다. 이번에는 양옆에 있는 흰색 박스들이 될 것 입니다. 우측 보조바에 interactions 탭으로 넘어와서 + 버튼을 눌러줍니다.

2. Element trigger에서 While scrolling into view를 선택해줍니다.

3. play scroll animation을 선택해줍니다.

1. +를 클릭하여 애니메이션을 추가해줍니다.

2. 추가할 애니메이션의 이름을 설정해주고, scroll Actions을 선택해줍니다.

3. 양 옆의 박스 요소가 화면밖으로 사라지는 애니메이션을 구현할 것이기 move를 애니메이션을 선택해줍니다.

1. 시작할 때의 위치와 끝날 때의 위치를 지정해줍니다. 시작할 때의 위치는 현재 위치이기 때문에 0vw로 설정했고, 끝날 때의 위치는 왼쪽의 박스가 자신의 넓이만큼 왼쪽으로 나갈 것이기 때문에 -20vw로 설정해줍니다.

2. 이렇게 설정이 되었다면 애니메이션 설정이 완료되었습니다. 우측 박스 영역은 우측으로 사라질 수 있도록 똑같이 적용해줍니다.

여기까지의 결과를 확인해보겠습니다.

계획했던 애니메이션이 구현된 것을 볼 수 있습니다.

웹플로우(Webflow)에서는 아래와 같은 과정을 거쳐서 배포할 수 있습니다.

준비해두신 도메인이 있다면, 연결시킬 수도 있습니다.

이렇게 배포된 홈페이지를 공유해드리겠습니다.

현재는 desktop 버전만 제작이 되었지만,

모바일이나, 테블릿도 각각의 viewport 크기에 맞게 제작하면

반응형으로도 제작이 가능합니다.

정리하기

이번 포스팅에서는

1. 스크롤 영역 상에서 발생하는 애니메이션

2. 스크롤 영역 상에서 발생하는 애니메이션을 웹플로우(Webflow)로 실습하는 방법

에 대해서 알아봤습니다.

이렇게 토스 랜딩페이지를 웹플로우(webflow)로 구현해보았는데요.

확실히 웹플로우(webflow)가 인터렉티브한 웹사이트를 노코드로 만드는데 있어서 장점이 있는 것 같습니다.

다음 포스팅에서는 다른 홈페이지의 복잡한 인터렉션을 클론해서보면서

더 다양한 인터렉티브 웹사이트를 제작해보겠습니다.

노코드로 웹디자인부터 웹서비스까지

위의 글이 도움이 되셨나요?

노코드툴을 활용하여 인터렉티브 웹사이트 또는 백앤드 로직이 담긴 웹서비스를 제작하는 것에 관심이 있으신가요?

연 초에 노코드로 웹디자인부터 웹서비스까지 진행하는 교육 프로그램을 내년 초에 계획하고 있습니다.

새해에는 아이디어로만 품었던 포트폴리오들을 실제 서비스로 만들어보시면 좋겠습니다.

무조건 자신의 아이디어를 실제 웹사이트로 제작하는 것을 목표로 합니다.

관심이 있으신 분은 아래의 구글폼에서 사전 신청해주세요.

사전 신청해주신 분들에 한하여, 특별한 혜택을 드리려고 합니다! 

웹플로우(Webflow)로 코드없이 어디까지 개발할 수 있을까?#2 - 스크롤 애니메이션

노코드 서비스 웹플로우(webflow)를 활용하여 어디까지 개발이 가능한가?라는 주제로

글을 쓰고 있습니다.

1. 웹플로우(webflow)로 인터렉티브 웹사이트 만들기

• 토스랜딩페이지 클론하기(현재 포스팅)

• 웹디자인 awwwards 수상작 클론하기

1. 웹플로우(webflow)와 노코드 툴을 활용하여 웹서비스 만들기

지난 글에서는 웹플로우(webflow)의 기본세팅과 Fade 애니메이션에 대해서 다뤄봤습니다.

이번 포스팅에서는 스크롤 애니메이션을 다뤄보겠습니다.

웹플로우(Webflow)로 스크롤 애니메이션 구현하기

기본 세팅

위와 같이 박스 요소들을 잡았고, 모든 요소들을 레이아웃을 신경쓰지 않고 웹플로우(Webflow)에 입력해주겠습니다.

(css 속성과 레이아웃을 잡는 방법은 아래의 글에서 다뤘기 때문에 빠르게 넘어가겠습니다.)

여기서 레이아웃까지 잡으면 이렇게 변합니다.

스크롤 애니메이션 원리 이해하기

스크롤 애니메이션을 실습하기 전에 스크롤 애니메이션의 원리를 간단하게 살펴봅시다.

웹 브라우저로 현재 확인하고 있는 화면 영역(viewport)은 전체 페이지의 일부입니다.

스크롤을 내릴 때마다 화면 영역(viewport)이 달라지게 되고,

스크롤에 해당하는 화면 영역을 웹 브라우저에서 볼 수 있게 됩니다.

스크롤 애니메이션은 요소들이 화면 영역 안에 들어온 순간을 감지해서 요소들의 스타일 속성을 바꿔줍니다.

위의 애니메이션을 자세히 살펴보면,

스크롤을 감지해서 특정 화면 영역이 보이는 순간 각 요소들의 투명도(Opacity)가 진해지고(0 -> 1),

하단에서 상단(transform)으로 요소들이 움직이면서 올라오는 듯한 느낌이 듭니다.

투명도(opacity)는 css 속성으로 값이 0일 때, 보이지 않았다가 1에 가까워질수록 원래의 값을 가지는 속성입니다.

transform은 요소의 위치를 바꿀 수 있는 css 속성입니다. 값이 0이라면, 기본적인 위치에 고정됩니다. 값이 커질수록 원래의 위치에서 아래로 이동하게 됩니다. 50px에서 0px로 이동하게 된다면, 요소가 상승하는 것처럼 보입니다.

스크롤을 감지하여 요소가 화면 영역에 나타나는 순간 위와 같은 2가지 css의 속성을 바꿔주면

우리가 원하는 스크롤 애니메이션을 구현할 수 있습니다.

javascript로 구현한다면, 스크롤의 값과 요소의 위치값을 비교해줘야 합니다.

웹플로우(Webflow)에서는 코딩없이 설정을 지정해주어 위와 같은 효과를 만들어낼 수 있습니다.

스크롤 애니메이션 실습하기

기본적인 스크롤 애니메이션에 대해서는 이전 포스팅에서 다뤘는데요.

설정을 다시한번 살펴봅시다.

1. 스크롤 이벤트를 설정하고 싶은 요소를 클릭합니다. 우측 보조바에 interactions 탭으로 넘어와서 + 버튼을 눌러줍니다.

2. Element trigger에서 Scroll into view를 선택해줍니다. Scroll into view가 스크롤을 감지해서 요소가 화면 영역 안에 들어오는 것을 감지해줍니다.

3. 화면 영역에 요소가 나타날 때, 이벤트를 발생시킬 것이기 때문에 When scrolled into view에서 action을 선택해줍니다. When scrolled out of view를 선택하게 되면, 요소가 화면 밖으로 나올 때 애니메이션을 실행하게 됩니다.

1. Action 중에서 "Slide"를 선택합니다. "Slide"는 기본적으로 투명도(opacity)와 위치이동(transform)을 변경해줍니다.

2. Direction(방향)을 From Bottom으로 설정합니다.

3. Delay를 500ms로 설정합니다.

이렇게 원하는 요소에 slide action을 원하는 Delay만큼 설정하기만 한다면,

스크롤 요소에 따른 투명도와 위치를 변경하도록 하는 애니메이션을 구현할 수 있습니다.

(각 요소마다 Slide 액션을 넣어서 만든 결과입니다)

정리하기

이번 포스팅에서는

1. 스크롤 애니메이션 원리

2. 스크롤 애니메이션을 웹플로우(Webflow)로 실습하는 방법

에 대해서 알아봤습니다.

실제 개발로 구현한다면 다소 손이 많이 들어가는 스크롤 애니메이션을

웹플로우(webflow)로 손쉽게 구현해보았습니다.

다음 포스팅에서는 아래의 gif처럼 스크롤 할수록 이미지 영역이 화면을 채우는 인터렉션에 대해서 알아보겠습니다.

위의 글이 도움이 되셨나요?

노코드툴을 활용하여 인터렉티브 웹사이트 또는 백앤드 로직이 담긴 웹서비스를 제작하는 것에 관심이 있으신가요?

연 초에 노코드로 웹디자인부터 웹서비스까지 진행하는 교육 프로그램을 내년 초에 계획하고 있습니다.

무조건 자신의 아이디어를 실제 웹사이트로 제작하는 것을 목표로 하는 유/무료의 프로그램입니다.

관심이 있으신 분은 아래의 구글폼에서 사전 신청해주세요.

사전 신청해주신 분들에 한하여, 특별한 혜택을 드리려고 합니다! 

웹플로우(Webflow)로 어디까지 개발이 가능할까?#1 - Fade 애니메이션

노코드 서비스 웹플로우(webflow)를 활용하여 어디까지 개발이 가능한가?라는 주제로

글을 쓰고 있는데요.

연재 계획은 아래와 같습니다.

1. 웹플로우(webflow)로 인터렉티브 웹사이트 만들기

   • 토스랜딩페이지 클론하기(현재 포스팅)

   • 웹디자인 awwwards 수상작 클론하기

2. 웹플로우(webflow)와 노코드 툴을 활용하여 웹서비스 만들기

지난 글에서는 웹플로우(webflow)의 기본세팅과 헤더를 만들면서 HTML, CSS를 설정해보았습니다.

이번 포스팅에서는 Fade 애니메이션을 다뤄보겠습니다.

랜더링 시 Fade 애니메이션

기본 스타일링 + 레이아웃

이제 첫번째 섹션을 만들어보겠습니다. 우선 모든 요소들을 스타일과 레이아웃을 시경쓰지말고, 나열해서 넣어주겠습니다.

background 이미지로 우리가 이전 글에서 준비해뒀던 이미지를 넣어주었습니다.

(이 포스팅에서는 Fade 애니메이션을 주로 다루기 때문에 구체적인 속성은 언급하지 않고, 레이아웃과 기본 스타일링을 잡았습니다. 웹플로우(Webflow) 스타일 적용과 관련하여 궁금한 점이 있다면 댓글로 남겨주세요)

첫 랜더링 시 서서히 등장하는 Fade 애니메이션 실습하기

먼저 애니메이션 효과(인터렉션)을 만들기 전에 개념을 잠깐 살펴보고 넘어갑시다.

애니메이션 전에는 항상 트리거가 선행되어야 합니다.

애니메이션 효과가 시작하기 전에 애니메이션 효과를 시작하게 만들어줄 트리거(계기)가 필요합니다.

우리가 웹 사이트를 사용할 때, 자연스럽게 애니메이션을 접할 수 있는데요.

클릭하면(트리거), 어떤 요소가 움직인다던지, 마우스를 올려놓았을 때(트리거) 색상이 변한다던지 하는 것들이 트리거와 애니메이션의 관계입니다.

웹플로우(Webflow)에는 2가지 종류의 트리거가 있습니다.

간단히 설명해서 요소 트리거는 특정 요소에 마우스를 올려놓거나(hover), 클릭하거나, 요소가 현재 화면에 보이도록 스크롤되었을 때 선택한 요소에 애니메이션 효과를 줄 수 있는 애니메이션입니다.

페이지 트리거는 페이지의 상태가 변할 때 발생하는 애니메이션입니다. 페이지가 로딩될 때 혹은 페이지가 모두 스크롤 되었을 때, 선택한 요소의 동작을 조절할 수 있습니다.

Fade 애니메이션을 요소 트리거를 활용해서 구현해볼 것 입니다.

첫 랜더링 시 서서히 등장하는 Fade 애니메이션 구현

1. 오른쪽 보조 툴바에 interaction 탭에 들어가서 element tirgger를 추가해줍니다.

2. 저희가 원하는 요소가 화면에 나왔을 때(처음 랜더링 되었을 때) 투명도(opacity)를 조절할 수 있도록 Scroll into view 이벤트를 걸어줍시다.

3. Scroll into view 이벤트에서는 스크롤을 통해 요소가 화면에 등장했거나(when scrolled into view) 혹은 화면에서 사라졌을 때(When scrolled out of view) opacity 투명도를 변경할 수 있습니다. 스크롤해서 화면에 나왔을 때, 투명도를 변경하는 것이 목적이기 때문에 When scrolled into view에서 Action을 선택해줍니다.

1. 다양한 액션들을 고를 수 있습니다. Opacity 투명도를 서서히 밝게 만드는 것이 목적이기때문에 Fade 이벤트를 걸어줍니다.

2. Fade in으로 설정하고, offset을 0으로 설정합니다. 이는 scroll이 얼마나 진행된 후 fade 애니메이션을 보여주냐를 결정합니다. 첫 랜더링 때 바로 등장시키고 싶기 때문에 0으로 설정합니다. 얼마나 시간이 흐른 후 나타나게 할 것이냐는 Delay를 통해서 설정할 수 있습니다. 750ms 로 설정해줍니다.

아래와 같은 결과를 얻을 수 있습니다.

정리하기

이번 포스팅에서는

1. 애니메이션과 트리거 기본개념과

2. Fade 애니메이션

에 대해서 알아봤습니다.

이렇게 웹플로우(webflow)를 이용한다면, 코딩없이도 애니메이션도 구현할 수 있습니다.

다음 게시글에서는 아래의 스크롤 인터렉션에 대해서 알아보겠습니다.

웹플로우(Webflow)로 어디까지 개발이 가능할까?#0 - 토스홈페이지 클론하기

노코드 서비스 webflow를 활용하여 어디까지 개발이 가능한가?라는 주제로

드로잉 코딩 클럽에서 연재를 해보고자 합니다.

진행할 시리즈는 2가지입니다.

1. webflow로 인터렉티브 웹사이트 만들기

   • 토스랜딩페이지 클론하기

   • 웹디자인 awwwards 수상작 클론하기

2. webflow와 노코드 툴을 활용하여 웹서비스 만들기

우선 먼저 웹플로우(Webflow)의 기본적인 개념을 배우며 토스랜딩페이지를 클론해보겠습니다.

웹플로우(Webflow)로 인터렉티브 렌딩페이지 만들기

웹플로우(Webflow)를 이용하여 토스의 인터렉션 렌딩페이지를 클론해보겠습니다.

토스의 인터렉션 랜딩페이지를 살펴보면 크게 3가지 인터렉션이 있습니다.

1. 첫 렌더링 시 "금융의 모든 것 토스에서 쉽고 간편하게"라는 문구가 등장하는 Fade 애니메이션

1. 요소들이 스크롤에 따라서 화면에 등장하는 애니메이션

1. 스크롤을 내린만큼 이미지의 영역이 커지는 애니메이션

이와 같은 3가지 애니메이션이 토스 랜딩페이지 인터렉션의 핵심인데요.

이러한 애니메이션을 코드없이 웹플로우(Webflow)만으로 구현해보도록 하겠습니다.

웹플로우(Webflow)의 몇 가지 개념만 알면, 이런 인터렉티브한 랜딩페이지를 노코드로 구현할 수 있습니다.

기본설정과 각각의 애니메이션을 1편, 2편, 3편, 4편으로 나눠서 올릴 계획입니다.

이번 포스팅에서는 다음과 같은 목차로 진행될 예정입니다.

1. Webflow란 무엇인가?

2. 기본세팅

   - 폰트설정

   - 이미지 업로드

3. 웹플로우(Webflow)로 HTML, CSS 설정하기 = 토스 랜딩페이지 헤더 만들기

   - 박스모델

   - 실습하기

웹플로우(Webflow)란 무엇인가?

웹플로우(Webflow)는 사용자가 코딩 지식이 없어도 인터렉티브하고 전문적인 웹사이트를 디자인하고 출시할 수 있게 도와주는 서비스입니다.

드래그 앤 드롭 인터페이스를 사용하여 웹사이트의 레이아웃과 요소를 직관적으로 구성할 수 있게 도와줍니다.

반응형 디자인도 손쉽게 구현할 수 있어서 사용자 경험을 높일 수 있고,

CMS(Content Management System = 블로그와 같은 컨텐츠 기반 웹사이트) 기능을 제공하여 사용자가 콘텐츠를 쉽게 관리하고 업데이트할 수 있습니다.

웹플로우(Webflow)는 스타트업에서 빠르게 랜딩페이지를 만들거나 코딩을 공부하지 않고도 빠르게 웹사이트를 만들 때 유용한 서비스라고 보시면 됩니다.

기본 세팅(이미지 요소 가져오기, 폰트세팅)

본격적으로 웹플로우(Webflow)를 사용하기 전에 기본 세팅을 진행해보겠습니다.

토스랜딩페이지를 클론 코딩할 것이기 때문에 토스 랜딩페이지를 방문하여 필요한 이미지를 가져오고 폰트를 설정해보겠습니다.

이미지 요소 가져오기

토스 랜딩페이지에서 개발자 도구를 켜고

[오른쪽 마우스 클릭 - 검사(inspect) or f12]

개발자 도구 상단에 있는 마우스를 클릭해봅시다.

그러면 마우스로 HTML 요소들을 검사할 수 있습니다.

웹사이트에 배포되어있는 이미지들은 클라우드에 저장되어있거나 프로젝트와 함께 배포가 되어있는데요.

얻고 싶은 이미지 요소를 클릭하여 가져와보겠습니다.

https://static.toss.im/assets/homepage/newtossim/new_main.png

https://static.toss.im/tds/favicon/favicon-196x196.png

오른쪽 마우스를 클릭하여서 이미지를 저장해줍니다.

저장해준 이미지를 웹플로우 좌측편의 Assets 메뉴에 들어가서 업로드해줍니다.

이렇게 저장된 이미지들을 업로드해주었습니다.

이미지가 필요할 때마다 여기있는 이미지를 가져와서 사용하겠습니다.

폰트세팅

toss는 토스에서 직접만든 "Toss product Sans"라는 폰트를 사용하는데요.

이 폰트는 토스에서 공개하지 않은 폰트이기 때문에 이것을 대체하여

"Pretendard"폰트를 넣어주도록 하겠습니다.

웹플로우(Webflow)에서는 폰트를 넣는 방법은 아래와 같습니다.

웹플로우 메인 페이지에서 좌측 상단에 있는 W버튼을 누릅니다.

사이트 세팅을 누릅니다.

좌측편에 보시면 Fonts를 누룹니다.

Fonts에 들어가셔서 업로드 버튼을 눌러줍니다.

제가 미리 아래에서 받은 Pretandard 폰트 중 woff2 폰트를 넣어줍니다.

upload font file을 하나하나 눌러주면 이렇게 폰트가 들어간 것을 볼 수 있습니다.

웹플로우(Webflow)의 흰 화면에 마우스를 올려놓으면 왼쪽 상단에 파란색으로 "Body"라는 박스요소가 등장하는데요. 그걸 누르면 오른쪽 보조 창에 요소의 속성을 선택할 수 있습니다.

여기서 typography -> Font에 들어가면 Custom fonts로 저희가 설정한 Pretendard fonts를 발견할 수 있구요. 이걸 "Body"요소에 설정해주면, "Body"의 자식 요소에도 기본적으로 Pretendard fonts가 설정됩니다.

구체적인 custom fonts 설정 방법은 아래의 링크에서 찾을 수 있습니다.

해더 만들기

드디어 웹플로우(Webflow)의 하얀 바탕화면에 요소들을 추가해 볼 건데요. 먼저 헤더를 만들어봅시다.

박스 모델

헤더를 만들기 전에 박스 모델에 대해서 알아봅시다.

HTML 웹사이트를 구성하는 HTML 태그들은 각각 하나의 박스로 구성되어있습니다.

웹사이트는 하나하나의 박스 블럭이 쌓여서 만들어진 것 입니다.

위의 토스 랜딩페이지의 해더는 아래와 같은 박스가 모여서 만들어진 것입니다.

박스들은 기본적으로 왼쪽 아래로 쌓입니다.

(블럭 요소들은 한 칸씩을 차지하고, inline요소들은 왼쪽에서 오른쪽으로 쌓입니다.)

CSS를 사용하여 속성을 바꿔서 원하는 스타일과 원하는 레이아웃으로 바꿀 수 있습니다.

박스모델은 HTML, CSS를 공부할 때 나오는 개념인데요.

이렇게 간단하게만 언급하고 넘어가겠습니다.

나중에 기획자/디자이너를 위한 HTML, CSS 개념에 대해서 다뤄보겠습니다.

실습하기

왼쪽 상단에 + 버튼을 누르면, 추가할 수 있는 HTML 요소들이 나옵니다.

먼저 Div Block을 선택하여 헤더의 가장 상단 박스를 만들어주겠습니다.

레이아웃과 스타일은 우선 신경쓰지 말고, 요소들을 나열해보겠습니다.

(원래 개발에서는 웹접근성이나 테크니컬 SEO를 위해선 태그의 종류도 제대로 설정해줘야 합니다. 이 글은 레이아웃과 스타일에 집중하여 쓰여진 글이기 때문에 디테일하게 태그 종류를 설정해주지 않았습니다. 참고 바랍니다.)

여기서 이제 로고부터 레이아웃과 스타일을 설정해보겠습니다.

로고 이미지와 toss라는 글자가 현재 같은 박스 안에 있는데, 레이아웃과 크기와 스타일을 변경합니다.

toss 로고와 toss 텍스트를 감싸고 있는 Div Block의 레이아웃을 flex로 설정했고,

이미지 요소의 크기를 실제 홈페이지를 참조하여 높이를 20px로 맞추고, 이미지와 toss라는 텍스트를 간격을 설정하기 위해서 3px의 margin을 줬습니다.

이렇듯 스타일과 레이아웃을 변경하면, 원하는 홈페이지를 만들 수 있습니다. 다른 요소들도 실제 홈페이지에서

개발자 도구를 참조하여 스타일을 설정해보겠습니다.

"회사 소개"라는 네비게이션 탭의 아이템 하나만을 가져와서 toss-list-item이라고 새로운 클래스를 입력해주었습니다.

웹플로우(Webflow)에는 공통된 요소에 클래스를 입력하면, 한번에 공통된 스타일을 적용해줄 수 있습니다.

나머지 요소들도 적용해보겠습니다.

이제 레이아웃을 적용해보면,실제 Toss 홈페이지와 거의 유사한 것을 확인할 수 있습니다.

Outro

웹플로우(Webflow) 기본세팅 + 헤더만들기를 진행해봤는데요.

이렇게 웹플로우(Webflow)에서는 드래그 앤 드롭을 활용하여 쉽게 웹사이트트를 구현할 수 있습니다.

다음 포스팅에서는 본격적으로 인터렉티브한 웹사이트를 만들어보도록 하겠습니다.

Open AI 이사회가 샘 알트만을 해고했다.[오늘의 LLM 트윗 인사이트]

1. 샘알트만 해고와 사건 개요 

• 샘 알트만 해고

• 공동 창업자 그렉의 퇴사

• 샘 알트만의 후임은 알트만?

1. “샘 알트만”VS “일리야 수츠케버”

• 일리야 수츠케버(Ilya Sutskever)는 누구인가? 

• “샘 알트만”의 잡스 모먼트와 오펜하이머 모먼트
  
  
  

*경고: 이 글은 기사, 트위터, 유튜브 등에서 정보를 얻었습니다. 사실과 다른 내용이 포함되어있을 수 있으니, 비판적 시선으로 봐주시길 바랍니다. 

샘알트만 해고와 사건 개요 

샘 알트만 해고

• 현지 시간 2023, 11월 17일(한국시간 11월 18일 토)

• Open AI의 이사회는 샘 알트만의 해고 소식을 공식 블로그로 알렸다.

• "알트만 대신 CTO였던 Mira Murati를 CEO로 임명한다."

• 알트만 해고에 대한 이유로 “샘 알트만이 일관되게 솔직하지 못했다.”고 말한다. 

https://openai.com/blog/openai-announces-leadership-transition

오픈 에이아이 공식 블로그 

• 원래 오픈 AI 이사회는 일리야 수츠케버, 아담 단젤로(쿼라의 CEO), 타샤 맥컬리(기술 기업가), 조지타운 대학의 헬렌 토너, 그렉 브록맨, 샘 알트만 총 6명으로 구성되어있는데, 

• 샘 + 그렉 VS 일리야를 주축으로 한 4명의 이사회 멤버의 갈등일 것으로 추측된다. 

공동 창업자 그렉의 퇴사

• 샘의 해고와 함께 그렉도 이사회에서 직원으로 강등되었는데, 본인의 SNS로 퇴사를 알렸다.

• (+ 고위 AI 연구원들도 함께 회사를 떠났다)

• 그렉의 증언에 따르면, 23년 11월 17일 샘은 일리야에게 금요일 정오에 전화를 하자는 연락을 받았다.

• 샘은 그렉을 제외한 모든 이사회 멤버와 함께 구글 미팅에 참석한다. 

• 일리야는 샘에게 “너는 해고되었고, 뉴스는 내일 곧바로 공개될 것이라고 이야기했다.”

• 오후 12:19, 일리아는 그렉에게 연락을 한다. 

• 오후 12:23분 일리야는 구글미트 링크를 보냈고, 그렉이 이사회에서 해임되었다고 통보했다.(하지만, 회사에서 역할이 매우 중요했으므로 그의 역할을 유지한다라는 말을 곁들임)

• 샘은 해고되었고, 같은 시간 open AI는 위와 같은 공식 블로그를 발행한다.

• ….

샘 알트만의 후임은 알트만?

알트만의 측근에 따르면, 오픈 AI 이사회에서 다시 Sam 알트만을 복귀를 말했지만, 사임이 결정된 5시를 놓쳤다고 한다. 

그로 인해 많은 open AI 관계자들이 알트만과 함께 회사를 떠나고 있다고 말한다. 

알트만이 다시 복귀한다고 하더라도, 이사회에 대대적인 변화가 있을 것이라고 한다. 샘은 일리야의 퇴사를 원한다고 전해진다.

현재 트위터에서는 이번 사건의 가장 큰 갈등이 샘과 일리야의 갈등에 있을 것으로 추측하는데, 그 갈등이 무엇인지 아래에서 살펴보자.

“샘 알트만”VS “일리야 수츠케버”

많은 사람들이 샘 알트만의 해고 이후, 그와 반대된 이사회들을 악으로써 몰아붙이는데, 사실 선과 악을 쉽게 판단할 수 없고, 서로 다른 가치를 가진 집단의 갈등이라고 볼 수 있다.

일리야 수츠케버(Ilya Sutskever)는 누구인가? 

일리야는 인공지능의 아버지라고 불리는 제프리 힌튼의 제자이고, 일리야 본인도 인공지능의 아버지로 불릴만큼 엄청난 일들을 이뤄냈다. 

구글 브레인 멤버로서 텐서플로우, 알파고에서 프로젝트의 중요한 역할을 했고, Chat Gpt의 등장에도 기술과 가치적으로 주된 영향을 끼쳤다. 

일리야 수츠케버를 이해하려면, 그의 스승 제프리 힌튼을 알아야 한다. 

제프리 힌튼은 75세의 나이로 2023년 5월 1일 구글을 퇴사하며, 자신의 업적을 후회한다고 밝혔다. 

“생성AI로 인한 가짜 이미지와 텍스트가 너무 많아졌다”며 “앞으로 인간은 진실과 거짓을 구분하지 못하는 세상을 마주하게 될 것이다. 이 점이 가장 두렵다”

이렇듯 제프리 힌튼은 AI의 발전과 윤리적인 문제를 함께 고려하는 것이 중요하다고 말한다. 

제프리 힌튼의 제자인 일리야도 이런 영향을 받았다. 

그의 블로그 글에서 “AI의 발전에 따라 거버넌스를 관리할 기관이 필요하고 슈퍼 인공지능의 얼라인먼트 문제를 해결해야 한다”고 강조하기도 했다. 

https://twitter.com/rowancheung/status/1726011179766816815

(일리야에 대한 더 자세한 영상)

“샘 알트만”의 잡스 모먼트, 오펜하이머 모먼트

이러한 백그라운드로 미루어보아, 일리야와 샘 알트만은 Open AI의 운영 방향에 있어서 AI의 발전의 윤리적인 문제, 상업화 속도에 대해서 의견 차이가 있었을 것으로 예상된다.

샘 알트만이 해고된 직후 오픈AI의 직원들이 일리야 수츠케버에게 이게 쿠데타인지 물었는데, 일리야 수츠케버는 “동의하지는 않지만 그렇게 불러도 된다”면서 “이사회는 인류에게 혜택을 주는 일반 인공지능을 구축하기 위해 해야 할 일을 했을 뿐(which is to make sure that OpenAI builds AGI that benefits all of humanity)”이라고 말했다.

이와 더불어 두 사람의 갈등을 짐작해볼 수 있는 사건은 아래와 같다.

샘 알트만은 2주전 공개석상에서 이렇게 말했다. 

“오픈 AI에서 4차례 역사적인 순간을 발견했는데, 가장 최근에 경험했던 1가지가 몇 주 전에 있었던 일.”

사람들은 이것에 대해서 오픈 AI가 최근 엄청난 수준의 AGI를 구현한 것이 아닐까 추측한다. 

일리야는 이것에 대해서 경각심을 느꼈고, 그와 비슷한 시간대에 아래와 같은 트윗을 남겼다. 

"if you value intelligence above all other human qualities, you’re gonna have a bad time"

시기와 내용으로 보았을 때, 사람들은 샘 알트만에 대한 경고같다고 이야기한다.

일리야는 앞으로 더욱 발전된 AGI를 어떻게 운영할 것인지에 대해서 샘과는 다른 생각을 가졌을 것이고, 이 때문에 이사회내에서 서둘러 샘의 사임을 부축인 것이 아닐까 추측된다.

Outro

이처럼 샘의 해고의 배후에는 open AI의 운영방향과 관련한 가치적인 문제가 있었고, "일리야 VS 샘"의 갈등이 주된 원인일 것으로 예상된다.

앞으로 샘이 Open AI에서 나오게 된다고 해도, 함께 나온 고위 직원들과 함께 새로운 기업을 만들 수도 있다고 말한다. 혹은 다른 모델을 만들고 있었던 기존의 대기업에 합류해서 새로운 판도가 만들어질 수도 있다.

이처럼 앞으로의 행보가 전혀 다른 결과를 만들어 낼 수 있을만큼 중요한 순간이고, 미국의 월요일이 되었을 때, 새로운 소식이 들려오지 않을까 기대해본다.

레퍼런스 

https://openai.com/blog/openai-announces-leadership-transition

https://twitter.com/rowancheung/status/1725960831815254024

https://www.theverge.com/2023/11/18/23967199/breaking-openai-board-in-discussions-with-sam-altman-to-return-as-ceo

LLM 관련 트윗 인사이트 정리(feat. GPTs, Rag)

1. GPTS를 만드는 건, 컨텐츠를 가진 개인에게 유리하다?

• 본인의 트윗, 유튜브, 전자책을 학습 시켜서 만든 levelsio

• Paul graham에게 스타트업에 대해서 묻다?

1. 각종 서비스의 Rag관련 업데이트

• Lang chain의 Lang smith Rag debug를 보다 쉽게 하기

• 노션 ai의 Rag

1. Retrieval Augmented Generation (RAG) 쉽게 설명하기

1. GPTS를 만드는 건, 컨텐츠를 가진 개인에게 유리하다?

본인이 전문가라면, Build a GPT를 만들라고 한다.

자신만의 컨텐츠로 굉장히 인사이트 넘치는 GPT들을 만들 수 있기 때문이다.

자신만의 전문성으로 GPT를 만든 사례들을 소개한다.

• 본인의 트윗, 유튜브, 전자책을 학습 시켜서 만든 levelsio

인디개발자의 매이킹 강의를 본인의 트윗에 많이 올리는 분이신데, 이번에 본인의 블로그, 트윗, 팟케스트, 북을 모두 학습시켜서 gpts를 만들었다.
이분이 쓴 “Make”라는 전자책을 구매하기도 했는데, 정말 그 내용을 바탕으로 답변을 잘 해준다.이렇듯 GPTs로 교육 컨텐츠를 옮겨서 챗봇을 만드는 형태가 늘어나고 있는 것 같다.

• Paul graham에서 스타트업에 대해서 묻다?

Paul graham의 강의나 에세이를 학습시켜서 만든 gpts가 상당히 많다.

이처럼 특정 분야의 전문가의 Knowledge를 바탕으로 Gpts의 knowledge로 사용하려는 시도들이 많이 등장하고 있는 것 같다.

우리 팀에서는 이것을 벡터 컨텐츠라고 이전부터 불렀다.

텍스트, 이미지, 영상 등의 컨텐츠가 이제는 벡터 공간으로 옮겨와서 유저의 질문을 rag를 통해서 뽑아낼 수 있기 때문이다.

이처럼 이제는 전문성을 가진 사람들이 GPTs 자체의 자신의 전문성있는 컨텐츠를 옮기려는 시도들이 많아질 것으로 예상된다.

1. 각종 서비스의 Rag관련 업데이트

• Lang chain의 Lang smith Rag debug를 보다 쉽게 하기

Langsmith는 LLM 앱의 빌드와 배포, 테스트, 디버그를 도와주는 라이브러리다.
Rag debug를 쉽게 관리할 수 있는 업데이트를 진행하였다.

• 노션 ai의 Rag

https://www.notion.so/product/ai

1. Retrieval Augmented Generation (RAG) 쉽게 설명하기

오늘 글에서는 Rag에 대해서 많이 등장했다. 근데 도대체 Rag가 무엇인가?

아래의 글에서 쉽게 설명해준다.

위와 같이 stich fix라는 개인 스타일링 추천 서비스에 비유해서 설명한다.

추천 시스템stich fix의 고객이 스타일을 추천해달라고 했다. 그러면 스타일리스트가 고객에게 특정 스타일을 추천해주기 위해서 여러 과정을 거친다.

1. 먼저 고객이 스타일을 추천해주기 위해 고객들이 좋아하는 옷들을 재고에 쌓아둔다.

2. 고객 선호도, 과거 구매 이력, 피드백 등을 고려하여 가장 유사한 옷의 후보군을 고른다.

Rag도 비슷하다.

1. 다양한 정보 소스, 즉 재고들을 관리한다. 사용자의 질문에 기반으로 답변할 컨텐츠라고 생각하면 된다.

• 다양한 정보 소스들을 임배딩

1. 유저가 질문을 한다면, 다양한 정보를 바탕으로 질문과 가장 유사한 정보들을 기반으로 답변을 생성해낸다.

• 유저의 선호도에 따라서 재고를 추출하는 것과 유사함

결국 Rag의 성능을 어떻게 높이냐는 말은 스타일리스트가 얼마나 제품을 잘 추천해주는지와 같은 것

오늘의 트윗 인사이트 끝

홍보

GPTs link의 큐레이션 기능 업데이트가 얼마 남지 않았습니다.

다양하고, 재미있는 GPTs를 소개할 계획입니다. 많은 관심부탁드립니다

11월 15일 트위터에 올라온 기술관련 트랜딩 트윗을 살펴보자 in 미국 실리콘 벨리(feat. GPTS)

1. GPTS

gpts는 11월 6일 오픈 AI 데브데이 이후에 새롭게 출시된 chat gpt “앱 스토어”다. 아무나 자신이 Gpt로 만든 서비스를 올리고 공유할 수 있는 공간이다. 최근 많은 서비스들이 등장하고 있다. 재미있는 서비스도 많으니 참고해보자. 

"트랜딩 GPTS" 속에서 올라오고 있는 트윗들은 대부분 자신이 만든 GPTS 홍보인데, 어떤 재미있는 GPTS들이 있는지 알아보자. 

gooble bot

gpts에 커스텀화된 앱을 만들다보면, knowledge를 넣어줘야 한다. gpt가 기반으로 삼아서 답변을 만드는 컨텐츠가 knowledge라고 생각하면 된다.하지만, 현재 gpts는 파일 업로드 수에 제한이 있다. 여러가지 youtube나 블로그, pdf 등에서 컨텐츠를 가져와 쓰려고 할 때, 이상이 생긴다. gobble bot은 이러한 문제를 해결한다.

gobble.bot에 웹사이트를 입력하기만 하면, 여러 웹사이틀에서 얻을 수 있는 모든 텍스트를 txt파일로 변환해준다. (크롤링 후 텍스트 정보들을 다 하나로 통합해주는 형태) gpts의 knowledge를 만들기 굉장히 쉽게 해주는 서비스다.

*유튜브의 경우에는 영어 스크립트만 제공해주니 참고바람.

https://gobble.bot/

https://x.com/rafal_makes/status/1723786488578556203?s=20

webPilot

webPilot은 gpt 이전에도 굉장히 사람들이 많이 사용하는 gpt 플러그인이었다. 

이전에는 gpt가 2021년 9월까지의 정보가 제한되어있었고, 이 때문에 현재 정보들이 검색이 안 될 때 유용하게 쓴 플러그인이다. 

최근에는 gpt가 2023년 4월까지의 정보까지 학습되어 있어서 최신 것들도 검색이 가능하지만, 특정 웹사이트의 url을 넣어서 요약하거나 새롭게 생성해낼 때, 유용하게 쓰인다. 

bland AI

아래와 같이 간단한 API 호출로 GPT의 전화를 구현할 수 있다. 

테스트해보고 싶다면, 아래의 Bland.ai 공식 트윗에서 확인할 수 있다.

한 줄 인사이트: gpts 자체적인 서비스도 많이 나오지만, gpts를 이용한 외부 서비스 +  Gpts 개발에 도움이 많이 되는 서비스들도 등장하는 듯

(여기서 홍보) 다양한 gpts를 어디서 확인할 수 있을까?

약 1000개의 gpts를 gptslink에서 한번에 확인 가능! 👇👇👇👇

(카테고리별로 혹은 검색으로 원하는 gpts를 찾을 수 있음.)

gptslink.app

2. Stripe

stripe는 실리콘 벨리의 핀테크회사다. 

온라인 결제 시스템을 제공하여 개인이나 기업이 웹사이트나 모바일 애플리케이션을 통해 신용 카드와 다른 형태의 결제를 받을 수 있게 해준다. 

쉽게 말하면, 파는 사람들(스타트업, 인디 개발자들)이 온라인으로 물건을 팔 때, stripe를 이용해서 쉽게 모바일이나 웹에서 결제 시스템을 구축할 수 있다. 

그래서 그런지 솔로프리니어들의 트윗을 트랜딩 상단에서 많이 확인할 수 있었다.

유명한 인디개발자(솔로프리니어) levelsio

(초기 제품 홍보를 위해서 stripe payment link를 달아놓고 얼리버드로 200달러를 50달러라고 이야기하고 선 주문을 받아 놓으라고 함)

현재 프로덕트 헌터 랭킹 3위 ByeDispute

인디 개발자인 자신이 비정상적인 금융활동으로 stripe 계정이 정지된 문제를 바탕으로 만든 프로덕트 

노코드 앱이고, 스트라이프 계정의 사기적인 활동을 미리 모니터링하여 분쟁을 방지하는 서비스! 

(솔로 프리니어들에게는 꼭 필요할 듯)

https://www.producthunt.com/posts/byedispute

등등 솔로 프리니어들의 스택 중 무조건 들어가는 stripe 

이상 오늘의 트랜드 끝

트위터 기술 트랜딩을 적는 이유

@Kyle 카일님과 지난 PMC23에서 처음 알게되어 이야기를 나누고, 트위터에 온보딩했다. 

@연주환 저희 팀의 주환이형이 LLM 기술 트랜딩 팔로우를 위해 트위터를 많이 보길래 따라봤다.

트위터는 미쳤다. 실리콘벨리의 세상 그 자체다. 

샘 알트만부터, 일론머스크, 우리팀이 자주 썼던 프레임워크 라마인덱스 CEO 제리 리우, 유명한 인디개발자들이 판을 치고 있고, 그들이 실시간으로 올리는 인사이트들을 한번에 접할 수도 있다.

(트위터 북마크를 더 잘 쓰고 싶다면 xbase 고고)

처음 트위터에 온보딩할 때는 뭘봐야 할지도 모르고, 누구를 팔로워해야 하는지도 몰랐기 때문에 그 가치를 몰랐는데, 보다보니 너무 재미있다. 

처음 트위터에 온보딩하는 사람들을 위해

누구보다 LLM, GPT 정보를 빠르게 접하고 싶은 사람들을 위해서

미국 트위터 트랜딩을 옮기는 게시글을 자주 쓰겠다. 

그렇게 LLM 프로덕트를 잘 찍어내는 팀이 되었다..?

3줄 요약

• 해커톤 드리븐 빌딩방식으로 LLM 해커톤 참여 + MVP 제품 개발 중

• Lab Lab ai 해커톤 출전. Vec:lix app MVP 제작

• 이번에도 역시나 집 안 감. 사무실에서 잠. 그런 후 회고

목차

• 🌪️ 해커톤-드리븐 빌딩

• 🥽 Lab Lab ai agent 해커톤

• 🧐 회고

• 마무리

🌪️ 해커톤-드리븐 빌딩

Hackathon-Driven Building(해커톤 주도의 개발 방식)이 뭔가요?

(기존에 있는 말이 아니라, 새롭게 만든 말입니다.)

Pax_humana는 현재 연쇄적으로 LLM 해커톤에 참여하며, 각 해커톤마다 Veclix 서비스에 필요한 기능들을 제작하고 있다.

왜 해커톤에 참여하면서 MVP 개발을 하고 있느냐고 물어보면 그것만의 장점이 있기 때문이다.

최근 LLM 기반 해커톤이 국내/국외에서 많이 생겨나고 있다.

해커톤은 대부분 짧은 시간의 아이디제이션을 통해 프로덕트를 빠르게 만들어내는 대회다.

주제가 LLM기반이기 때문에 허용되는 아이디어의 폭이 굉장히 넓다.

Pax_humana가 만들어내고 있는 LLM기반 프로덕트라는 방향성과 해커톤의 주제가 일치한다.

보통 해커톤에 참여하는 다른 팀처럼 짧은 기간동안 아이디제이션을 하는게 아니라,

마일스톤대로 계획되어 있던 개발을 해커톤 기간 내에 끝내는 방식으로 참여하고 있다.

현재 Pax_Humana에서는 LLM기반 프로덕트를 빠르게 만들어내고 있기 때문에 이것과 핏이 잘 맞았다.

이 방식의 MVP 개발을 Hackathon-Driven Building으로 부르기로 했다.

Hackathon-Driven Building은 굉장히 큰 장점이 있다.

제품의 마감 기한이 정해져있고, 어쨌든 경쟁이라는 긴장감이 있기 때문에 팀 내부적으로 밀도있는 경험을 할 수 있었다.

대체로 MVP 개발은 최소 기능과 빠른 마감기한을 목표로 한다.

빠른 마감기한이라는 목표를 어떻게 설정하느냐에 따라서 애매해질 수 있는 포인트가 있다.

1. 최소 기능을 제외한 유저의 인터페이스를 고려하기 쉽지 않다. 2. 빠른 마감기한으로 인해 생기는 자잘한 에러를 감수한다.

이런 것들을 생각하지 않고, 적절한 or 충분한 마감 기한을 설정하면, 개발 밀도가 타이트하지 않을 수 있다.

개발 밀도를 올리면서, 빠른 마감 기한을 지키고, 성공적으로 최소기능을 제작하는 것이 MVP 개발에서 중요한 포인트라고 할 수 있다.

이 포인트를 Hackathon-Driven Building으로 채울 수 있다고 생각했다.

해커톤으로 가장한 MVP 개발은

경쟁이라는 요소를 추가해. 기존 MVP 개발이 줄 수 있는 경험보다 한 단계 더 높은 경험을 할 수 있다.

경쟁 때문에 조금 더 잘 만들기 위해, 사소한 부분까지도 정해진 시간 내에서 최선을 다한다.

MVP임에도 불구하고 조금 더 잘 만든 제품까지 챙기고자 했고,

같은 시간임에도 불구하고, 경쟁이 그것을 부추겼다.

최소 기능, 빠른 마감, 조금 더 나은 제품, 이 3마리 토끼를 잡는다는 목적으로

조코딩 AI 해커톤, LabLab Ai agent 해커톤에 연쇄적으로 참가했다.

결국 해커톤과 MVP 개발를 같이했기에, 빠른 시간 내에 최소 기능을 챙기면서 더 나은 제품을 만들기 위해 노력할 수 있었다.

지난 글은 조코딩 AI 해커톤에 참여한 이야기고

이번 글은 Lab Lab ai에서 해커톤 드리븐 빌딩을 실천한 회고다.

🥽 Lab Lab ai agent 해커톤

Lab Lab ai

lab lab ai는

ai 관련 해커톤 or

ai 관련 이벤트를 통해

ai 생태계의 발전을 이루고자 하는 단체다.

이번에 위와 같은 해커톤에 참여했다. 에이전트를 활용한 프로덕트를 만드는 것이 주제인데, 다양한 후원사들이 참여했다.

Open ai에서 종사하시는 연사분과 LLM관련 서비스, 오픈 소스의 대표분들이 나와서 자신의 제품을 소개하고 agent에 대한 개념을 소개했다.

(대회을 위해 Open ai api의 약간의 크래딧을 대회 참여한 메일의 계정으로 부여했다.)

🇰🇷 강제 국가대표

이번 해커톤에는 2381명이 참여했고, 398명의 팀과, 81개의 서비스가 탄생했다.

개회식을 트위치로 진행했는데, 트위치에서 다음과 같은 자료를 볼 수 있었다.

우리 팀에서 @연주환 Felix와 내가 해당 개회식을 시청하고 있었는데, 한국에서는 우리만 개회식을 시청하고 있었다.

태극기가 있으니, 기분이 이상했다. 마치 국가대표가 된 기분. 태극기의 무게가 무거웠다 ㅋㅋㅋㅋㅋ

💪 이전보다 더 미친 몰입

해커톤 기간동안, 무엇을 만들었나?

이전 7일 합숙을 통해 만들었던 프로덕트가 Veclix studio라면

이번에 만든 프로덕트는 사용자가 Veclix를 더 쉽게 사용할 수 있는 Veclix:app이다.

*Veclix는 유저가 더 쉽게 노코드로 AI Agent를 생성 및 판매할 수 있는 Agent 플랫폼이다.

Veclix 앱을 통해 유저는 조금 더 쉽게 벨릭스의 에이전트를 고용(employ)할 수 있다.

이번 해커톤에서는 Veclix의 에이전트와 상호작용을 쉽게 할 수 있는 창구로

UX/UI 개선과

기존 Veclix LLM 엔진을 고도화하는 것을 목표로 했다.

Vec:lix 앱에서는 사용하고 싶은 Agent를 고용하고, 그 결과를 싶게 확인할 수 있다.

이전 vec:lix 스튜디오에서는 유저가 결과를 확인하는 것이 쉽지 않았다. + 유저가 Vec:lix의 전체적인 사용 흐름을 파악하는 것이 어려웠다.

조코딩 해커톤에서도 심사위원들이 Veclix 스튜디오에서 에이전트를 만들고,

에이전트를 고용하는 것까지의 한 사이클을 시도해보기를 기대했다.

실제로는 에이전트를 제작 중에 유저가 이탈했는데, 이것은 유저가 제품 전체의 사용 흐름을 파악하는 것이 어려웠기 때문이다.

그걸 위해 Saas앱의 튜토리얼 과정을 제품 내에서 만들어야 하나, 혹은 튜토리얼 영상과 문서를 제작하고 고도화해야하는지에 대한 고민이 많았다.

처음에 로그인한 유저에게 사용방법을 처음부터 끝까지 하나하나를 알려줄 필요가 있었다.

Veclix 스튜디오는 유저가 처음 서비스에 들어갔을 때, 사용자의 흐름이 하나로 정리되지 못했다.

그렇기 때문에 유저는 Veclix 스튜디오에서 자신이 어떤 행동을 할지 몰라 서비스를 이탈하게 된다. 

(Vec:lix 스튜디오에서는 유저가 에이전트를 고용하고 사용하는 과정까지의 여정이 하나로 정리되어있지 못하다. 이미 사용해본 제작자가 아니라면, 튜토리얼 없이 한 번의 그 과정을 찾아가기 어렵다.)

그렇기에 이번에 주목했던 것은 유저의 흐름을 강제하자는 것이었다. 전체적인 UI를 채팅 형태로 바뀌었다.

유저는 처음부터 끝까지 하나의 채팅 화면에서 모든 것을 다 할 수 있다.

처음 유저가 veclix 서비스에 입장했을 때, 고용한 에이전트가 없고, 현재 사이클과 스케줄이 없으면, 첫 화면부터 veclix가 말을 거는 것부터 시작을 한다. 

채팅으로 store에서 에이전트를 고용해야 한다고 말한다.

그 다음, 다음 동작을 요청을 한다. 

채팅의 안내에 따라 유저가 에이전트를 고용한다면,

그 다음에는 에이전트에 필요한 Tool을 등록하라고 안내해준다.

만약 유저가 notion 툴이 필요하다면, 유저는 notion툴 등록페이지 버튼을 채팅에서 볼 수 있다.

Tool 등록을 완료했다면, 스케줄 등록을 안내한다.

정리하자면, 이전 veclix 스튜디오에서는

한 화면 내에서 유저가 에이전트를 생성할 수 있고,

진행 중인 에이전트를 사이드바에서 볼 수 있고

스케줄을 생성하기 위한 화면으로 이동할 수 있고,

working 중인 에이전트의 상태를 확인할 수 있었다.

Veclix app은 위와 같이 여러가지의 선택지를 한 화면에 두는 것이 아니라,

한 가지 선택지만 한 화면에 두는 것을 목표로 했다.

한 채팅 경험 안에서 모든 상태에 대한 체크와 안내를 가능하게 한다. 

에이전트 고용이 필요한 경우, -> 고용화면으로 이동하라는 버튼을 채팅으로 보내줌 

Tool 등록이 필요한 경우, -> 툴 등록 링크를 채팅으로 보내줌. 

모든 것이 완료되었다면 -> 스케줄 등록 메세지를 보내줌  

사이클이 워킹 중이라면 -> 워킹 중인 사이클의 결과들을 보여줌. 

이로 인해 팀 내부적으로도 따로 안내 메세지나 튜토리얼 영상 or 문서를 제작이 후순위의 task가 되었다.

앞으로 다양한 기능을 유저의 흐름을 의도적으로 유도하는 방향에서 고도화해보고자 한다.

🍚 월요일에는 밥도 안 먹음

얼마나 몰입을 했냐면, 토요일 밤에는 해커톤 오프닝을 들으면서 계속 작업에 몰두했고, 사무실에서 잤다. (역시나)

잠자고 일어나서 바로 일을 했다. 

그리고 밥은 포장이나 배달로해서 먹었다.

사실상 마감 시간인 월요일에는 밥도 먹지 않았다. 모두가 자고 일어나서 작업에 몰두하다가 첫 끼를 22시가 지나서야 먹었다. 

초 집중상태에서 주마등처럼 스쳐지나가던 것들은 다음과 같다.

아, 현재 성공한 팀들은 다 이렇게 지금까지 했구나.

🕖 남은 시간은 30분, 배포도 안 되고 발표자료도 없는데, 큰일났다?

이런 미친 몰입의 도중 우리는 깨달았다. 남은 시간은 30분이고, 우리는 아직 우리가 계획한 것들이 산더미처럼 남았다는 사실을. 

해커톤 드리븐 빌딩 방식으로 빌딩하고 있기 때문에 해커톤 과정에서 우리의 제품을 만들었다는 것에 안도해야 하나? 

초 몰입을 지친 팀원들을 몰아붙이고, 주섬주섬 데모를 만들어서 결과를 제출해야 하나? 

이런 고민들이 모두의 머리속에서 딜레마처럼 떠오를 때쯤. 우연히 모니터에 띄워놓은 lablab ai 홈페이지의 마감시간을 발견하게 된다. 

응? 3시간 남았는데? 

그것을 본 순간 많은 생각이 들었다. 시차가 잘못된 건가? 아니면, 통신의 문제인가? 혹시??!? 시간이 연장된 건가?  

위기는 곧 기회 

디스코드에 lablab ai 채널 해당 해커톤에 들어가서 공지를 봤더니 아래와 같았다. 

(해커톤 시간 3시간 연장 )

우리는 다시 결의에 차올랐다. 3시간 이내에 남은 것들을 최대한 만들고, 남은 발표 자료들도 만들어서 결국 마감 시간을 30분 정도 넘어서 제출했다. 마치 모든 걸 다 쏟아부은 슬램덩크의 산왕전이라고나 할까? 그 후 첫끼를 먹고 그제서야 퇴근을 했다.

🧐 회고

📈 성장

또한번 우리는 성장했다. 팀적으로도 개인으로도. 

팀적으로는 제품개발에 있어서 손발이 맞았다. 

신기했던 점은 약 6시간동안 서로 말도 없이 각자 자기 문제에 집중을 하느라, 대화를 일절하지 않은 적이 있는데, 

6시간 후에 대화를 해도, 그 동안 서로가 어떤 테스크들을 했고, 어떤 테스크들을 진행 중이었고, 어디까지 끝냈는지 예상되었다.

그 후에 서로가 필요한 요구사항들을 서로에게 제시하고, 다시 일을 하는 경험이었다..

제품 개발에 손발이 맞는 느낌이었고, 집단적 몰입이 굉장히 좋았다. 

🤔 고객을 빠르게 만나는 것 VS 제품을 제대로 빌딩하는 것 

팀에서의 다음 단계의 고민은 “고객을 빠르게 만나는 것” VS “제품을 제대로 빌딩하는 것” 중 어떤 것을 선택하느냐이다.

Saas 제품은 고객을 빠르게 만나는 것도 중요하지만, 제품을 제대로 빌딩하는 것도 중요하다고 생각된다. 

물론 가설은 검증해야겠지만, 제대로된 제품을 검증받는 것과 핵심 가설만 검증받는 것은 다르다.

지금까지 우리는 팀의 우선순위가 계속해서 바뀌고, 그것에 맞는 새로운 것들을 제작했기 때문에

고객을 만나기 위한 제품의 최소 사이클이 80%쯤 되었을 때, 새로운 최소 기능을 만들었다.

다시 새로운 최소 기능이 80%쯤 완료가 되었을 때, 다시 우선순위가 설정되고 새로운 최소 기능을 만들기 시작했던 것 같다. 

제품을 100%만들고, 테스트를 받고, 테스트를 기반으로 다음 단계로 가봐도 좋았을 것 같지만,

제품을 빠르게 만들 수 있다는 자신감이 있었던만큼 최소 기능 제품의 범위가 늘어나고 있었다.

그래서 이번에는 지금까지 만들어왔던 빈 곳들을 모두 채워서 제품을 제대로 빌딩하고,

고객을 빠른 시일 내에 만나는 것을 목표로 하고 있다.

시행착오로 우리의 좋았던 선택과 아쉬웠던 선택을 되돌아보고 있다.

그래봤자, 우린 Veclix를 시작한지 아직 약 한달밖에 지나지 않았다.앞으로의 한달이 기대된다. 

⤵️ 하방한계 

하방 한계란?

창업을 시작할 때, 최악을 생각하곤 한다. 최악 중 어떤 최악을 목표로 하는지를 정해야 한다. 

어떤 최악을 팀의 목표로 정하는지가 바로 하방 한계다.

사실 창업을 시작했을 때, 결과는 "input" X "direaction" X "luck" = "result"으로 결정된다. 

최상의 결과는 예측을 할 수가 없다.  luck에 따라 굉장히 서로 다른 결과를 준다. 

input과 direaction은 한계가 있다. input과 direaction의 범위가 1 ~ 10이라면 

luck의 범위는 1 ~ 100,000,000… 으로 정의할 수 있다. 

luck의 따라서 result의 결과가 크게 바뀐다. 

하지만, luck를 1로 가정했을 때, input * direaction만으로 얻을 수 있는 최상의 값을 설정할 수는 있다. 

그것이 바로 하방한계다. 

창업 팀에서는 하방 한계와 상방(최종 미션)을 설정하고 달려야 한다.

창업은 단기적인 불안과 장기적인 확신으로 이어진다. 불안은 하방 한계로 최소화할 수 있다. 

불안은 운에서부터 기원하는데, 그런 운을 최소값으로 넣을 때, 만족스러운 결과(하방 한계)가 나온다면, 

그 결과는 망해도 만족스러운 것이다. 

불안은 하방한계로 다스리고, 장기적인 확신의 꿈의 크기는 더 크게 계속해서 몰아붙여야 한다.

아마존보다 더 큰 기업을 만들겠다. 에어비엔비보다 더 큰 기업을 만들겠다. 나스닥에 상장하겠다. 인류의 새로운 평화의 시대를 만들겠다. 등등

그래서 우리의 하방한계는 무엇인가? 현재 우리의 단기적인 하방한계는 바로 

대한민국에서 LLM 프로덕트를 가장 잘 만들어 내는 팀

내부적으로나 외부적으로나 대한민국에서 LLM 프로덕트를 가장 잘 만드는 팀이 우리의 목표다. 

그렇게 된다면 망했을 때의 불안은 없다.

우리는 각 단계마다의 하방한계와 하늘을 뚫는 상방의 목표를 계속해서 설정하며 달려갈 계획이다. 

마무리

초기팀의 메이킹 로그는 소중하다.

글로벌 기업들이 어떻게 초기 고객 1000명을 모았는지에 대한 뉴스레터 first 1000를 요즘 많이 보고 있다.

초기의 notion은 어땠을까, 제피어는 어땠을까?

초기 팀의 스토리를 볼 때, 흥분되고 떨린다.

이렇게 하고, 더 하면 되는구나, 될때까지 하면 되는 구나. 

여기 없는 기업도 많다. 그 기업들이 초기에 많은 이야기들을 남겨놓았으면 어땠을까 싶다.

디스콰이엇의 메이킹 로그도 이것과 같다. 생생한 메이킹 로그가 떨림을 준다.

다양한 초기팀, 혹은 다양한 스테이지에 있는 팀들의 buiding in public을 보며 인사이트와 동기를 얻는다.

그렇기에 pax humana도 꾸준히 메이킹 로그를 남기고자 한다. 우리의 스토리를 공유하며 발현될 수많은 상호작용을 기대한다.

pax humana의 다음 스테이지는 무엇인가? 

• Veclix MVP 고도화.

• 베타테스트 + 디스콰이엇 + 프로덕트 헌트에 올리기 

• 다시한번 해커톤 드리븐 빌딩 시작이다. => SKT AI 해커톤 "프롬프터 데이 서울 2023"가자고 

7일동안 사무실에서 먹고, 자고. 조코딩X유데미X원티드 AI해커톤 회고

(작성자 본인입니다.)

3줄 요약

1. 7일동안 사무실에서 먹고, 자고 해커톤을 준비했다.

(심지어 공용사무실에서🤣!! 양해해주신 주변 팀분들께 감사하다는 말씀을 전합니다.)

1. 7일동안, AI 에이전트 플랫폼 Vec:Iix의 초안을 만들어냈다.

2. 결과는 탈락. 하지만, 그게 중요한 게 아니다. 우리는 우리의 마일스톤대로 간다. 해커톤은 제품개발을 부스팅하기 위한 수단. 다음 해커톤은 글로벌로 간다.

목차

0. Pax humana(팍스 휴마나) 소개

1. 7일동안의 고군분투

2.결과와 회고: 되는 팀이라는 것을 내부적으로 + 외부적으로 증명하기

3. 앞으로의 마엘스톤

0. 🚀 Pax humana(팍스 휴마나) 소개

Pax human 소개

Pax humana는

인공지능을 최대로 활용하고 함께 공생하며, 인류 전체의 번영을 이끈다는 비전을 가지고,

LLM 기반 프로덕트를 빠르게 개발하고 있는 팀입니다.

로마 제국의 평화의 시대를 이야기하는 "Pax Romana",

2차 세계대전 이후 미국의 강력한 국력을 바탕으로 한 평화의 시기 "Pax Americana"처럼

평화의 의미 Pax와 Humana(인간)를 합쳐서 만든 합성어입니다.

현재는 Pax Humana 팀은

누구나 쉽게 AI 에이전트를 생성하고 판매 및 고용할 수 있는

AI 에이전트 플랫폼 Vec:lix를 제작하고 있습니다.

Pax human 팀원들

@연주환 Felix

@김지성

@전성운

@백민기

Pax human 메이커 로그

지난 메이커 로그에서 말씀드렸다시피 Pax humana(전: 라스토리아)팀에 합류하게 되었습니다.

Pax humana팀의 메이커로그를 담당하게 되었는데요.

앞으로 프로덕트 제작 과정의 인사이트를 공유하고자

지속적인 메이커 로그를 남기려고 합니다. 많은 기대바랍니다!

아래는 본격적으로 7일동안 사무실에서 먹고, 자고하면서

조코딩X유데미X원티드 AI해커톤에 참여한 후의 인사이트를 공유드립니다.

1. 🛫 7일동안의 고군분투

왜 이런 비정상적인 일을 하게 되었는가?

초기 스타트업.

0에서 1도 만들지 못한 팀.

PMF를 찾지 못한 팀.

시장의 반응을 얻으려고 발버둥치는 팀.

투자를 받거나, 스스로 매출을 올리지 못한 팀.

현재 이런 상황에 놓여있는 팀에게 9 to 6 출퇴근이 어울리지 않는다고 생각했다.

구글이 처음 시작되었던 "차고지",

페이스북이 처음 시작되었던 "기숙사방"같은 공간이 우리에게 필요했다.

미친듯이 몰입하여 제품을 만들고 문제를 해결할 수 있는 공간이 필요했다.

하지만, 현재 우리에게 그런 공간이 준비되지 않았고, 그렇다면 지금 사용하고 있는 공간을 그렇게 만들기로 했다.

그렇다면, 현재 사무실에서 자고 먹고, 하면서 일하는 수 밖에 없었다.

퇴근은 없는 거라고 생각하고, 함께 생활하기로 했다.

이렇게 했을 때, 기대효과는 다음과 같다.

1. 최고의 몰입을 이끌어낼 수 있다.

2. 하루 중 불필요한 시간 낭비를 줄일 수 있다.

3. 소통이 빠르다.

1. 최고의 몰입을 이끌어낼 수 있다.

• 팀원들이 같은 공간에서 같은 목표를 가지고 일하는 것이 최고의 몰입이다.

• 재택, 온라인 근무에 대해서 긍정적으로 생각하지만, 같은 공간에서 모두 함께 실제 대화로 소통하는 것이 중요하다..

• 같은 목표를 가지고 함께 몰입하는 팀원들을 보고, 서로 자극을 주고 팀적인 몰입도를 끌어올릴 수 있다.

• 개인적인 몰입도는 개인의 컨디션에 따라서 달라지지만, 팀적인 몰입도는 함께 구축한다면 오래 지속됨

1. 하루 중 불필요한 시간 낭비를 줄일 수 있다.

• 아무리 열심히 일하는 허슬러라도, 퇴근 후, 출근 전 불필요한 시간이 존재한다.

• 자기 전, 출근 전, 일부 시간을 이용한 인스타그램 or 유튜브 시청 등등

• 함께하는 시간이 많을수록 서로가 일에 집중할 수 있는 시간이 많아질 것이고, 잠 + 일로만 24시간을 채울 수 있을 것이라고 생각했다.

1. 소통이 빠르다.

• 거의 모든 시간을 함께하며 빠른 소통을 기대했다.

• 기획을 변경하거나 새로운 기능이 필요할 때, 즉각적으로 논의 후 액션을 기대했다.

• 평소에는 새로운 기획이나, 기능이 필요하다면, 그걸 전달하고 인지시키는데도 시간이 많이 필요하다.

• 회의 요청 및 시간 조율 -> 맥락 전달 -> 새로운 기획 전달 -> 액션 요청

• 계속 함께 일하고 있었다면, 위의 다양한 과정이 생략된다. 맥락을 빠르게 캐치하고, 바로 진행가능하다.

• 그렇기에 속도와 유연함을 동시에 챙길 수 있다.

위와 같은 기대효과를 위해 우리는 합숙이 필요했다.

합숙이 필요했지만, 팀 내부적으로 이런 몰입을 만들어가는 계기가 필요했다.

그것이 바로 "해커톤"이었다.

그래서 "조코딩X유데미X원티드"가 함께 진행하는 AI해커톤에 참여하게 되었다.

생성 AI를 활용한 해커톤이었으며, 현재 팀에서 준비하고 있는 프로덕트와 성격이 잘 맞았기 때문에 참여하게 되었다.

시기적으로는 팀에서 계속해서 고민해오던, agent 생성 툴을 제작해볼 수 있는 기회였다.

이 해커톤에 맞춰 새로운 제품 개발에 들어가게 되었다.

해커톤 기간동안 기획부터 제품 제작까지 전 과정을 완성한다는 목적을 가지고 합숙을 시작했다.

해커톤에서 제작한 제품이 바로 AI 에이전트 플랫폼 Vec:lix다.

Vec:lix 설명

Vec:lix는 개발자만이 제작할 수 있었던 AI 에이전트를 누구나 노코드로 제작할 수 있고, 제작된 에이전트를 다른 유저들과 공유 및 판매할 수 있는 특징을 가지고 있습니다.

Vec:lix는 생성된 에이전트를 고용하여 인간만이 할 수 있었던 지능형 반복작업(블로그 SEO, 뉴스 기사 읽기, 자소서 쓰기, 데이터 분석 등)을 자동화합니다. 지능형 반복작업에서 자신만의 노하우를 구조화하고 학습시켜, 최고의 성능을 이끌어낼 수 있습니다. 에이전트가 업무에 사용하는 Tool(검색, API, 스프레드시트 등)들을 스스로 선택·추가하여 자유로운 확장이 가능합니다.

글로벌하게는 agent와 관련된 오픈 소스와 서비스들이 우후죽순 생겨나고 있다.

agent 관련 시장이 나날이 커져가고 있다.

이 해커톤을 계기로 Vec:lix를 agent 생태계 경쟁으로 뛰어들고자 했다.

사무실에서 합숙을 한다면 어떤 모습일까?

우선 다들 집에서 살림살이를 챙겨왔다.

나는 요가매트와 세면도구를 챙겨왔고, 다른 팀원들은 침낭, 휴대용 메트리스 등 굉장히 다양한 물품을 들고 왔다.

씻는 건 사무실 근처의 헬스장 혹은 사무실과 집이 가까운 팀원들은 자취방을 이용했다.

업무는 대부분 새벽에 끝이 났고 회의실에 들어가 잤다.

이런 생활 속에서 일어났던 재미있는 에피소드를 아래의 공개한다.

에피소드

공용 사무실은 고려대학교 캠퍼타운에서 제공되는 사무실이었고, 회의실은 2개였다.

한 회의실에는 간의 침대가 있었는데, 팀원 중 한 명이 새벽 6시까지 일을 하다가 간의 침대에서 잠을 잤다. 다른 팀들의 출근 시간이 다가오고 있었다. 원래는 빠르게 일어나서 학교의 수면실을 이동할 계획이었는데, 잠에서 깨지 못한 팀원은 그대로 회의실에서 잠을 잤다.

옆팀에서 출근 후 회의

를 위해 회의실을 찾았다. 어두운 회의실에서 자고 있는 팀원을 발견했다.

......

자고 있던 팀원과 회의실을 찾은 옆 팀사람들 모두에게 어색한 상황이 연출되었다.

(이러한 연유로 캠퍼스타운 공간 이전 기간에 개인 공간을 갖춘 사무실로 이전했다.)

사무실 합숙 사진

(아찔한 잠자리)

(아찔한 잠자리에서 실제로 자는 모습)

(무려 새벽 6시)

RealMate의 레슨런을 반영한 Vec:lix의 기획, 개발

Pax humana는 라스토리아, 미연시 게임, RealMate 등 굉장히 빠른 주기로 제품을 개발해왔다.

RealMate를 개발할 때, 상당히 큰 레슨런이 있었다.

RealMate는 AI 인플루언서, AI 여자친구와 채팅을 할 수 있는 서비스였다.

간단한 기능들로만 구성되어있다고 생각했고,

빠르게 만들어내어 검증하는 것이 중요하다는 생각했다.

위와 같은 생각으로 인해 페이지 기획만 하고, 제대로 된 기획없이 제품을 개발했다.

(이것도 개발부터 하고보려는 개발자의 자아가 발현되었던 것일수도...)

그러다보니, 개발을 하면서 새로운 기능들이 계속 필요해졌고, 마감기한이 자꾸만 늘어졌다.

이러한 실수를 반복하지 않기 위해서 이번에는 합숙 전 3일이라는 시간 안에 할 수 있는 한 최대한의 기획을 하고자 했다.

그리고 Vec:lix의 경우, 이미 있는 형태의 서비스도 아니었기 때문에 레퍼런스를 삼을 수 있는 서비스도 적었다.

그렇기에 더욱 상세한 기획이 필요했다.

우선 가장 중요한 agent를 어떻게 정의하고, agent를 이루는 task와 각 task의 툴들이 어떻게 상호작용할 수 있는지 기획하는 것이 중요했다.

프론트엔드 개발의 경우, 필요한 페이지, 컴포넌트, 필요한 커스텀 훅을 모두 정의하고 들어갈 정도로 상세히 기획했다.

이런 방식의 기획이 효과적이었던 이유 중 하나는 내가 개발하는 부분이 아니더라도, 팀원들 모두가 프로덕트 전체의 구조를 알 수 있었기 때문에 소통이 빨랐다. 빠르게 개발하되, 그 안에서 질서를 찾아가는 느낌이었다.

빠르게 개발하는 상황에서는 코드를 리펙토링할 시간이 충분하지 않기 때문에 다른 사람의 코드를 이해하고 이어서 개발하는 것이 어려운데, 필요한 페이지, 컴포넌트, 필요한 커스텀 훅을 모두 공유하고 들어가니 다른 팀원이 개발한 부분에 대해서도 빠르게 이해했고, 이어서 개발이 가능했다.

개발하는 부분에 오류가 있을 때도 공유가 빨랐다. 문제가 되는 맥락을 파악하기 쉬웠고, 빠른 대처가 가능했다.

이처럼 상세 기획을 모두 함께 공유하고 개발하는 방식은 불필요한 비용을 최소화해주었다.

해커톤 기간동안 제작한 Vec:lix 미리보기

Homepage(”/home)

• 크래프터 유저가 만들고 있는 에이전트와 유저가 고용(employ)한 에이전트를 보여줍니다.

• 에이전트 생성 수정 페이지(”/craft/[id]”) + 에이전트 고용페이지(”/employ”)로 이동할 수 있습니다.

Craft(”/craft/[id]”)

• 에이전트를 생성할 수 있는 페이지입니다.

• 에이전트마다 수행되는 Task들을 설정할 수 있고, Task마다 사용할 수 있는 프롬프트와 Tool을 설정할 수 있습니다.

• 에이전트에 해당하는 Task와 툴들을 설정했다면, 각 Task마다 run을 통해 결과를 확인할 수 있습니다.

• 에이전트를 employ하고 싶다면, 우측 상단에 HireMe를 클릭하여 다른 유저들에게 공개할 수 있습니다.

Employ(”/employ/[id]”)

• 고용(employ)된 에이전트를 스케줄링할 수 있는 페이지입니다.

• employed 에이전트의 기본 설정을 변경할 수 있고, 스케줄을 설정할 수 있습니다.

• 스케줄을 설정하고 active button을 누른다면, 지정한 스케줄들은 각각 하나의 Cycles이 되어 agent를 실행합니다.

• 우측에서는 각각의 사이클에 대하여 실행 결과를 확인할 수 있습니다.

2. 🖌️ 결과와 회고: 되는 팀이라는 것을 내부적으로 + 외부적으로 증명하기

7일 합숙의 효과

합숙의 효과는 엄청났다.

RealMate보다 훨씬 더 많는 기능과 페이지를 가진 Vec:lix였지만, 상세 기획을 통해서 빠른 기획과 빠른 개발이 동시에 가능했다.

RealMate의 개발은 2주가 넘게 걸렸다면, 더 많은 기능과 페이지를 가졌지만, Vec:lix는 7일만에 마무리할 수 있었다.

빠른 개발 속에서 질서를 잡아가는 방식이 소통 효율을 높여주었고, 합숙을 통해서 소통 빈도를 높였기 때문에 개발딴에서 문제들을 유연하게 대처할 수 있었다.

탈락회고와 그것에 대한 액션

결과적으로 해커톤에서 좋은 결과를 얻지 못했다.

내부적으로는 동작하지만, 외부적으로 제품의 "와우 포인트"를 보여주지 못했다.

현재 제작완료한 agent는 해커톤 기간 내 제공되는 wanted api를 통해서

유저가 원하는 직무를 찾을 수 있는 agent였다.

하지만, 제작된 agent를 실행하고 결과를 보려면 디스코드를 통해서만이 가능했다.

실제로 task별로 실행하고 테스트하는 기능을 제작하기 전이었다.

agent 생성(craft) -> agent 고용(employ) -> agent 실행(schedule)의 과정이 핵심이었기 때문에 이 프로세스를 구축하는 것에 가장 큰 공을 들였다. 만약 해커톤이 우선순위였다면, 결과를 보여주는 것에 비중을 크게 두었겠지만, 장기적으로 이 프로레스를 구축하는 것이 우선순위였다. 그렇기 때문에 제품을 실행했을 때의 과정과 결과를 직접적으로 보여주지 못한 것이 페인 포인트였다.

페라리의 엔진, 포르쉐의 휠을 만들었지만, 조립하지 못했다는 것이 아쉬움이었다.

해커톤의 아쉬움으로 결정된 액션은 다음과 같다.

1. 일단 현재는 사용할 수 있는 agent의 숫자가 너무 부족하다. 내부적으로도 agent의 가치를 제대로 느끼지 못하고 있다. 그렇기 때문에 내부적으로 "와우"할 수 있는 agent를 만들어내자.

2. 내부적으로 만든 agent를 바탕으로 유저들에게 잘 보여줄 수 있는 UX/UI를 구축하는 것이 목표다.

내부적으로 + 외부적으로 되는 팀이라는 것을 증명하기

초기 창업팀에는 팀 내에서 스스로가 "되는 팀"이라는 걸 인지하는 것이 굉장히 중요하다고 한다.

연쇄창업자들이 다음 창업에도 성공할 확률이 높은 이유가 이전에 성공한 경험을 가지고 스스로 "되는 팀"이라는 인지하기 때문이라고 한다.

창업에서는 고통을 감내하고 이겨내야 하는 날들이 그렇지 않은 날보다 많다. 창업에서 실패의 경험은 성공의 경험보다 많다. 여러번의 시행착오를 거쳐야만 시장에서 반응을 얻어낼 수 있다. 이것은 창업에 있어서 필연적인 일이다.

여러번 실패의 경험을 맛보게 되면 "우리는 안 되는 팀인가?"라는 의심이 스멀스멀 올라온다. 이런 의심을 잠재우기 위해서 팀 내부적으로 작은 성공을 조명하고, 내부적으로 되는 팀이라는 것을 인식하는 것이 중요하다.

빠르게 제품을 개발한 성공, Llama Index 오픈 소스에 기여한 성공, 회고를 통해 더 나아질 거라는 기대감을 통해서 내부적으로 되는 팀이라는 계속 조명하고 있다. 이런 내부적인 인식으로 팀 내부적인 정서적 안정감을 만들고, 계속 제품을 만들어내어 여러 가치들을 만드는 것이 목표다. 그 후에 만들어낸 가치들 중 하나가 고객에게 닿을 때 시장에서 반응을 얻어낼 수 있다. 시장에서 숫자로 증명된다면 외부적으로도 "되는 팀"이라는 사실을 증명해낼 수 있고, 이것이 팀을 지속가능하게 만들어줄 것이라 생각한다. "해커톤 과정과 자체 회고"를 통해서도 우리가 "되는 팀"이라는 사실을 계속 짚고, 성장하고 있다는 느낌을 받았다.

3. 🪨 앞으로의 마일스톤

8월 16일까지 내부적으로 "와우"할 수 있는 agent 제작하기

탈락 회고와 액션에 대해서 말했던 것처럼 우선 8월 16일까지 내부적으로 "와우"할 수 있는 agent를 제작하는 것이 목표다. 내부적으로 사용하기 편리한 agent를 만들어 agent가 어디까지 가능하게 할 것인가를 확인하고자 한다.

아래는 우리가 기간동안 만들어낼 에이전트다.

1. Slack Resources channel → 노션/슬랙에 정리해주는 에이전트

2. google search를 통해서 오늘의 트랜드를 파악하고 → 블로그 작성해주는 에이전트 등등

또한 필요한 agent를 만들어서 사용했을 때, 팀 내부적으로 생산성이 커지는지를 실험해볼 예정이다.

8월 21(월) Lab Lab ai 해커톤 참가하여 유저들이 쉽게 사용할 수 있는 UX/UI 구축

Lab Lab ai는 ai관련 해커톤과 이벤트를 열어서 ai 생태계의 빠른 성장을 조성하는 커뮤니티다.

이번에 Open ai, super agi, aws, llamaIndex 등등에서 후원Autonomous Agents Hackathon을 개최하는데, 이번에도 해커톤을 통해 몰입의 계기를 만들고자 참여한다.

해커톤 기간동안에는 유저들이 쉽게 사용할 수 있는 UX/UI를 구축할 계획이다.

지금까지 우리가 만들어왔던 것이 Vec:lix studio 페이지였다면, 이 기간동안 이전과는 독립적인 Vec:lix for user 서비스를 제작해서 유저의 사용성을 높일 계획이다. 이 이후 다음단계에서 본격적으로 테스트 유저들을 모아 피드백을 받고, 서비스를 고도화해나갈 계획이다.

Outro

위의 마엘스톤에 대한 레슨런과 메이커로그는 다음 글에서 계속될 예정입니다😀.

끝까지 읽어주셔서 감사합니다!

회고로 탄생한 우리 팀만의 언어

목차

• 회고의 필요성

• 회고는 언어를 만든다

• 회고로 탄생한 우리 팀만의 언어

• 개발자의 자아를 버려라

• 테스트 디비는 더러워야 한다.

• 그래서 그게 지금 당장 필요한 거 맞아요?

• 잘 팔 수 있나? 더 잘 팔 수 있나?

• 마무리

회고의 필요성

팀 내부적으로 회고를 진행했다.

회고는 우리를 더 빠르게 한다. 

회고는 팀 전체적인 방향을 확인하는 피드백이다. 

김창준, 『함께 자라기 애자일로 가는 길』, 인사이트, 2018

에서는 "개인"의 성장과 관련해서 "피드백을 제때 받지 못하는 문제가

개인의 성장을 더디게 한다는 내용이 나온다.

양치질을 예로 들어, 일 년 이를 잘못 닦다가 치과에 가서는 의사에게 한소리 듣는 정도로 느린 피드백을 받으면,

이미 이는 썩어버린다. 그리고 그 피드백을 한 번 받는다고 해서 매번 이를 닦는 적절한 시기에 피드백이 없으면 같은 실수를 반복하고 만다.

팀적으로도 피드백은 마찬가지의 효과를 가진다.

적절한 시기에 피드백을 함으로써 더 뽀족한 방향을 볼 수 있다.

액션과 피드백 사이의 간격이 짧을수록 그 액션을 다듬을 수 있다.

그렇기 때문에 패드백은 액션 후 빠르게 진행하는 것이 좋다. 

회고는 언어를 만든다

팀 내부적으로 회고를 하면서

우리의 액션들을 피드백하면서

좋았던 점은 우리만의 언어가 생긴다는 점이다. 

언어는 곧 문화다. 

언어가 곧 문화인 이유는

짧은 국어국문학적 전공지식으로 설명할 수 있다. 

언어는 현상을 정의하는 활동이다. 

현상이 있으면, 현상들을 군집화하고, 반복적으로 일어나는 현상을 하나의 언어로 정의할 수 있다.

집단 내에서 반복적으로 일어나는 현상은 문화고,

이러한 것들을 언어로 꼬집어 말할 수 있으면, 

문화를 문화로써만 가지고 있는 것이 아니라,

팀 내부적으로 인지할 수 있다.

그리고, 내부적으로 인지하고 있는 문화를

계속해서 팀 내부적인 언어로써 언급해준다면, 

그 문화를 더 강화시킬 수 있다. 

회고로 탄생한 우리 팀만의 언어

이번에 회고하면서 생겨난 우리 팀만의 언어를 소개하려고 한다. 

대게 아쉬운 부분들을 개선하려고 나왔던 언어들이었고, 그 언어들이 어떤 현상을 지적하고, 

그 현상들을 어떻게 표현하고 있는지 이야기해보려고 한다. 

개발자의 자아를 버려라

우리팀은 모두가 개발자의 자아를 가지고 있다. 

모두가 개발자(해커)인 집단의 팀에서 필요한 것은 개발자의 자아를 버리는 일이다. 

빠른 출시를 위해 제품을 만들다보면, 아래와 같은 현상이 생긴다. 

“개발 도중”:

1. 이 코드가 이렇게 바뀌면 한번만 실행해도 되잖아. 바꿔야겠다. (Development experience 개선)

2. 이렇게 바꾸면 UX적으로 좋을 것 같은데?

간단하게 몇 십분만으로 끝날 것 같던, 1,2번의 일들이 실제로는 하루 업무의 주된 테스크가 되기도 한다. 

근데, 이런 것들이 굉장히 중요한가? 현재 팀의 주된 목표를 해소하는데, 이것들이 중요한가? 

중요하지 않았다. 팀은 현재 완성을 목표로 달려가고 있는 중이고,

이런 와중에 개발적 디테일이나, 코드의 퀄리티는 중요하지 않았다.

물론 현재 팀의 원띵이 리펙토링으로 개발 경험(DX)을 개선하는 것이라면 당연히 해야 할일이지만,

지금 현재 우리팀의 목표는 그것이 아니었다.

그렇다면, 이런 것들은 지금 당장 필요한 것들이 아니었고, 후순위로 미뤄도 되는 것들이었다. 

이러한 문제점들에 대해서 이야기하다보니,

이런 현상을 우리는 “개발자의 자아”라고 정의했다. 

개발에서는 좋은 코드는 무조건 "참"이다. 효율적이고, 반복을 덜 하는 코드는 무조건 "참"이고, 반대인 코드는 무조건 "거짓"이다. 

하지만, 개발자들이 모인 팀에서 팀의 원띵과 목표를 향해서 간다면, “좋은 코드(clean code)”는 현재 시점에서 "거짓"일 수도 있다. 

이런 것들을 항상 인식하자는 생각에서 

“개발자의 자아를 버려라”

라는 말이 등장했다. 

테스트 디비는 더러워야 한다.

현재 우리는 프롬프트를 활용한 제품을 만들고 있다. 프롬프트를 고도화하여 chat bot의 성능을 높이려면 무엇을 해야 할까? 실험과 테스트다. chat gpt에게 system 프롬프트 입력하고, 써보고  결과를 보고 개선하고, 이를 반복해야 한다. 

결국 고객이 만족할만한 경험을 주는 것이 이번 목표였는데, 웹/앱 개발에만 초점을 맞추고 있었다. 수시로 테스트하고 이것이 우리가 의도한 대로 대답하는지를 테스트해야 했다. 하지만, 그러지 못했다. 

테스트 디비가 너무 깨끗했다. 

테스트 디비가 너무 깨끗하면, 테스트 디비를 파놓은 이유가 없지 않은가? 개발자의 자아가 나와서 무조건 테스트 디비는 필요한 거야 라고 해서 만든게 아닌 이상, 우리는 테스트 디비로 최대한 많은 실험을 해야 했다.

이런 문제 현상을 꼬집고자, 테스트 디비는 더러워야 한다는 문장이 등장했다. 

그래서 그게 지금 당장 필요한 거 맞아요?

우선 순위를 계속해서 생각하자는 의미로 우리는 끝임없이 이 문장을 묻기로 했다. 

잘 팔 수 있나? 더 잘 팔 수 있나?

우리의 원띵을 계속 되내이기 위해서 탄생한 문장이다.

마무리

회고는 우리를 더 빠르게 한다. 비효율적으로, 감정적으로 손해를 보고 있었던 현상을 꼬집어낸다. 

현상의 문제점을 계속해서 짚어내면서 비효율을 개선할 수 있다. 

동시에 액션들을 되돌아보면서 문화를 캐치해내고 그것을 언어로 정의할 수 있다. 

회고를 통해서 달라질 액션들을 기대한다. 

초기팀에서 다 알지만 안 되는 것: 고객을 직접 만나기

목차

• 고객을 직접 만나기

고객을 직접 만나기

다 아는 사실. 그래서 우리는 고객을 만났나? 

사실 고객 정의부터 안 되어있던 건 아닐까? 

창업 교육에서 고객 정의는 쉽다. 

페르소나를 만들고, 비즈니스 캔버스를 그려보면 된다. 

그러면 끝인가? 정의한 고객을 어디서 제일 빨리 만날 수 있나? 

고객의 진솔한 목소리를 어떻게 끄집어 낼 수 있나? 

고객을 만날 수 있는 곳이 마땅지 않다면? 내가 그 고객이 되어야 하는 것인가? 

고려대학교 Next 데모데이 중간평가에서 

언박싱드림즈 @성호최 는 “고객을 만나라”를 실제로 실천했을 때, 그렇지 않았을 때와 어떤 차이가 있는지를 공유해줬다.

고객을 직접 만나기 전, 

1. 고객을 정의하고 고객의 문제를 “추측”하기 위해 11시간 가량 회의를 진행함.

1. 컨텐츠도 제작하고, 광고비를 8만원 태움.

1. 총 100시간의 노동력을 쏟았다. 

1. 그 후 결과를 보니, 이것이 고객의 문제인지 파악하기 힘듦

“하루는 실제로 식당의 고객을 찾아가서 1시간 인터뷰를 했다.”

고객의 문제라고 생각했던 가설 중 하나가 완벽하게 틀렸다는 것을 알았다.

100시간의 노동력과 1시간의 고객인터뷰는 같은 가치를 가지거나 혹은 후자가 더 큰 가치를 지닌다. 

이런 레슨런을 듣고, 다 알고 있지만 하고 있는 것과 하지 않는 것의 차이는 크다고 다시금 느꼈다. 

우리는 개발자(해커들)로 모인 집단이다.

현재 시장에서 검증된 프로덕트 중 우리가 더 잘할 수 있는 것을 빠르게 만들고 반응을 보려고 한다.

빠르게 개발해서 출시한 후 유입되는 고객들에게 더 좋은 것을 제공해주는 방향으로 검증하는게 더 빠르다는 생각했다. 

기획부터 개발까지 2주라는 시간을 두고, 프로덕트 출시를 위해서 달리고 있다. 

그렇기 때문에 “고객은 출시 후에 만나서 검증하자.”가 되어버렸다. 

생각보다 제품을 빠르게 만들 수 있는 팀에서도 제품을 만드는데, 엄청난 리소스가 든다는 것을 깨달았다. 또한 그 리소스를 적재적소에 쓰는 것이 어렵다는 사실도 알았다.

시장에서 반응을 얻고 있는 제품 중 하나라도 “고객을 직접 만나는 경험”이 필요하다.

시장에서 반응이 왜 좋은지, 고객이 이 제품을 사용하는 이유가 무엇인지, 언제 사용하는지, 팀원들 전부가 고객이 될 수 있을만큼 파야 한다.

고객을 직접 만났을 때, 고객에게서 얻고자 하는 점이 무엇인가를 정의할 수 있고, 그러면 그것을 위한 우리의 우선순위가 무엇이고, 그럼 우리가 지금 무엇을 해야 하는가가 나온다. 

역시 쉬워 보이는 간단한 진리가 가장 어렵다.
고객을 직접 만나자.

혼자하겠다는 고집을 버리고 "팀:라스토리아"에 합류합니다.

목차

• 🤝 팀:"라스토리아"에 합류합니다.

• 🤖 Chat GPT 3.5의 장점

• 💻 어떤 프로덕트를 만들지 결정하는 조건 4가지

🤝 팀:라스토리아에 합류합니다. 

스타트업을 퇴사하고, 혼자하고 싶었다. 

스스로 모든 의사결정에 책임을 지고, 빠르게 나아가고 싶었다. 

혼자서 증명해낸 후에 팀원들을 모으고 싶었다. 

하지만, 혼자라는 것은 생각보다 속도가 빠르지 않았다.

새로운 것을 배우고, 적응하는 것에 방향을 잘 몰랐고, 열정 레벨이 떨어졌다. 

그러는 와중, 라스토리아팀과 대화를 하게 되었다. @연주환 @김지성

라스토리아팀은 생성 AI를 활용하여 무한 생성 텍스트 RPG 게임: 라스토리아를 제작했고, 

생성 AI를 활용한 게임엔진을 베타 테스트 중이었다. 

현재 생성 AI가 등장한 후 생성 AI와 관련된 다양한 프로덕트가 나오고 있는 중이다. 

하지만, 대부분의 프로덕트들의 유형은 비슷했다. 

아래와 같이 3가지 유형으로 나눌 수 있다.

1. chat gpt를 이전보다 잘 쓸 수 있게 해주는 플로그인, 

(chat gpt에게 검색을 달아주고, 브라우저에 chat gpt를 활용가능하게 하거나, 프롬프트를 미리 입력하게 해주거나),

1. chat gpt 프롬프트들을 모아놓은 플랫폼, 

2. chat gpt AI를 활용한 chat bot

(system 프롬프트에 입력가능한 값들을 모두 던져놓고, system 프롬프트를 기반으로 대답을 가능케하는 chat bot) 

사실, 혼자서 3번의 것들을 해보려고 시도 중이었다. 다양한 도메인에서 3번의 필요성이 증가되고 있고, 3번을 어디에 적용해야 폭발적인 임펙트를 낼 수 있을지에 대한 고민이 있었다. 

대부분의 chat gpt 관련 프로젝트를 시작하는 팀들은 이와 같은 고민을 하고 있었을 것이다. 

하지만, 라스토리아팀은 달랐다. 

단순히 프롬프트를 짜고, chat gpt에게 정해진 룰 내에서 답변을 기대하는 것이 아니라, 

수행 단위로 어떻게 chat gpt를 엮어야, chat gpt의 능력을 극대화할 수 있을지 고민하고 있었다. 

생성 AI생태계의 가장 앞단의 고민을 풀어가고 있다고 느꼈고,

이런 팀에서 성장해보고 싶다는 생각이 커서 합류하게 되었다. 

🤖 Chat GPT 3.5의 장점

라스토리아 팀에서 고민한 현재 3.5기반 chat gpt가 잘 할 수 있는 것들은 다음과 같다.

*chat gpt 4는 비싸서 현재 프로덕트 사용할 수 있는 3.5기반의 chat gpt가 잘할 수 있는 것들을 고민했다.

- 3.5 기반의 LLM이 현재 가능한 것들

    1. 대화를 잘 주고 받는다.

    2. 비정형 데이터를 정형 데이터로 변형할 수 있다. (function)

    3. Sequential하게 동작할 수 있다. (Agent)

    4. 속도가 느리더라도 유저가 원한다면, 객단가를 높여서 GPT4를 쓸 수 있다.

    5. VDB를 활용해서 장기 기억을 만들 수 있다.

1. 대화를 잘 주고 받는다.

chat gpt 3.5는 대화를 주고받는 것에서 굉장한 강점이 있다.

이 부분에서는 5(VDB를 활용해서 장기 기억을 만들 수 있다.)와 연결지어서 이미 임펙트를 발생시키고 있다. 

벡터 데이터베이스를 활용하여 이전의 맥락들을 장기 기억시키면, chat bot은 인간이 하는 것 못지 않게 좋은 성능을 뽑아낸다.방대한 양의 데이터를 학습하고 필요할 때 끄집어 내서 사용하는 것은 인간이 학습하는 속도보다 훨씬 빠르다. 

대화를 잘 주고 받는다는 chatgpt의 장점에서

파생되는 프로덕트들은 chat bot과 같은 유형의 프로덕트다.

2. 비정형 데이터를 정형 데이터로 변형할 수 있다. (function)

chat gpt로 인해서 검색 경험이 변화할 것이라고 말한다.

이전까지 검색은 1차원적인 데이터들을 끌어모아서 인간의 판단으로 데이터를 가공하는 형식이었다.

만약 원하는 정보가 “안암동 근처의 예쁜 카페”라면, 

이전까지의 검색은 다음과 같은 과정을 따른다. 

1.안암동의 지도 맵을 연다.

2.카페들이 모여있는 카페 탭을 연다.

3.카페들의 사진을 보고(선형 탐색), 예쁜 카페를 선정한다.

4.예쁜 카페 중 가고 싶은 카페를 고른다. 

하지만, chat gpt는 날 것 그대로의 데이터를 스스로 판단해서 후보 3가지를 추려줄 수 있다. 

인간의 검색 경험의 단계가 줄어든 것이다. 비정형 데이터를 찾지 않아도 되고, 정형 데이터를 바로, 얻어볼 수 있다.

"2(비정형 데이터를 정형 데이터로 변형할 수 있다)의" 맥락에서 파생된 프로덕트의 예시로는 bing이 있다. 

1과 2가 조합된다면, 

검색을 통해 상품을 구입하던 커머스에도 굉장히 큰 변화가 생긴다. 

원하는 것들을 유저가 스스로 찾아서 구매하던 쇼핑(디스커버리형 쇼핑)에서 

이전에 샀던 것, 좋아요를 누른 상품 등 유저의 데이터를 바탕으로 상품을 추천해주는(알고리즘 추천 쇼핑)이 되었고, 

이제는 LLM이 곁들어지면서 "질문 -> 답변 방식"의 쇼핑으로 변화할 것이다.

3. Sequential하게 동작할 수 있다. (Agent)

수행 단위로 chat gpt를 역어서 chat gpt의 활용을 극대화할 수 있다.

예를 들어서 다음과 같은 내용을 찾는다고 해보자. 

“생일날, 안암동 근처에서 여자친구와 갈 수 있는 예쁜 카페”

이전보다는 굉장히 복잡한 수행이 예상된다. 

예쁜 카페만 찾는 것이 아니라, 생일날이라는 맥락과 여자친구와 함께라는 맥락이 추가되었다. 

다음과 같이 수행을 엮어서 원하는 결과를 얻을 수 있다. 

생일에 대한 맥락을 찾고, 

여자친구와 함께 가는 카페에 대한 맥락을 찾고

안암동 근처의 예쁜 카페에 대한 맥락을 찾으면, 

그 결과마다 다음의 맥락에 포함되어 다음 결과에 영향을 준다.

생일 => 케이크 => 케이크가 있는 카페

여자친구와 함께 => 분위기 있는 카페(후기 및 키워드)

안암동 근처의 카페 => 위치 데이터 

를 역할별로 수행하여 원하는 결과를 얻을 수 있다. 

단순히 검색에서 뿐만이 아니라, 다른 분야에서도 수행단위를 엮어서 임펙트를 낼 수 있다. 

이러한 부분들은 앞으로 생성 ai 어플리케이션에 큰 영향을 준다. 

어플리케이션이 활성화되면 그와 관련된 인프라도 덩달아 성장하는데, 이와 관련된 인프라도 주목해야 한다.

💻 어떤 프로덕트를 만들지 결정하는 조건 4가지

라스토리아 팀에서 고민한 "어떤 프로덕트를 만들지 결정하는 조건 4가지"는 다음과 같다.

앞서 말한 "chat gpt 3.5가 잘하는 것들"과 아래의 "어떤 프로덕트를 만들지 결정하는 조건 4가지"를

조합해서 어떤 프로덕트를 만들지 결정하고, 생성 AI 시장에서 다양한 프로덕트를 실험할 것이다.

1. 지표가 잘 나오는가?

KPI로 지정한 지표가 잘 나오는가 안 나오는가는 단순히 지표의 달성여부를 떠나서 팀의 사기와 관련 있다.

대부분의 스타트업, 초기 창업팀들은 적은 성공 확률에 모든 것을 쏟아낸다.

안 될 확률이 높은 것은 당연한 사실이다.

안 될 확률이 높은데도, 모든 것을 쏟아냈기 때문에

"안 되었다는 사실"은 팀의 사기와도 관련이 된다.

"우린 안 되는 팀인가?"에 대한 고민이 커지면, 결국 집단적 패배의식이 생긴다.

빠르게 지표를 만들어내서 우리가 "되는 팀"인 것을 어떻게 증명해내는가?

위의 질문, 초기 스타트업이 존속하는데 가장 중요한 점이다

작은 것이라도, 지표를 설정하고 달성하여 우리가 되는 팀이다라는 것을 증명해내야 한다.

2. 앞으로의 성장에 도움이 되는가?

지표가 잘 나오는 것을 선정하되, 앞으로 팀의 성장에 도움이 되는 것이어야 한다.

팀이 원하는 성장 방향이 무엇인지를 설정하고 그것을 이룰 수 있는 프로덕트여야한다.

3. 시장이 스케이트보드라도 원하는가?

린 스타트업은 작고 빠르게 만들어서 시장의 반응을 검증하는 방법론을 말한다.

만약 안암에서 약수까지 가는 자동차를 만들려고 한다.

린 스타트업의 방법론에서는 자동차의 작은 부분인 바퀴를 만들어서 검증하는 것이 아니라,

스케이트 보드를 만들어서 실제로 고객들이 반응을 봐야 한다.

이미 많은 경쟁자들이 풀고 있는 문제와 유사한 문제를 풀려면, 바로 성능 좋은 자동차를 만들어서 경쟁해야 한다.

그것이 아니라면 시장의 빈틈을 공략해 스케이트보드를 만들고, 고객을 끌어모으는 동시에 자동차로 발전시켜야 한다.

현재 시장에서 스케이트보드라도 원하는 프로덕트를 만들고, 빠르게 검증하는 것을 반복해보려고 한다.

마무리

라스토리아 팀에 합류하게 되었다.

어떤 성장을 할지 궁금하다.

위에서 말했던 것처럼 "chat gpt 3.5가 잘하는 것들"과 "어떤 프로덕트를 만들지 결정하는 조건 4가지"를 고려해 앞으로 실험할 프로덕트들을 선정하고, 시장의 반응을 검증하려고 한다.

"되는 팀"이라는 것을 빠르게 증명해내고 싶다.