하네스 템플릿 전담 세션을 새로 만들고, v3.0을 릴리스했다. 그리고 직접 써보면서 3시간 안에 버그 3개를 잡았다. 다이브베이스에 적용한 리팩토링 10개 Task도 전부 완료해서 종료 판정.

이날 생긴 것들

어제까지 Planner / Developer / Reviewer 3개 세션으로 돌아가던 구조에, 오늘 두 가지가 추가됐다.

• 하네스 전담 세션: 템플릿 자체를 점검하고 개선하는 역할. 코드베이스에서 완전히 분리.
• 다이브베이스 통합 세션: 하네스 시스템을 전반적으로 살피면서 다이브베이스에 적용하는 역할.

역할이 분리되니까 "지금 템플릿을 고치는 건지, 프로젝트를 고치는 건지"가 명확해졌다. 전날까지는 이게 섞여 있었다.

1부: 하네스 템플릿 v3.0

무엇이 추가됐나

Slash Commands — /plan, /develop, /review

기존엔 역할을 전환할 때 프롬프트를 길게 타이핑해야 했다. 이제 한 단어면 된다. /review를 치는 순간 Claude가 Reviewer 모드로 들어간다.

Auto-lint Hook — post-edit-lint.sh

파일을 수정할 때마다 자동으로 프로젝트 타입에 맞는 린터가 실행된다. PostToolUse 훅으로 걸어놓으니, Developer가 커밋 전에 "린터 돌려야 하는데" 를 신경 쓸 필요가 없어졌다.

Verify 템플릿 — templates/verify.md

Planner가 구현 계획을 쓸 때, 검증 계획도 별도 파일로 작성하게 됐다. 리뷰 단계에서 Reviewer가 이 파일을 참조해서 체크한다.

Plan Mode Rules

3개 이상 파일을 수정하거나 COMPLEXITY: HIGH인 작업은 Planner가 plan을 먼저 작성해야 Developer가 시작할 수 있다. 규칙으로 박아놓으니 큰 작업을 plan 없이 바로 구현하는 일이 없어졌다.

/blog 커맨드

handoff, git log, reviews를 읽어서 블로그 포스트 초안을 자동 생성한다. 이 글도 그 결과물이다.

2부: 릴리스 후 3시간, 버그 3개

v3.0을 릴리스하고 바로 다이브베이스에 적용해서 써봤다. 3시간 안에 fix 커밋 3개가 나왔다.

Fix 1 — /review 출력이 영어였다

README는 한국어인데 커맨드 터미널 출력만 영어로 나왔다. 사용자 경험이 일관되지 않은 거라 바로 한국어로 바꿨다.

Fix 2 — Reviewer가 verify.md를 읽지 않고 있었다

v3에서 verify 템플릿을 추가했지만, Reviewer 워크플로우에 해당 파일을 읽는 단계를 빠뜨렸다. 새 기능을 추가하면 기존 워크플로우에서 참조가 연결되어 있는지 반드시 확인해야 한다는 교훈.

Fix 3 — report/handoff가 커밋에 빠지고 있었다

가장 치명적인 버그였다. Reviewer 워크플로우가 APPROVE → commit → report/handoff 순서로 동작하고 있어서, report와 handoff 파일이 커밋에 포함되지 않았다. report + handoff를 먼저 작성하고 commit을 마지막으로 이동했다.

워크플로우에서 순서는 정말 중요하다. 문서로만 보면 절대 발견 못 할 버그다. 직접 돌려봐야 보인다.

3부: 다이브베이스 리팩토링 완주

어제 시작한 다이브베이스 개선 Task를 전부 마무리했다. 오늘 완료된 것만 10개.

프로세스 정비

Task 7 Reviewer 승인(어제 넘겼던 대형 파일 분리 2,186줄 → 790줄)을 통과시키고, 하네스 문서 언어를 영문으로 통일했다. 한영 혼재가 생각보다 혼선을 많이 만든다.

리팩토링 5개

테스트: 22개 → 70개

테스트가 없던 코드베이스에 하루 만에 48개가 추가됐다.

• Task 13: 유틸 함수 26개 + 리포지토리 validation 22개 = 48개 유닛 테스트
• Task 14: mocktail 기반 Supabase 목 인프라 구축 + 통합 테스트 15개 추가

Supabase 목킹이 생각보다 까다로웠다. SupabaseQueryBuilder가 Future를 구현하고 있어서 thenReturn이 안 먹고 thenAnswer를 써야 했다. 빌더 체이닝(select().eq().maybeSingle())도 단계마다 다른 타입을 반환해서 FakePostgrestBuilder와 FakeInsertBuilder를 따로 만들어야 했다. 한번 잡아놓으니 이후 테스트 추가 속도가 빨라졌다.

정리

• ai/ 디렉토리(Python 스크립트 22개) 삭제 — 3-Role 워크플로우로 완전히 대체
• 아카이브 문서 25개 삭제 — handoff/archive/로 정책 일원화

숫자로 보는 하루

회고

"만들고 → 써보고 → 고친다" 사이클이 짧을수록 좋다. v3 릴리스 후 3시간 안에 fix 3개. 문서로만 검토했으면 Fix 2, 3은 절대 못 찾았다.

리팩토링 순서가 생명이다. Task 8(공유 유틸 추출) → Task 13(유틸 테스트) 순서가 맞았다. 테스트를 먼저 썼으면 리팩토링 후 테스트를 다시 고쳐야 했을 것이다. 이미 동작하는 코드의 구조를 바꾸는 거라면, 구조가 안정된 후에 테스트를 쓰는 게 효율적이다.

3-Role 워크플로우 2일차. 17커밋 전부 dart analyze 통과 + 테스트 통과 상태로 들어갔다. Reviewer가 매 Task마다 검증하니까 "나중에 한꺼번에 고치자"가 생길 틈이 없다. 다만 작은 Task에도 Plan → Dev → Review 3단계를 밟다 보니 오버헤드가 있다. Task 15(파일 삭제)같은 건 Plan 없이 바로 해도 됐을 것 같다.

다음에 할 것: 실제 프로젝트에서 쌓인 피드백으로 하네스 v3.1 다듬기, auto-lint hook 실사용 검증, Epic 플래닝 워크플로우 실전 테스트.

Claude Code를 도입한 첫날 기록. 하네스 템플릿을 v2.0까지 끌어올리고, 바로 DiveBase 코드베이스에 적용해서 쌓인 기술 부채를 하루 만에 정리했다.

시작 전: 왜 지금 Claude Code인가

DiveBase는 스쿠버/프리다이빙 로그를 기록하는 Flutter 앱이다. 3월 중순에 MVP를 찍고 TestFlight까지 올렸지만, 빠르게 만들면서 쌓인 기술 부채가 계속 눈에 밟혔다. .env가 앱 번들에 포함되어 있고, Navigator.push와 GoRouter가 혼재하고, 에러 처리 없이 Supabase를 호출하는 곳이 있고, 1,000줄 넘는 위젯 파일이 있었다.

AI를 쓴다면 단순 코드 생성보다 "계획 → 구현 → 검증"을 구조화해서 쓰고 싶었다. 그래서 먼저 하네스 템플릿부터 만들었다.

1부: 하네스 템플릿 v2.0

Claude Code 마스터 가이드(583p)를 기반으로 초기 템플릿을 만들고, 빠르게 개선을 반복했다. 이날 가장 핵심이 된 건 3-Role Workflow다.

Planner → Developer → Reviewer

• Planner: 태스크 계획 + Epic 분해
• Developer: 구현만 담당 (커밋 없음)
• Reviewer: 검토 후 APPROVE 시에만 커밋 + 푸시

Developer는 코드만 작성하고, Reviewer가 APPROVE할 때만 커밋+푸시한다. 사람이 셀프 리뷰하면 놓치기 쉬운 것들 — dead code, 잔존하는 직접 호출 — 을 Reviewer 단계에서 잡아내는 구조다.

