Exploring Herdr App Layouts (And Making Our Own)

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

Herdr의 커뮤니티 레이아웃을 살펴보고 에이전트에게 제작과 수정을 요청하면, 취향에 맞는 화면부터 할 일 목록과 작업 상태 시각화까지 직접 구성할 수 있다.

📌 핵심 요점

1. 갤러리에는 외형을 바꾸는 레이아웃과 기능을 확장하는 모드가 있으며, 촬영 당시 레이아웃 216개와 모드 440개가 소개됐다.
2. 커뮤니티 레이아웃은 운영체제와 의존성을 확인한 뒤 적용해야 한다. 영상에서는 에이전트에게 안내 파일을 읽고 레이아웃을 추가하도록 요청해 Pasture를 설치한다.
3. 레이아웃의 기본 구조는 단일 JSON 파일이며, block·row·column·stack 네 가지 노드로 화면 트리를 구성한다고 설명한다.
4. Berserk풍 화면은 기존 사례를 참고해 구조를 만들고, Hermes Agent와 이미지 생성으로 배경·캐릭터 아이콘·제목 이미지를 추가한 뒤 크기와 배치를 조정했다.
5. 레이아웃은 기능도 담을 수 있다. Missions 할 일 목록을 추가하고, 우주 테마에서는 에이전트를 행성으로 표시해 작업 중 공전 속도가 빨라지도록 구현했지만 화면 맞춤은 추가 수정이 필요했다.

🧩 배경과 문제 정의

영상은 새롭게 소개한 Herdr 앱의 높은 사용자화 가능성을 실제 레이아웃 적용과 제작으로 보여준다. 갤러리에는 외형 중심의 구성과 기능 중심의 구성이 함께 있으며, 발표자는 기존 사례를 살펴본 뒤 자신의 작업 화면을 만들어 본다.

핵심 과제는 원하는 미감을 구현하면서 작업에 필요한 기능도 화면에 담는 것이다. Berserk풍 화면과 우주 테마를 차례로 제작하며, 에이전트에게 구조·이미지·기능 수정을 요청하고 결과를 확인하는 과정을 보여준다.

🕒 시간순 섹션별 상세정리

1. 커뮤니티 레이아웃과 직접 제작할 화면 소개

• 제작 중인 Berserk풍 화면을 먼저 보여주고, 완성 결과와 직접 만드는 방법을 소개하겠다고 보여준다. [00:27]
• 갤러리의 layouts와 mods를 소개하며 촬영 당시 레이아웃 216개, 모드 440개가 있다고 드러낸다. [01:03]
• 커뮤니티 레이아웃에는 미적 변화에 집중한 것과 기능 중심의 것이 있으며, 인기 사례 탐색과 자체 제작을 진행한다. [01:24]

2. 설치 조건 확인과 Pasture 적용

• AgentWikis 홍보 구간에서 무료 위키와 유료 구독 구성을 소개한 뒤 본론으로 돌아온다. [02:03]
• 운영체제와 의존성을 확인하고, 에이전트에게 안내 파일을 읽고 추가하도록 요청해 에이전트를 초원의 양으로 표현하는 Pasture를 적용한다. 공개 저장소의 코드 확인도 권한다. [03:14]
• 작업 중인 에이전트에 해당하는 양이 움직이는 모습을 보여준다. Ctrl+Shift+L로 레이아웃을 전환하며 Windows 98풍 구성과 기본 화면도 확인한다. [04:07]

3. JSON 구조를 바탕으로 Berserk풍 화면 제작

• 에이전트가 갤러리 사례를 참고하도록 요청한다. 레이아웃은 단일 JSON 파일이며 block·row·column·stack 네 가지 노드로 구성된다고 보여준다. [04:37]
• Berserk풍 레이아웃에 부족했던 아이콘과 이미지를 보완하기 위해 Hermes Agent로 옮겨 이미지 생성을 요청한다. Traveler 사례를 참고해 배경과 에이전트 아이콘의 방향을 전달한다. [05:19]
• 생성한 배경과 캐릭터 이미지를 반영한 결과를 보여주며, 도입부의 화면보다 작업이 진행된 상태라고 보여준다. [05:59]

4. 아이콘 크기와 제목 이미지 조정

• 배경과 에이전트별 캐릭터 아이콘을 살펴보고, 작은 아이콘의 크기를 조정할 필요가 있다고 판단한다. [06:21]
• 화면 전체 확대 대신 이미지 크기를 두 배로 늘려 달라고 요청하고, 곧바로 커진 결과를 확인한다. [06:41]
• 기존 상단 아이콘과 텍스트를 만화 표지 참고 이미지와 비슷한 제목 이미지로 교체하도록 요청한다. 적용된 제목의 얼룩진 표현을 확인한다. [07:33]

5. Missions 할 일 목록으로 기능 확장

