26-7-28 @greece-lover의 노력의 통합을 위한 작업을 소개합니다.

steem-agora (86)in AVLE 일상 • 2 days ago

@greece-lover가 기존 스팀잇 웹 프론트엔드 오픈소스인 **콘덴서(Condenser)** 기반으로 개발해 공개한 테스트 버전(https://steemit.steemapps.com/`)의 주요 업데이트 내용을 디스코드에 올렸습니다. 자세한 내용은 아래와 같습니다.

1. 소셜 공유 및 QR 코드 제공 (Share + QR)

SNS 직접 공유: 작성된 게시물이나 사용자 프로필을 페이스북, 와츠앱, X(구 트위터)로 바로 공유할 수 있습니다.
직접 링크 복사: 한 번의 클릭으로 URL을 클립보드에 복사할 수 있습니다.
QR 코드 생성: Print 출력물이나 모바일 디바이스 간 빠른 웹 페이지 연결을 위해 화면상에 QR 코드를 생성하는 기능이 탑재되었습니다. (모바일 브라우저로 접속 시 기기 기본 공유 시트를 연결해 동작합니다.)

2. 댓글 단위 Direct Link 복사 버튼 추가

커뮤니티 요청을 반영해 게시물 본문뿐만 아니라 모든 댓글마다 '링크 복사' 버튼을 추가했습니다. 클릭 한 번으로 해당 댓글로 즉시 이동하는 고유 링크(Deep Link)를 클립보드에 담을 수 있습니다.

3. API 노드 스위처 (Node Switcher)

프론트엔드가 다수의 스팀 API 노드와 통신하도록 설계되었습니다.
특정 증인/API 노드가 다운되거나 응답이 느려질 경우 자동으로 정상 노드를 찾아 전환(Rotation)하며, 사용자가 직접 원하는 API 노드를 선택할 수도 있어 가동률과 접속 안정성이 향상되었습니다.

4. 19개 언어 다국어 인터페이스 지원

기계 번역(자동 번역) 방식이 아닌, 19개 언어에 대한 고품질 정식 번역 데이터를 하드코딩하여 적용했습니다.
접속자의 브라우저 언어를 자동 감지하며, 필요시 사용자가 원하는 언어로 인터페이스를 직접 전환할 수 있습니다.

5. 이모지 리액션 기능 (Emoji Reactions)

페이스북 스타일 감정 표현: 스팀잇의 기본 보팅(Upvote) 시스템과 별개로, 게시물과 댓글에 페이스북 스타일의 이모지 반응을 추가할 수 있습니다.
보팅 파워 절감: 보팅 파워(Steem Power)나 트랜잭션 비용을 소모하지 않고도 "글을 읽었다"는 표시를 남길 수 있습니다.
스팸 방지 (off-chain 처리): 로그인된 계정당 1회로 제한하여 어뷰징 및 봇 스팸을 방지합니다. (현재 테스트 환경에서는 빠른 구동을 위해 온체인 custom_json이 아닌 백엔드 SQL 데이터베이스 방식으로 처리되어 있습니다.)

업데이트 의도:
greece-lover는 기존 스팀잇 프론트엔드가 향후에도 주력 인터페이스로 사용될 가능성이 높기 때문에, 아이디어 제안에 그치지 않고 실 동작하는 기능을 직접 구현하여 스팀잇의 편의성을 개선하고 추후 나올 정식 새 버전에 아이디어를 제공하고자 해당 테스트 버전을 출시했습니다.

이런 개선 사항을 실제로 steemit.com에 적용하려면 추가적인 작업이 필요할 것입니다. 실제 적용하기에 앞서 스팀 전체의 발전을 위한 노력의 통합이 시도되고 있는 것이 매우 의미있다고 생각합니다.

@greece-lover의 작업에서 더 추가되어야 할 부분에 대한 Gemini의 답변입니다.
greece-lover가 구현한 기능들을 실제 공식 스팀잇(Steemit.com) 또는 메인 체인 생태계에 정식으로 도입/보완하려면 기술적 구조, 데이터 온체인화, 보안 및 사용자 경험 측면에서 몇 가지 핵심적인 작업이 필요합니다.

1. 이모지 리액션의 온체인(On-chain) 전환

현재 greece-lover의 리액션은 중앙화된 SQL DB에 저장되는 오프체인 방식입니다. 블록체인의 투명성과 탈중앙성을 유지하려면 이를 체인 데이터로 변환해야 합니다.

custom_json 트랜잭션 활용:
스팀 블록체인에는 스마트 컨트랙트 없이도 블록에 커스텀 데이터를 기록할 수 있는 custom_json 기능이 있습니다.
작동 구조: 유저가 이모지를 클릭하면 custom_json (id: steem_reaction, payload: { author, permlink, reaction_type }) 트랜잭션을 발행.

하이브마인드(Hivemind) / 인덱서 연동:
체인에 기록되는 custom_json을 효율적으로 읽어오기 위해 스팀잇의 데이터 인덱서(Hivemind 계층)가 해당 JSON을 파싱하여 DB에 캐싱하고, 이를 GraphQL/REST API로 프론트엔드에 제공하도록 보완합니다.

2. API 노드 스위처의 상태 검증 및 장애 조치(Failover) 고도화

간단한 노드 전환을 넘어, 네트워크 전체의 안정성을 높이기 위한 클라이언트 단 알고리즘이 필요합니다.

실시간 핑/헤드블록 헬스체크:
단순히 노드 목록만 갖추는 것이 아니라, 사용자의 브라우저에서 periodic하게 노드별 응답 속도(Latency)와 마지막 블록 동기화 상태(Head Block Number)를 체크하게 합니다.
지능형 자동 라우팅:
가장 빠르고 동기화가 완벽한 노드로 RPC 요청을 자동 라우팅하고, 특정 노드에서 HTTP 5xx 에러나 Timeout 발생 시 사용자 개입 없이 배경에서 즉시 다음 노드로 재시도(Retry)하는 로직을 구축합니다.

3. 다국어(i18n) 번역 데이터의 오픈소스화 및 자동화

19개 언어 하드코딩 방식은 초기 구현엔 용이하지만 지속적인 유지보수가 어렵습니다.

Crowdin / Transifex 도입:
글로벌 스팀 커뮤니티 사용자들이 번역에 참여할 수 있도록 번역 플랫폼을 연동합니다.
i18next 기반의 Dynamic Import:
번역 파일 전체를 앱 번들에 포함시키면 초기 로딩 속도가 느려집니다. 사용자의 언어 설정에 맞춰 해당 언어의 JSON 파일만 동적 로딩(Dynamic Import)하도록 코드 분할(Code Splitting)을 적용합니다.

4. 소셜 공유 & QR 코드의 메타데이터(OG Tag) 및 PWA 연동

동적 Open Graph (OG) 태그 서버 사이드 처리:
X, 페이스북, 카카오톡 등에 링크를 공유할 때 글의 섬네일, 제목, 본문 요약이 카드 형태로 잘 나오도록 Next.js/SSR 단에서 메타 태그를 동적으로 생성해 주어야 합니다.
Web Share API 표준 활용:
모바일 환경에서는 기기의 순정 공유 창을 띄워주는 navigator.share() API를 우선 호출하고, 미지원 브라우저/데스크톱에서만 레이어 팝업 형태의 공유 UI 및 QR 코드를 보여주는 Fallback 구조를 갖춥니다.

5. 공식 Steemit(Condenser) 저장소 PR(Pull Request) 제출 및 검증

스팀잇 공식 사이트에 반영되려면 스팀 공식 엔지니어링 팀의 검토를 거쳐야 합니다.

코드 모듈화: Condenser 레포지토리에 직접 기여할 수 있도록 기능별로 컴포넌트를 분리(Modularization)합니다.
스팀 키체인(Steem Keychain) 연동 검증: 이모지 리액션 시 custom_json 서명이 Keychain 또는 SteemConnect를 통해 유저 경험을 해치지 않고 매끄럽게 처리되는지 테스트를 완료한 후 PR을 제출합니다.

#steemit