문서는 전부 영어로 전환했다. 새 Claude 세션마다 한국어를 해석하는 데 소모되는 토큰이 무시할 수 없어서다. 인간이 읽는 README.md만 한국어로 남겼다.

세션 간 컨텍스트 유실 문제는 두 가지 장치로 해결했다.

• carry-over 필드: Reviewer가 발견한 이슈를 다음 Planner에게 명시적으로 전달
• decision-log: 과거 의사결정을 기록해두어 같은 논의를 반복하지 않도록

2부: DiveBase에 바로 적용

템플릿이 생기자마자 DiveBase 코드베이스에 던져봤다. 세션 시작 시점에 Claude가 분석한 점수는 이랬다.

우선순위를 P0/P1으로 나눠서 Task를 쳐냈다.

P0 — 보안 및 필수 수정

Task 1: .env 앱 번들 포함 제거 flutter_dotenv 의존성을 제거하고 --dart-define 방식으로 전환했다. APK를 풀면 Supabase 키가 그대로 노출되는 상태였다.

Task 2: 불필요 파일 정리 (~38MB) Figma export JSON 22개, 디버깅 로그, 빈 디렉토리 등을 정리. .gitignore에 패턴도 추가했다.

Task 3: HomeScubaRepository 에러 처리 Supabase 호출 4곳에 on PostgrestException catch + debugPrint를 추가. 기존엔 에러가 나면 그냥 크래시했다.

Task 4: Navigator.push → GoRouter 통일 5곳 전부 context.push()로 전환. 두 방식이 혼재하면 딥링크나 뒤로가기에서 문제가 생긴다.

P1 — 구조 개선

Task 5: MyPage → ProfileRepository 분리 MyPage에서 Supabase를 직접 호출하고 있었다. ProfileRepository를 만들어 Home/Logs와 동일한 Repository 패턴으로 통일했다.

Task 6: Auth feature 레이어 추가 AuthRepository + AuthProviders를 추가하고 직접 호출을 제거했다. Reviewer가 dead code와 Supabase 직접 호출 잔존을 추가로 잡아냈다.

Task 7: 대형 파일 분리 총 2,186줄 → 790줄. 3개 파일을 8개로 추출. Reviewer 승인은 다음 세션으로 넘겼다.

회고

3-Role Workflow가 핵심이었다. Task 6 리뷰에서 Reviewer가 dead code와 Supabase 직접 호출 잔존을 잡아낸 게 인상적이었다. 사람이 셀프 리뷰하면 놓치기 쉬운 부분이다.

보안은 MVP에서도 미루면 안 된다. .env가 번들에 포함된 건 "나중에 고치지"로 넘겼던 전형적인 케이스다. TestFlight에 올린 순간 이미 외부에 노출된 거나 마찬가지였다. 다행히 anon key라 피해는 없었지만, 습관이 되면 위험하다.

패턴이 잡혀 있으면 확산이 빠르다. Task 5, 6은 새 파일 생성 + 기존 코드 수정이라 조금 더 걸렸지만, 이미 Home/Logs에 Repository 패턴이 있어서 그걸 따라가면 됐다. 구조를 먼저 잡아두는 게 나중에 속도를 만든다.

다음에 할 것: Task 7 Reviewer 승인 마무리, 하네스 템플릿 실전 피드백 수집, Epic 플래닝 워크플로우 실전 테스트.

• 가장 크게 깨달은 점 1~2가지
  • 이번 프로젝트를 통해 가장 크게 깨달은 점은, 팀 프로젝트에서는 모든 사람이 같은 온도와 속도로 움직이지 않는다는 사실이었습니다. 열심히 하는 태도가 항상 모두에게 긍정적으로 작용하지는 않을 수 있고, 누군가에게는 그 기준이 부담이 될 수도 있다는 점을 처음으로 진지하게 체감했습니다. 그럼에도 불구하고, 팀 전체의 결과물과 완성도를 위해 일정 수준의 기준을 유지하는 것이 왜 필요한지, 그리고 그 기준을 어떻게 전달해야 하는지를 고민하게 되었습니다.
• 발표 준비 과정·협업 과정에서 느낀 변화
  • 이전에는 주어진 역할을 잘 수행하는 데 집중했다면, 이번에는 역할을 나누고 조율하며 의사결정을 내려야 하는 입장이 되었습니다. 협업 과정에서 기술적인 판단뿐 아니라 사람 사이의 균형을 고려해야 한다는 점을 실감했고, 그 과정 자체가 프로젝트의 중요한 일부라는 인식이 생겼습니다.
• 이번 과정을 통해 이전의 나와 달라진 점
  • 단순히 구현을 잘하는 사람에서 벗어나, 결과에 대한 책임과 선택을 함께 감당하는 시각을 갖게 되었습니다. 실무자 관점뿐 아니라 관리자·결정권자의 관점으로 한 단계 사고가 확장되었다고 느낍니다.

2. 내가 맡은 역할과 성과

• 이번 프로젝트에서 맡은 역할
  • 팀장 역할을 맡으며 프로젝트 전반의 기획, PM, 의사결정자 역할을 함께 수행했습니다. 서비스 컨셉 정의부터 기능 우선순위 설정, 전체 구조 설계, 발표 흐름 구성까지 전반을 총괄했습니다.
• 구현한 기능 또는 기여한 부분
  • LLM 기반 코드 품질 분석이라는 주제를 바탕으로, 코드 평가 및 개선 코드 제공이 가능한 VSCode Extension과 Web 서비스를 기획·구성했습니다. 프론트엔드와 백엔드 간의 API 구조와 데이터 흐름을 정리하고, 각 파트가 어떤 기준으로 협업해야 하는지 명확히 정의했습니다.
• 내가 해결한 문제 또는 책임졌던 과제
  • 프로젝트 전반의 구성도 설계, 기능 범위 조율, QA/QC 기준 정리와 결과 검수를 직접 책임졌습니다. 제한된 서버 환경 안에서도 실제로 사용할 수 있는 수준의 서비스를 완성하는 것을 목표로 삼았고, 그 결과 최종적으로 우수팀이라는 성과를 얻을 수 있었습니다.

3. 아쉬운 점 및 개선하고 싶은 부분

• 기술적으로 부족했던 부분
  • 기술적인 완성도 자체에 대해서는 큰 아쉬움은 없습니다. 주어진 환경과 제약 안에서 현실적으로 구현 가능한 최선의 결과를 만들었다고 생각합니다.
• 시간 관리 / 협업 측면에서 아쉬웠던 부분
  • 협업 과정에서 더 잘할 수 있는 여지는 있었겠지만, 갈등 상황을 중재하고 팀의 흐름을 유지하는 역할을 충분히 수행했다고 느끼며 큰 후회는 남지 않았습니다.
• 발표에서 충분히 전달하지 못한 내용
  • 발표 리허설과 시간 관리 측면에서는 아쉬움이 남습니다. 중간 발표 단계에서 발표 연습을 충분히 준비하지 못한 탓에, 최종 발표에서 예상보다 발표 속도가 느려졌고 일부 설명과 시연에 충분한 시간을 쓰지 못했습니다. 이 경험을 통해 발표 역시 초반부터 전략적으로 준비해야 한다는 점을 분명히 인식하게 되었습니다.

4. 정규 교육 과정 중 나에게 도움이 되었던 파트

• 프로젝트에 가장 도움 되었던 수업
  • 정규 커리큘럼 자체는 프론트엔드, 백엔드, AI 수업 모두 깊이나 최신성 측면에서 이번 프로젝트에 직접적인 도움을 주었다고 보기는 어려웠습니다. 전반적으로 개념 소개 수준에 머물렀다고 느꼈습니다.