• 헤더의 Files 옆에 Missions 탭을 추가하고, 항목을 추가·편집·완료 처리할 수 있는 간단한 할 일 목록을 요청한다. 이 과정이 모드 영역과도 겹친다고 언급한다. [08:01]
• 항목을 추가하고 편집·삭제를 확인한 뒤, 편집 화면을 거치지 않고 클릭으로 완료 처리할 수 있도록 추가 요청한다. [08:42]
• 기본 레이아웃으로 전환하면 Missions가 보이지 않고 Berserk풍 레이아웃에만 나타나는 것을 확인하며, 작은 위젯도 유용한 확장이 될 수 있다고 평가한다. [09:13]

6. 우주 테마 제작과 작업 상태 표현

• 에이전트를 행성으로 표시하고 작업 중에는 더 빠르게 공전하는 우주 테마를 요청한다. Pasture와 비슷한 상단 구성을 참고하고 Missions 패널도 포함한다. [09:58]
• Hermes Agent에서 제작을 진행한다. WebGL을 사용할 수 없다는 응답 이후 이미지로 진행하고, 고정된 태양 주위를 에이전트 행성이 도는 결과를 보여준다. [10:49]
• 행성이 잘리는 문제를 해결하도록 표시 영역 조정을 요청한다. 메시지를 보낸 에이전트의 행성이 빨라지는 모습과 영역 크기를 조정하는 동작을 확인한다. [11:55]

7. 남은 화면 문제와 최종 활용 방향

• 공전과 에이전트 선택은 보여주지만 화면에 맞추는 작업은 계속 필요하다. 추가 수정 후에도 일부 행성이 화면 밖으로 나가는 문제가 남는다. [12:59]
• Berserk풍 화면은 만족스럽고 우주 테마는 보완이 필요하다고 평가한다. 레이아웃은 외형뿐 아니라 할 일 목록 같은 기능도 추가할 수 있다고 정리한다. [13:29]
• 앱 안에서 에이전트와 대화하며 화면을 바꿀 수 있다는 점을 강조하고, 시청자가 시도하고 싶은 레이아웃을 댓글로 요청하며 영상을 마친다. [13:56]

🧾 결론

• 기존 레이아웃을 적용하고 수정하는 과정이 자신만의 화면을 만드는 출발점이 된다.
• 자연어로 원하는 모습을 설명한 뒤 결과를 보며 이미지 크기, 제목, 패널 배치를 반복 조정하는 방식이 시연됐다.
• 외형 변경과 기능 추가를 함께 다룰 수 있지만, 우주 테마 사례처럼 첫 결과가 곧 완성된 사용 경험을 뜻하지는 않는다.

📈 투자·시사 포인트

• 에이전트 도구의 활용 범위가 작업 실행에서 작업 화면 자체의 구성으로 확장되는 사례다. 사용자는 화면에 표시할 정보와 기능까지 요청할 수 있다.
• 커뮤니티 갤러리는 다양한 화면 구성과 기능을 탐색하는 출발점을 제공한다. 다만 소개된 등록 수만으로 이용자 규모나 사업 성과를 판단할 수는 없다.
• 도입을 검토할 때는 시각적 완성도와 함께 작업 상태 식별, 패널 가독성, 할 일 관리가 실제 흐름에 도움이 되는지 확인필요가 있다.
• 이미지 생성과 대화형 수정은 원하는 화면에 접근하는 수단으로 제시되지만, 영상에는 제작 비용이나 생산성 개선을 정량 비교한 자료가 없다.

⚠️ 불확실하거나 확인이 필요한 부분

• 제목은 Herdr로 표기되지만 전사에는 Herder 등 다른 표기가 등장한다. 설치 경로나 제품명을 확인할 때 전사만으로 정확한 철자를 확정하기 어렵다.
• 레이아웃 216개와 모드 440개는 촬영 당시 소개된 수치다. 현재 제공 수와 개별 항목의 호환성은 별도 확인이 필요하다.
• Missions의 편집·삭제는 시연되지만, 클릭으로 완료 처리하는 동작은 수정 요청 이후 명확한 검증 과정이 제시되지 않는다. 재시작 후 항목 유지 여부도 확인되지 않는다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 적용할 레이아웃의 운영체제 요구사항과 추가 의존성을 확인한다.
• 연결된 저장소와 설치 안내를 읽고, 추가되는 코드와 변경 범위를 살펴본다.
• 기존 레이아웃을 먼저 적용해 에이전트 선택과 작업 상태 표시가 정상적으로 동작하는지 확인한다.
• 원하는 테마와 참고 이미지를 정한 뒤, 화면 구조와 이미지 자산을 단계적으로 요청한다.

❓ 열린 질문

• 레이아웃 정의만으로 구현할 수 있는 기능과 별도 모드가 필요한 기능의 경계는 어디인가?
• Missions 항목은 레이아웃 전환이나 앱 재시작 이후에도 유지되는가?
• 우주 테마에서 WebGL을 사용할 수 없었던 이유와 화면 잘림을 해결할 적절한 구성은 무엇인가?