• 배운 내용을 실제 프로젝트에 적용한 사례
  • 수업 내용보다는 AI 파트 강사님의 지속적인 멘토링이 큰 도움이 되었습니다. 프로젝트 진행 중 막히는 순간마다 AI뿐 아니라 프론트엔드, 백엔드, 아키텍처 설계, WBS, 평가 기준 설정, LLM 개선 효과를 검증하는 방법 등 실무적인 관점의 조언을 받을 수 있었고, 이는 프로젝트의 방향성과 완성도를 결정하는 데 중요한 역할을 했습니다.

5. 향후 목표 및 포트폴리오 개선 방향

• 강화하고 싶은 기술 1~2가지
  • LLM 기반 서비스 기획 및 평가 구조 설계 역량, 그리고 프로젝트 관리와 의사결정 역량을 함께 강화하고 싶습니다.
• 포트폴리오 챌린지 기간 동안 보완할 항목
  • 이번 프로젝트에서 수행한 PM 역할과 기여를 명확히 정리해 포트폴리오로 구조화할 계획입니다. 기술 구현뿐 아니라, 기획·조율·의사결정 과정이 드러나도록 정리하는 것이 목표입니다.
• 취업 준비에 있어 스스로 세운 다음 단계
  • 개발자 포지션을 기본으로 하되, PM 포지션에도 가능성을 열어두고 준비하려 합니다. 좋은 기회가 있다면 직무에 국한되지 않고 도전해보고 싶으며, 이를 위해 개발자 포트폴리오와 PM 포트폴리오 구성 방식에 대해 고민하고 있습니다.

6. 팀원들에게 감사하거나 공유하고 싶은 점

• 팀 프로젝트에서 고마웠던 점
  • LLM 파트를 중심적으로 맡아준 팀원과, 프론트엔드 및 VSCode Extension 구현을 책임져준 팀원에게 특히 감사의 마음을 전하고 싶습니다. 두 분의 집중도와 책임감 덕분에 프로젝트가 아이디어 단계에서 실제 서비스 형태로 완성될 수 있었습니다.
• 협업하며 배운 태도·소통 방식
  • 이번 협업을 통해 기술 역량 못지않게 사람 사이의 조율과 소통이 프로젝트 성공에 중요한 요소라는 점을 다시 한 번 체감했습니다. 서로 다른 속도와 관점을 조정해 하나의 결과물을 만들어가는 경험 자체가 큰 배움이었습니다.

본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 2기 (B-log) 리뷰로 작성 되었습니다.

#한컴AI아카데미2기 #AI개발자 #AI개발자교육 #한글과컴퓨터 #한국생산성본부 #스나이퍼팩토리 #부트캠프 #AI전문가양성 #개발자교육 #개발자취업

React-Native 마무리 실습

Thread 클론

React-Native, Zustand를 중점으로 회원가입 후 포스트를 작성 할 수 있는 Thread를 만들어보기. CRUD 활용, React-Native 익숙해지기, Zustand를 활용한 형상 관리 연습을 목표로 했다.

결과물

Backend 교육 시작

• 서버, Cloud computing, DB, SQL, 관계형 모델, 집합, JOIN 연산 등에 대한 개념 정리
• SQL Query문 교육 시작 혼자 공부해둔 부분이라 딱히 기억 남는 부분이 없어 이번주 회고는 짧게 마무리

본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 2기 (B-log) 리뷰로 작성 되었습니다.

#한컴AI아카데미2기 #AI개발자 #AI개발자교육 #한글과컴퓨터 #한국생산성본부 #스나이퍼팩토리 #부트캠프 #AI전문가양성 #개발자교육 #개발자취업

React의 학습이 어느정도 진행되었고, 우리 조를 포함한 일부는 Next.js를 활용하여 팀 프로젝트를 진행하였다. 웹 프론트엔드에 대한 이해도가 생겼다는 가정하에 앱 프론트엔드 실습 교육을 시작했다.

React-Native

React, Next.js와 문법적 유사성이 높은 React-Native를 활용하여 프로젝트를 진행하기로 한다.

API 활용

팀 프로젝트 진행 시 일부는 외부 API를 잘 사용하였고, 일부는 난항을 겪었기에 외부 API를 다루는 프로젝트로 선정하여 실습 겸 교육을 진행한다.

Gotta catch 'em all

개발에 관심이 있는 20~30대 남자 위주의 수강생들의 선호에 맞춰 포켓몬스터 API를 활용한 간단한 게임을 만들어보기로 한다.

기획

• 대상 포켓몬 : 1세대 151마리
• 사냥터 : 10마리의 포켓몬이 랜덤으로 등장
  • 포켓몬 선택 : 해당 포켓몬의 정보를 간단히 보여주고, 실제 포획률에 맞춰 잡을 수 있도록 한다.
• 도감 : 모든 종류의 포켓몬이 도감번호 순으로 보이고, 잡은 포켓몬의 경우 버튼이 활성화된다.
• 랭킹 : 사용자들 중 여러 포켓몬을 잡은 순으로 순위를 보여준다.
• 대시보드 : 미기획
• 회원가입 & 로그인 : 회원가입 & 로그인

  주요 사용 기술

• App FE : React-Native, Expo
• sub FE : Lucide-react-native, Nativewind
• 상태관리 : Zustand
• DB : Supabase
• API : Pokeapi

결과물

회고

1. React-Native 개발은 React와 흡사하여 태그 대신 쓸 컴포넌트만 잘 외워두면 예상보다 간단하게 앱을 개발할 수 있었다.
2. 대부분의 핸드폰 화면 비율이 비슷하여 웹 FE에 비해 화면비에 신경을 덜 쓸 수 있었지만 대신 아이폰의 노치 & 다이내믹 아일랜드, 갤럭시의 카메라 홀 등의 새로운 신경 쓸 부분이 있다.
3. pc화면으로 보이는 가상 핸드폰에서 보여주는 이미지와 Expo를 통해 실제로 구동한 앱의 이미지는 생각보다 차이가 있어서 주기적으로 확인이 필요하다.
4. 코딩 중 포켓몬이라는 귀여운 이미지가 지속적으로 눈에 들어오는 것이 생각 이상으로 개발 과정에서 힘을 내게 해줬다.

본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 2기 (B-log) 리뷰로 작성 되었습니다.

#한컴AI아카데미2기 #AI개발자 #AI개발자교육 #한글과컴퓨터 #한국생산성본부 #스나이퍼팩토리 #부트캠프 #AI전문가양성 #개발자교육 #개발자취업

프로젝트 출범 계기

팀플에서 만든 후라이잉의 기획자로서 내 기획물이 완성되지 않은 것에 아쉬움이 느껴져 개인 토이 프로젝트로 전환하기로 하였다.

시간이 부족하여 구현하지 못한 기능들, 만지지 못한 ui, 흐린 눈으로 넘어간 버그를 잡아서 만족할 수 있는 프로젝트로 만들어보자.

홈페이지 흐름 정리

상세 기획이 정해지지 않고 우선 시작된 프로젝트다보니 사용자 흐름도부터 재정하였다.

기획 변경

구글폼 벤치마크에서 시작된 한컴AI아카데미2기 수강생들의 자기소개 작성 서비스였다보니 쓸데 없는 radio button, checkbox 등의 기능을 제거하였다. 그리고 앞으로도 서로의 포트폴리오를 확인 할 수 있는 나름의 커뮤니티로 주요 기능을 변경하였다.

배포 및 도메인 추가

수강생 전원이 언제든 접근할 수 있도록 배포하고, 무료로 사용할 수 있는 도메인 서비스를 통해 도메인도 연결했다.

추가 업무

• 수기로 작성한 사용자 흐름도를 플로우차트 작법에 맞춰 figma 위에 구현하기
• 프로젝트 완성하기
• public github repo 작성 및 협업용 Readme 정립

현 시점의 결과물

https://후라이잉.온라인.한국/

—————————————————————————— 본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 2기 (B-log) 리뷰로 작성 되었습니다.

#한컴AI아카데미2기 #AI개발자 #AI개발자교육 #한글과컴퓨터 #한국생산성본부 #스나이퍼팩토리 #부트캠프 #AI전문가양성 #개발자교육 #개발자취업

주제 선정

주제 후보 및 선정

1. 웹게임 기획이나 기능 구현보다 기획에 치중된 프로젝트가 될 우려가 있어 제외
2. 재고 관리 시스템 따분할 것 같음
3. 설문 작성 서비스 지금까지 배운 React 기반 FE 기술과 Supabase를 활용한 약식 백엔드 기능을 가장 잘 살릴 수 있을 것으로 기대됨
4. 특정 지역 기반 맛집 추천 서비스 어떤 서비스를 만들어야 할 지 직관적으로 떠오르지 않음

   서비스 목표 선정

5. 목표 : 모듈화된 컴포넌트들을 따로 만들어 사용자가 원하는 데이터를 골라 입력할 수 있는 텍스트 에디터
6. 대상 : 한컴AI 2기 수강생
7. 세부 목표 : 대상 이용자들이 자신에 대해 소개, 포트폴리오, SNS, 블로그 등을 게시할 수 있는 서비스
8. 기대 : 앞으로 대략 5개월을 같이 보낼 수강생들이 서로에 대해 알 수 있고, 이후로도 소식을 공유할 수 있는 플랫폼

   초기 기획

   데이터 및 유저 액션 흐름

   피그마 링크 로그인 기능이 있고, 구글폼과 비슷한 느낌으로 질답 폼을 작성 할 수 있는 서비스

   업무 분장 및 스케줄 관리

   

notion을 통한 업무 담당자 지정 및 스케줄 시각화

—————————————————————————— 본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 2기 (B-log) 리뷰로 작성 되었습니다.

#한컴AI아카데미2기 #AI개발자 #AI개발자교육 #한글과컴퓨터 #한국생산성본부 #스나이퍼팩토리 #부트캠프 #AI전문가양성 #개발자교육 #개발자취업

레퍼런스

나의 클론

과제 학습을 통해 얻은 것

1. 카카오페이지 클론 프로젝트 코드 리뷰에서 지적 받은 컴포넌트를 좀 더 효율적으로 사용하였다
2. 프론트엔드 레이아웃을 보는 눈이 생겼고, TailwindCSS에 조금 익숙해지면서 원하는 코드 찾는 속도가 빨라졌다.

새로 진행한 작업

한 주 내내 react, tailwind, zustand, supabase, 소셜 로그인을 기존 작업물에 덧붙였다.

고민했던 것

제목, 카테고리, 썸네일, 사진 및 파일을 넣을 수 있는 게시글을 supabase에 업로드 하는 프론트 페이지 작성 중 제목, 게시물 등의 자료를 useState와 onChange를 사용하면 타이핑을 한 자 한 자 칠 때마다 메모리를 사용하는 것이 마음에 들지 않았다. 대신 발행하기 버튼의 onClick 이벤트를 통해 단 한 번 value를 받고자 useRef를 사용하여 value들을 받아 supabase에 업로드 하였다. 허나 강사님 피드백 결과 useRef는 주로 html element를 참조하는 용도로 자주 사용되기에 코드가 비 직관적이고, 해당 경우엔 useMemo를 사용했으면 의도에도 맞고 명시적으로 이해하기 쉬운 코드가 되었을 것이라고 조언해주셨다. 허나 onChange 이벤트를 수시로 일어나지 않는 의도로 작성한 좋은 코드라는 피드백까지 받았다.

그 외 새로 배운 것

• Local Storage, Session Storage, Cookies, Zustand를 사용한 로그인 데이터 유지 관리
• 소셜 로그인

—————————————————————————— 본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 2기 (B-log) 리뷰로 작성 되었습니다.

#한컴AI아카데미2기 #AI개발자 #AI개발자교육 #한글과컴퓨터 #한국생산성본부 #스나이퍼팩토리 #부트캠프 #AI전문가양성 #개발자교육 #개발자취업

transparent

background-color: "transparent"

해당 영역의 배경색을 없애서(투명색으로 지정해서) 뒷 레이어의 색을 보이게 한다.

지난주 과제 : react, typescript, css를 활용한 카카오페이지 클론

kakaopage 클론 https://page.kakao.com/

레퍼런스

나의 클론

새로 알게 된 부분

1. margin: 0 auto margin: 0px 0px과 같은 표현식 auto는 자식 요소를 가운데에 배치하고 남은 영역을 margin으로 채워 준다는 것을 뜻한다.

2. object-fit : cover 사용 의도 : 제한된 영역에 맞춰 그 보다 큰 이미지를 잘라 넣되 이미지 크기는 유지 cover : 크기가 줄어들음. 대체제 확인 요망 contain : 크기가 원본으로 나와버려서 의도에서 많이 벗어남

3. html, css를 쓰다 보니 kakaopage 클론시에 컴포넌트를 안쓰고 javascript로 개발할려고 들었다. 컴포넌트로 바꿔서 클로닝 마무리 하자.

ts 문법 교육

궁금증 1

function a1(b: string, c: undefined = undefined) {
  console.log(b, c);
}

function a2(b: string, c?: string) {
  console.log(b, c);
}

a1("a");
a2("a");

c: undefined = undefined가 c?: string이랑 어떻게 다른지 실험해보기

결과

a undefined
a undefined

a1의 반환 결과는 c의 키가 존재하는 와중 할당된 undefined의 반환이고, a2의 반환 결과는 c가 없는 상태에서 강제로 console을 찍어서 없는 것을 출력하다보니 undefined가 나왔다.

—————————————————————————— 본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 2기 (B-log) 리뷰로 작성 되었습니다.

#한컴AI아카데미2기 #AI개발자 #AI개발자교육 #한글과컴퓨터 #한국생산성본부 #스나이퍼팩토리 #부트캠프 #AI전문가양성 #개발자교육 #개발자취업

개발의 첫 시작으로 HTML과 CSS 교육 진행 및 과제가 제출되었다. HTML 태그를 직접 쓰고 css 파일을 만들어 적용해 본 것이 워낙 오랜만이라 생소했다. 모르는 내용은 없었으나 css를 다루는 좋은 연습이 되었다.

한 주를 마무리하며 과제가 나왔다. 내용은 아래와 같은 페이지를 HTML, CSS를 사용해 구현하기.

구현하며 막혔던 순간이 세 번 있어 기록한다.

마냥 만만하진 않았던 HTML, CSS

1. background-color는 상속되지 않는다.

채팅 영역의 배경을 white로 적용하기 위해 가장 상위 div 태그에 white를 적용시켰으나 하얘진 영역은 일부였다. 확인 결과 특정 css는 상속이 되지 않는다고 하였고, 여러 해결법이 있었다. 태그에 일일이 white를 넣는 것은 세련된 것 같지 않아 아래의 코드로 해결하였다.

*{
    background-color: white
}

2. 적용되지 않는 border-radius 마찬가지로 카드형식의 영역 귀퉁이를 부드럽게 다듬기 위해 border-radius를 주었으나 적용되지 않았다. 실험을 해보니 겹친 영역들 모두 border-radius를 주면 해결된다는 것은 확인했다. 다만 더 좋은 해결 방법이 있을 것으로 생각했고, overflow: hidden;을 부모에게 주면, 부모 영역을 삐져나간 부분을 가려준다는 것을 확인하여 적용해 마무리했다.

3. html css 적용이 비일관적으로 되는 현상이 갑자기 나타나기 시작하였고, 커서로도 문제의 원인을 확인하지 못하고 있었다. 그렇게 원인을 찾던 중 css 적용의 비일관성 속에서 패턴이 보였고, 이를 실마리 삼아 찾아낸 문제는 아래와 같았다.

   <div class="upper">
   <img src="img.jpg" alt="img" />
      <div>
      <p>심층 분석 대화</p>
      <p>호스트 2명</p>
      </div>
   </div>
   </div>
   

``` 위 코드에서 문제를 발견하는 데 꽤 오래 걸렸다. lint가 이 정도는 자동으로 걸러줄 것이라 믿었으나 가짜 </div>를 걸러주지 못했다. 하필 이미지 태그와 같은 인덴트를 갖고 절묘하게 숨어있었다. 오늘 이후로 html 파일을 만들 일이 언제 또 있을지는 모르겠지만 같은 실수는 피할 수 있을 것이다.

결과

위의 내용들을 반영하여 완성한 페이지는 아래와 같이 완성됐다. 이미지를 찾아 넣는 것은 생략하여 아무 이미지, 이모지로 대체하였다.

—————————————————————————— 본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 2기 (B-log) 리뷰로 작성 되었습니다.

#한컴AI아카데미2기 #AI개발자 #AI개발자교육 #한글과컴퓨터 #한국생산성본부 #스나이퍼팩토리 #부트캠프 #AI전문가양성 #개발자교육 #개발자취업

• OS는 우분투로 하자

  • 리눅스로 이번에 처참히 패배했다

• git 설치 및 pull

• .env 까먹지 말기

• nvm을 통해서 node를 깔자

  • discordx는 node 16에서 제일 잘 돌아가는것 같다 https://docs.aws.amazon.com/ko_kr/sdk-for-javascript/v2/developer-guide/setting-up-node-on-ec2-instance.html
  • npm i

• postgresql 세팅

  • postgresql 설치

    apt show postgresql
    sudo apt install postgresql

  • postgresql db 생성 최신 정보가 migrate된 git push 되어있는지 확인 후 진행

    // postgresql 접속
    sudo su postgres 
    

  // postgresql 계정 생성 및 빠져나오기 CREATE USER {username}; ALTER USER {username} WITH SUPERUSER; ALTER USER {username} WITH PASSWORD {password}; exit

  // prisma폴더 안의 내용을 기반으로 db 생성 npx prisma migrate deploy

커뮤니티 액티비티란?

• 액티비티의 정의
  • 커뮤니티를 통한 소셜 활동, 프로젝트 이벤트 참여, 거버넌스, 2차 창작, 바이럴 이벤트 등 커뮤니티로부터 행해지는 활동의 총체
  • 커뮤니티로부터의 경험, 프로젝트 가치의 성장 및 확장과 직결됨
  • 커뮤니티 멤버들이 지속적으로 활동할 수 있는 액티비티를 커뮤니티의 성숙도와 프로젝트의 목표에 따라 제공하는 것이 중요
• 액티비티의 목적
  • 커뮤니티 활성화
  • 커뮤니티 멤버들이 자주권을 갖고 보다 적극적으로 커뮤니티 활동에 참여하도록 장려하는 유도 장치
  • 프로젝트의 내러티브 및 성장 전략과 커뮤니티 액티비티가 일치되게끔 하는 것이 중요
• 액티비티의 효과
  • 마케팅 비용 절감
  • 브랜드 창출 및 강화
  • 사업화 영역 확장

액티비티 유형

• 바이럴 이벤트
  • 특성 및 효과
    • 트위터 등의 SNS를 통해 커뮤니티 멤버들이 직접 프로젝트의 정보를 확산하도록 유도하는 홍보 목적의 이벤트
    • 초기 멤버, 추가 멤버의 획득에 유리함
    • 자생적 바이럴을 유도하는 특성상 상대적으로 적은 마케팅 비용 기대 가능
  • 예시
    • 버그시티 Tweet to Earn https://bugcity.io/
  • 바이럴 특화 보상
    • 롤, WL, AD, 토큰, 기프티콘 등의 자산성 보상이 보편적
  • 주의사항
    • 명확한 참여 행동 양식을 제공하여 불필요한 노이즈를 사전에 최대한 방지
    • 자산성 혜택에 의한 바이럴 효과의 단기성을 이해하고 진행해야함
• IRL 이벤트
  • 특성 및 효과
    • 커뮤니티 멤버가 참여 가능한 오프라인 이벤트
    • 커뮤니티 멤버간의 대면 상호작용을 통한 라포 형성에 유리함
    • 프로젝트에 맞는 오프라인 공간이 있다면 프로젝트의 정체성 부각에 효과적
  • Doodles - SWSX https://doodles.app/ https://www.youtube.com/watch?v=NkOqzSEaf70
  • IRL 특화 보상
    • 오프라인 특화 이벤트 경험
  • 주의사항
    • 과도해질 수 있는 리소스 소요 방지
    • 바이럴 등의 추가 행동 유도를 통해 소모적인 이벤트 방지
• 거버넌스 운영
  • 특성 및 효과
    • 커뮤니티 멤버가 제안, 의사 결정, 실행에 참여하는 시스템
    • 트레저리 운영을 통한 파생 프로젝트 창출로 사업화 영역 확장
    • 커뮤니티 멤버 자신의 의사가 운영에 반영됨에서 오는 자주성 고양
  • 예시
    • Nouns DAO https://nouns.wtf/
  • 거버넌스 특화 보상
    • CC0에서 오는 라이센스
    • 파생 프로젝트에 대한 개발, 자금, 인프라 지원
  • 주의사항
    • 거버넌스, 트레저리, 관련 정책 등의 고도화된 프로세스 세팅
    • 프로세스 구축과 참여 유도에 소요되는 리소스 소요 조절

      커뮤니티 액티비티의 의의

• 커뮤니티 활성화를 통한 프로젝트의 확장의 주요 수단
• 커뮤니티의 특성에 맞는 액티비티의 기획과 실행이 중요
• 자생적인 액티비티 활동은 건강하고 장기적인 프로젝트에 큰 도움이 됨

참고자료

• Bug City
  • https://www.bugcity.io/
• Doodles - SWSX
  • https://doodles.app/
  • https://www.youtube.com/watch?v=NkOqzSEaf70
• Nouns DAO
  • https://nouns.wtf/

Web3.0 커뮤니티 멤버 획득 방법

• 커뮤니티 타겟 트랙킹
  • 커뮤니티의 목적성과 Web3.0 친숙성에 따른 잠정 멤버의 활동 범위 분석
  • 잠정 멤버의 주요 활동 채널은 향후 멤버를 모집하는 홍보 채널로 활용 가능
• 니즈 분석
  • 잠정 멤버가 활동 과정에서 느끼는 욕구와 결핍 파악
  • 핵심 액티비티를 통한 니즈 충족 방안 도출
• 커뮤니티 적용 방안 도출
  • 핵심 액티비티 기획을 통해 니즈를 충족시키는 커뮤니티 기획
  • 기획된 액티비티를 기반으로 커뮤니티 멤버 모집 방안 설정

    커뮤니티 타겟 별 획득 방법

• 투자
  • Web3.0에 친숙하지 않은 유형
    • 부동산, 주식을 비롯한 제태그를 통한 자산 증식에 관심을 가지고 있음
    • 유튜브, 블로그와 같은 Web2.0 투자자 중심 커뮤니티에 직접적이고 명확한 수익 실현 기회를 제공하여 커뮤니티 유입 유도
    • 헤이버디의 예시 : 비트코인 가격을 예측하는 컨텐츠를 네이버 블로그, 유튜브를 활용해 홍보하며 초기 커뮤니티를 모음
  • Web3.0에 친숙한 유형
    • 코인, NFT, 디파이 안에서도 자신만의 전문 분야를 가지고 자신보다 더 큰 인플루언서(고래)의 움직임에 매우 민감하게 반응
    • 알파방, 인플루언서 홍보가 프로젝트 참여에 큰 영향을 미침
    • 블러의 예시 : NFT 프로트레이더를 위한 마켓 플레이스 구축하면서 거래를 많이 한 사람에게 토큰 에어드랍을 약속하면서 초기 크립토 인플루언서를 다수 온보딩 시킴
• 라이프스타일
  • Web3.0에 친숙하지 않은 유형
    • Web2.0의 취향, 관심사 기반 커뮤니티와 마찬가지로 라이프스타일 지속적 향유를 약속함
    • Web3.0 환경에서 관심사를 향유할 때의 비교 우의(ex. 자산성, 편의성) 공략
    • 스웻이코노미의 예시 : Web2.0 걷기앱의 Web3.0 전환 사례
  • Web3.0에 친숙한 유형
    • Web3.0 안에서 기존 라이프스타일의 완성도와 활용성 중시
    • 기술적 환경 제공을 통해 Web2.0에서 향유하던 문화를 Web3.0에서도 즐길 수 있는 토대 제공
    • 아트블록스의 예시 : 온체인 제너러티브 아트 플랫폼 제공을 통해 아트 투자자, 수집가들이 온체인 자산을 활용할 수 있는 토대 제공
• 빌딩
  • Web3.0에 친숙하지 않은 유형
    • Web2.0의 전문가 중 Web3.0에서 활동하고 싶은 사람을 활용한 프로젝트를 확장 및 개발
    • 공동 프로젝트를 제안하고 기금, IP, 커뮤니티 인력 활용 방향성 제시를 통해 참여 유도
    • 리드미컬 NFT의 예시 : 영상 제작, 모션 그래픽 아티스트 네이버 카페를 NFT 작가 커뮤니티로 전환시켜 공동 작업, 전시 진행 중
  • Web3.0에 친숙한 유형
    • 타겟이 이미 다양한 커뮤니티에서 활동 중일 가능성이 높음
    • 타겟이 활동 중인 커뮤니티의 문제점 해결 혹은 더 나은 방향 제시
    • 트레저다오의 예시 : Loot 커뮤니티에서 파생됨
• 소셜 임팩트
  • Web3.0에 친숙하지 않은 유형
    • Web3.0 기술 활용을 통해 기존에 조명받기 힘들었던 가치 실현 제안
    • 기존 임팩트 투자, 정부 기관과 같은 공공재적 가치 실현 조직을 통한 커뮤니티 모집 가능
    • 리파이서울의 예시 : 리파이를 다루는 스터디 운영
  • Web3.0에 친숙한 유형
    • 온체인 데이터와 토크노믹스를 활용해 지속 가능한 공공재 시스템 유지를 제안
    • 해커톤, 회담, DAO 빌딩 뿐 아니라 공공재적 이미지를 브랜딩에 적극 활용
    • 옵티미즘 에어드랍의 예시 : 토큰 출시 당시 깃코인에 기부를 한 사람에게 에어드랍을 제공하면서 공공재적 인프라 브랜드 이미지 각인

      커뮤니티 매니저의 역할

• 프로젝트 방향성 정립
  • 커뮤니티의 방향성, 목표, 효과 정립
  • 원하는 인재상 설정
• 타겟 분석
  • 유형에 맞는 타겟 찾기
  • 유형에 맞는 타겟의 대화 내용, 관심 분야, 하는 일, 니즈 등 찾기
• 가설 수립 및 실험
  • 수집한 정보를 토대로 니즈를 충족시킬 수 있는 가치 제공 방안 설정
  • 타겟 유형에 따른 반응 판단, 실행 계획 및 정보 수집 계획
• 분석 및 재실행
  • 계획 실행과 결과 분석
  • 목표치 달성 여부, 성공 및 실패 요인 분석

    멤버 모집에 있어 유의할 점

• 프로젝트의 성장과 발전에 있어 현재 필요한 인원이 어떤 사람인지 판단한다. 홀더, 컨트리뷰터, 코어 중 어떤 사람들을 먼저 섭외할 것인지에 따라 바라봐야할 관점이 달라지기 때문이다.
• 초기 멤버를 파악하는데 있어서 가장 효과적인 방법은 참여와 활동을 통한 데이터 수집이다. 아직까지 Web2.0 수준의 구매 이력, 사용자 판단을 정량적으로 수치화할 데이터 근거가 부족하기 때문에 정성적인 리서치가 선행되어야 한다.
• 활동 데이터를 기반으로 지갑 주소, 토큰 거래 이력의 정성적 온체인 데이터를 활용할 수 있다면 향후 정량적 타겟팅과 모집 효과 측정도 가능해 질 것이다.

참고자료

• 헤이버디
  • 카페 링크: https://cafe.naver.com/heybuddys
  • 네이버 블로그 마케팅: https://blog.naver.com/happypcb/222902424261
• 블러
  • 웹사이트: https://blur.io/
  • 리서치 자료: Blur.io
• 스웻이코노미
  • 웹사이트: https://sweateconomy.com/
  • 분석글: https://medium.com/@kookyvampire/sweatcoin-deep-dive-55e3e398bb0c
• 아트블록스
  • 웹사이트: https://www.artblocks.io/
  • 온체인 제너레티브 설명: https://medium.com/the-link-art-blocks/how-on-chain-is-art-blocks-5ccd553dd370
• 리드미컬 NFT
  • 트위터: https://twitter.com/rhythmicalimage
  • 작품: https://t.co/BSwfcSjXFD
• 트래저다오
  • 웹사이트: https://treasure.lol/
  • 분석글: https://mirror.xyz/0x20c742eeA314DFf601EA72F6BCc93bEccF4cf41c/CDNiw3aYHfEGmUxWbOQM_vAY_R6AJ25t_xmbRt_Xmg8
• 리파이서울
  • 채널: https://twitter.com/ReFiSeoul
• 옵티미즘
  • 웹사이트: https://www.optimism.io/
  • 에어드랍 1: https://community.optimism.io/docs/governance/airdrop-1/#airdrop-1-allocations

커뮤니티 채널 세팅의 중요성

• 커뮤니티 채널 세팅
  • 커뮤니티의 공지, 소통, 의사결정 등등 커뮤니티 인원들이 하는 모든 액티비티를 편하게 할 수 있도록 플랫폼, SNS 등의 채널을 효율적으로 구성하는것
• 효율적인 커뮤니티 채널 세팅의 중요성
  • 효율적으로 세팅된 커뮤니티 채널은 커뮤니티 액티비티의 질을 높이고, 이탈자를 최소화하며, 좋은 의사결정을 하도록 유도할 수 있고, 커뮤니티 매니저들이 의미있는 데이터를 효율적으로 추출할 수 있도록 도움을 준다

    커뮤니티 채널의 종류와 특징

    
• 디스코드
  • 커뮤니티 인원과의 소통 창구 겸 공지처로 많이 쓰이고, 역할 구분과 봇을 이용한 여러 액티비티를 진행 할 수 있음.
  • 장점 : 채널 구분, 역할 부여, 다양한 활용도의 봇 기능
  • 단점 : 타 서비스와의 연계성 부족, 다소 높은 진입장멱
  • 대표 예시 : 버그시티 https://discord.gg/AtQDqDYhBc
• 트위터
  • 커뮤니티 인원과의 가벼운 소통 창구 겸 공지처로 많이 쓰이고, 불특정 다수를 향한 전파력이 높다
  • 장점 : 국적불문의 많은 Web3.0 이용자 포진, 쉽고 강한 바이럴 전파력
  • 단점 : 강한 휘발성, 글자수 제한으로 인한 가벼움
  • 대표 예시 : DADAZ https://twitter.com/DADAZOfficial
• 인스타그램
  • 대중마케팅 및 공지 용으로 사용되는 이미지 중심 SNS
  • 장점 : 이미지를 통한 강력한 마케팅 수단, 다수의 대중 포진
  • 단점 : 상호소통의 어려움, Web3.0에 친화적이지 않은 유저가 다수임
  • 대표 예시 : Shyghostsquad https://www.instagram.com/shyghostsquad/
• 텔레그램
  • 단방향 혹은 양방향 소통 SNS, 알파방으로 많이 사용된다
  • 장점 : 구독과 링크쉐어 기능, 다양한 활용도의 봇 기능
  • 단점 : 채널 운영 시 커뮤니티 상호소통 어려움, 그룹 이용시 어나운스 어려움, 한국 내 안좋은 인식
  • 대표 예시 : 취미생활방 https://t.me/enjoymyhobby
• 카카오톡
  • 한국 대표 메신저 서비스, 내수용 프로젝트들의 대표적인 소통 창구
  • 장점 : 한국 유저들에게 매우 높은 접근성
  • 단점 : 한국 유저들에게만 매우 높은 접근성, 단일채널 이상의 기능이 거의 없음, 이에 따른 높은 피로도
  • 예시 : 다수의 내수용 프로젝트들
• 디스코스
  • 공지 및 Q&A 제안과 그에 대한 의견 공유 등 프로젝트와 관련된 여러 의견을 나누는 플랫폼
  • 장점 : 의사결정에 특화된만큼 확실한 기능
  • 단점 : 매우 낮은 접근성
  • 대표 예시 : Nouns https://discourse.nouns.wtf/

    채널 세팅에 정답이 있을까?

• 대부분의 Web3.0 커뮤니티는 하나의 채널을 운영하지 않고 커뮤니티의 유형과 특징에 따라 위에서 말한 채널을 조합하여 운영하고 있다
• 프로젝트의 변화, 유행의 변화 등의 다양한 이유로 시기에 맞춰 조합을 변경하는 경우도 잦다.
  • Nouns DAO : 디스코드 폐쇄
  • DOGESOUNDCLUB : 클럽하우스 -> 카카오톡 -> 디스코드
  • mfers
    • 운영진이 운영하는 채널 없음
    • 커뮤니티가 구축한 디스코드 https://discord.com/invite/unofficialmfers
  • DADAZ
    • 트위터에서만 활동 하는 것으로 유명했던 프로젝트
    • 메인 컬렉션의 배포가 끝나갈 무렵 디스코드 개설 https://discord.gg/dadaz
• 채널 구성 이전에 프로젝트와 타겟의 특성에 대한 이해도가 우선되어야함
• 위에 소개한 서비스가 아니더라도 앱, 웹을 직접 만들 수 있음

참고 자료

• DADAZ
  • 트위터 https://twitter.com/DADAZOfficial
  • 디스코드 https://discord.gg/dadaz
• BugCity
  • 트위터 https://twitter.com/Bug4city
  • 디스코드 https://discord.com/invite/TBFrZ5psxj
• shyghostsquad
  • 인스타그램 https://www.instagram.com/shyghostsquad/?hl=ko
  • 디스코드 https://discord.com/invite/f9zvfUfjYP
• 취미생활방 https://t.me/enjoymyhobby
• Nouns DAO https://nouns.wtf
• mfers https://mirror.xyz/sartoshi.eth/QukjtL1076-1SEoNJuqyc-x4Ut2v8_TocKkszo-S_nU
  • 디스코드 https://discord.com/invite/unofficialmfers

타겟팅과 전략 설정의 관계 이해

• 타겟팅
  • 시장과 고객의 세분화를 통해 기업 혹은 프로젝트가 집중해야 할 시장과 인원을 설정하는 방법
• Web3.0 커뮤니티 타겟팅
  1. Web3.0 커뮤니티 유형의 세분화
  2. 타겟 설정
  3. 커뮤니티 목적성과 기대 멤버 유형에 따라 모집 전략 수립
• 멤버 유형의 분류
  • 홀더 : 커뮤니티 발행 토큰 소유자. 참여도 기댓값은 최대한 수동적으로 상정한다
  • 컨트리뷰터 : 2차 창작, 이벤트 개최, 서비스 개발을 비롯한 프로젝트 생태계 확장 기여자
  • 코어 : 커뮤니티 정책 및 프로젝트 방향성 결정을 포함한 프로젝트 운영 팀의 역할 수행
• 초기 멤버를 모집함에 있어 커뮤니티의 분류와 유형을 고려할 때 커뮤니티를 통한 자생적인 성장 실현 원활

  Web3.0 커뮤니티의 분류 기준

  
• 목적성 : 참여자가 추구하는 가치에 따른 분류
• 개방성 : 진입 장벽 설정 여부에 따른 분류
• 탈중앙성 : 크립토 자산 활용, 의사 결정 여부에 따른 분류
• 성숙도 : 커뮤니티 형성에서 초기 생성, 발전과정, 안정화까지의 상황 판단에 따른 분류

  목적성에 따른 커뮤니티 분류

• 투자
  • 투자 대상의 가격 상승 혹은 기금 활용을 통해 개인과 조직의 자산 증식을 목표로 하는 커뮤니티
  • 대표 예시 : GCR DAO
• 라이프스타일
  • 식문화, 예술, 스포츠, 게임 등 공통의 문화와 관심사를 향유하기 위해 모인 커뮤니티
  • 대표 예시 : Hide me, please
• 빌딩
  • 특정 프로젝트나 서비스의 활용도를 발전시키거나 생태계의 확장을 이루기 위해 모인 커뮤니티
  • 프로젝트 확장을 위해 그랜트, 트레저리 집행을 통해 2차 창작, IP의 확장, 추가 개발을 추진함
  • 대표 예시 : 니어 프로토콜
• 소셜 임팩트
  • 환경 보호, 기업의 사회적 책임 수행을 비롯해 공공재적 가치 실현을 위한 커뮤니티
  • 추구하는 가치를 실현하기 위해 문제점을 식별하고 공동 행동을 통해 개선을 위한 해결책을 제시
  • 대표 예시 : GITCOIN DAO

    개방성에 따른 커뮤니티 분류

• 퍼블릭
  • 누구나 참여 가능한 오픈 커뮤니티
  • 커뮤니티 규모 확장을 통한 경제 규모 성장을 추구함
  • 대표 예시 : Reddit
• 리미티드
  • 한정된 토큰을 소유해야 입장이 가능한 커뮤니티
  • 토큰 자산의 희소성을 기반으로 최소 경제 인원을 구성하고, 제한된 그룹에 참요하고 싶은 욕구(FOMO)를 자극하여 토큰 가격을 상승시킴
  • 대표 예시 : BAYC
• 프라이빗
  • 프로젝트가 추구하는 가치와 기준에 따라 검증된 인원만 참여 가능하도록 제한하는 커뮤니티
  • 토큰 이외에도 자기소개서, 이력 검증과 같은 별도의 절차 설정
  • 대표 예시 : FWB DAO

    탈중앙성에 따른 커뮤니티 분류

• 중앙화 커뮤니티
  • Web2.0 기업의 기존 서비스, 혜택 중심으로 액티비티 제공
  • 새로운 고객 획득과 마케팅 비용 절감
  • 대표 예시 : PUUVILLA
• 부분적 탈중앙화 커뮤니티
  • 커뮤니티 운영 사항 중 특정 부분만 선택적으로 탈중앙화를 취함
  • 대표 예시 : Doodles
• 탈중앙화 지향 커뮤니티
  • 사업 확장, 자급 집행, 정책 결정 등에 있어 커뮤니티의 탈중앙화된 의사 결정을 시행
  • 커뮤니티와 운영진의 경계가 상대적으로 희미함
  • 대표 예시 : Nouns DAO

    성숙도에 따른 커뮤니티 분류

• 생성
  • 커뮤니티 인원 유입을 통해 최소 구동 인원을 모으는 단계
  • 모집을 위한 프로젝트의 가치 전달 방법 중요
  • 대표 예시 : 10K PFP Project
• 활성화
  • 모집된 커뮤니티를 기반으로 핵심 액티비티를 정립하는 단계
  • 커뮤니티 멤버의 목적과 니즈를 충족시킬 수 있는 기획과 참여 유도가 중요
  • 대표 예시 : MYTY - Ghost Project
• 확장
  • 지속 가능한 비즈니스 모델의 생성과 자원 분배가 이루어짐으로써 경제 순환 체계를 만들어내는 단계
  • 커뮤니티 멤버의 의견과 제안을 프로젝트 운영자와 조율하는 역할 중요
  • 대표 예시 : YugaLabs - Otherside
• 안정화
  • 커뮤니티가 비즈니스 모델을 활용하는 환경을 보장함으로써 커뮤니티의 주도성을 높이는 단계
  • 커뮤니티 생태계의 전반적인 구성파악, 멤버가 정착할 경로 유도
  • 대표 예시 : Ethereum

    커뮤니티 활용성

• 초기에 어떤 유형(홀더, 컨트리뷰터, 코어)의 멤버가 참여하는지에 따라 활용 방향이 달라짐
• 탈중앙성이 높을수록, 커뮤니티가 성숙할수록 커뮤니티 컨트리뷰터, 코어의 역할 수행이 중요해짐
• 초기 개방성을 리미티드, 프라이빗으로 설정해서 컨트리뷰터, 코어가 될 인원 참여를 유도하기도 함

참고자료

• 타겟팅과 전략 설정의 관계 이해
  • 커뮤니티 플라이휠 https://acquiredentrepreneur.tistory.com/93
  • a16z, 커뮤니티의 Go-To-Market 전략 https://future.com/go-to-market-in-web3/
• 목적성에 따른 분류
  • GCR DAO, 투자 : https://globalcoinresearch.com/
  • 레이지고메 클럽, 라이프스타일 : https://lazygourmet.club/
  • 니어 프로토콜, 빌더 : https://near.org/
  • GITCOIN DAO, 소셜 임팩트 : https://gitcoin.co/
• 개방성에 따른 분류
  • Reddit, 퍼블릭 : Reddit
  • BAYC, 리미티드 : Yugaverse (BAYC, BAKC, MAYC)
  • FWB DAO, 프라이빗 : https://medium.com/@agwn/12조원짜리-디스코드-채널의-비밀-d7187d36f4ae
• 탈중앙성에 따른 분류
  • 푸빌라, 중앙화 : https://puuvillasociety.com/
  • 두들뱅크, 부분적 탈중앙화 : https://forum.doodles.app/
  • 나운즈다오, 완전 탈중앙화 : https://nouns.wtf/
• 성숙도에 따른 분류
  • Optimism Quest, 생성 : https://app.optimism.io/airdrop/check
  • MYTY - Ghost Project, 활성화 : https://ghostsproject.com/
  • YugaLabs - Otherside, 확장 : https://www.yuga.com/
  • Ethereum, 안정화 : https://ethereum.org/en/

Web3.0

• 블록체인 기술을 통하여 탈중앙성을 지향하는 경제 생태계
• 정보의 주권화가 가능해지는 영역

  Web3.0 커뮤니티의 발생

  
• 토큰을 발행하는 순간 '토큰의 소유자(데이터 주권자)'와 '프로젝트 운영팀'이 발생
• 데이터가 탈중앙화된 블록체인의 특성으로 토큰의 소유자와 프로젝트 운영팀의 데이터 보유량의 차이는 기존의 소비자와 기업간의 차이보다 훨씬 적어짐

  탈중앙적 커뮤니티의 기대 효과

• 단일 실패 지점(Single point failure) 방지
  • FTX와 같은 특정 주체의 권력 남용으로 인한 전체 손해 방지
• 인센티브 일원화(Incentive alignment)를 통한 자생적 성장
  • 기여와 참여를 통한 토큰 가치 상승 공동 실현

    커뮤니티 매니저가 하는 일

    
• 커뮤니티 유형 분석과 타겟 설정
  • 커뮤니티의 유형 파악
  • 타겟에 맞는 멤버 파악
• 커뮤니티 액티비티 설계를 통한 활성화 유도
  • 커뮤니티 내 경험 설계
  • 액티비티 목표 설정
  • 목표 달성에 따른 보상 제공
• 커뮤니티 채널 운영 및 관리
  • 커뮤니티 정책과 문화 코드 설정
  • 커뮤니티 채널 운영과 관리
• 리서치 및 커뮤니티 활동 분석
  • 커뮤니티 활동 데이터 분석
  • 데이터를 통한 유저 경험 강화
  • 확장 전략 수립
  • 커뮤니티 액티비티를 성장 모델에 반영

참고자료

• Web3.0의 정의
  • Web3.0 재단 창시자 Gavin Wood의 정의 https://gavofyork.medium.com/why-we-need-web-3-0-5da4f2bf95ab
  • Chris Dixon의 탈중앙성이 중요한 이유 https://onezero.medium.com/why-decentralization-matters-5e3f79f7638₩e
  • Jess Walden의 Ownership Economy https://variant.fund/articles/the-ownership-economy-2022/
  • FTX와 중앙화의 실패 https://www.coindesk.com/business/2022/11/17/alameda-had-secret-exemption-from-ftx-liquidation-protocols-new-ceo-says/
• 두들뱅크
  • 두들 뱅크 페이지: https://forum.doodles.app/
  • SWSX 제안서: https://forum.doodles.app/t/doodles-pop-up-at-sxsw/153
  • Doodles SWSX 영상: https://www.youtube.com/watch?v=NkOqzSEaf70
  • 두들즈 v2 확장 방안 제안서: https://forum.doodles.app/t/team-scaling-proposal-v2/1871
  • 한국 두들즈 커뮤니티의 로컬 밋업 지원 제안서: https://forum.doodles.app/t/suggestions-for-supporting-local-community-meetups/2224
  • 스냅샷 투표 예시: https://snapshot.org/#/doodles.eth/proposal/0x60982f2266c162fd37f72d1ac51988cc2681c52ae7a7f5d009cd0f232085b9

node, progresql

Prisma extension설치 후 settings.json에 아래 코드 추가해서 autoFormatting 세팅

"[prisma]": {
    "editor.defaultFormatter": "Prisma.prisma",
    "editor.formatOnSave": true
 }

tsc --init을 통해 tsconfig.json 생성

1. 패키지 설정

npm init -y npm i -D prisma typescript ts-node @types/node nodemon tsconfig.json 생성

{
  "compilerOptions": {
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "lib": ["ESNext"],
    "esModuleInterop": true
  }
}

npx prisma init --datasource-provider postgresql

생성된 .env 속 DATABASE_URL에 postgresql이름, 비번, 포트번호, 데이터베이스 이름 넣어서 수정

다 만들었으면 npx prisma migrate dev

Facebook Graph API Javascript https://developers.facebook.com/docs/graph-api/reference/v14.0/group 이거 말고 다른 javascipt document는 뭔가 이상했다

Facebook api explorer https://developers.facebook.com/tools/explorer/ 이거 없었으면 시간 더 걸렸다

간단한 웹페이지 퍼블리싱

Neocities https://neocities.org/ 간단하게 html, css, javascript를 만들어 넣어서 퍼블리싱 해주는 사이트

json & excel

excel to json https://products.aspose.app/cells/ko/conversion/excel-to-json

json to excel http://convertcsv.com/json-to-csv.htm

이성무개발자님 추천 페이지

https://velog.io/@chrisp3/nestjs%EB%A1%9C-todolist-%EB%A7%8C%EB%93%A4%EA%B8%B0 nestjs 관련 벨로그

keyboard / trackpad / dock

homebrew

rosetta iterm2 / powerlevel10k / D2coding & 뭐더라... vsc brave browser / chrome discord macs fan control / run cat notion / zoom / telegram spectacle logi-options

App Store

kakaotalk

Block 클래스 안에 정적 펑션 hello를 만들었다. 그렇기에 클래스를 인스턴스화 하지 않아도 Block.hello()가 가능하다.

Block 클래스를 bl로 인스턴스화하였다. bl안에도 hello펑션이 있으리라 생각되는데 bl.hello()는 성립하지 않는다.

정적 펑션은 어디에 위치하는가...