개요
핵심 요약 — 블록ESG(BLOCKESG, blockesg.net)는 블록체인 기술을 사회적 금융·기부·ESG(환경·사회·지배구조)에 연결해 사회적 가치를 만들겠다고 선언하는 프로젝트다. 첫 화면부터 방향이 분명하다. 시안빛 홀로그램 블록이 회로기판 위에 떠 있고, 그 위로 BUILDING A BETTER SOCIETY WITH BLOCKESG라는 영문 헤드라인과 더 나은 사회를 만든다는 국문 한 줄이 겹친다. 기술 회사의 냉정함과 사회적 미션의 온기를 한 화면에서 동시에 말하려는 시도다.
이번 리뷰는 이 사이트가 두 얼굴 — 블록체인(파랑)과 지속가능성(초록) — 을 어떻게 시각 언어로 분리하고 다시 엮는지, 토큰·백서·다국어라는 크립토 프로젝트 특유의 요구를 UX/UI와 SEO 관점에서 얼마나 소화했는지를 살핀다. 화면에 드러난 근거만으로 웹사이트 디자인의 강점과 다듬을 지점을 짚는다.
브랜드 & 메시지
헤더는 소문자 워드마크 blockesg를 왼쪽에 두고 Network·Characteristics·Technical·Partner·Partnership·Advisor·Press·Whitepaper·Token & Disclosure·Community & RoadMap까지 열 개 남짓의 메뉴를 한 줄로 펼친다. 오른쪽 끝의 KO/EN 토글은 이 프로젝트가 국내와 글로벌을 동시에 겨냥한다는 신호다. 다만 상단 항목이 열 개를 넘기며 가로 폭을 가득 채우는 탓에, 투자자에게 가장 중요한 Token & Disclosure와 Whitepaper가 여느 정보 메뉴와 같은 무게로 나열돼 우선순위가 흐려진다.
톤앤매너의 중심은 색이다. 딥 블랙 히어로 위의 전기빛 시안 블록이 기술의 언어라면, 스크롤을 내리면 등장하는 새싹과 초록 보케 이미지는 지속가능성의 언어다. 각 영문 섹션 제목(NETWORK. CHARACTERISTICS. TECHNICAL. PARTNER. PRESS.) 뒤에 찍히는 초록 마침표는 이 두 색을 잇는 브랜드 시그니처처럼 반복된다. 작지만 일관된 이 디테일이 페이지 전체에 리듬을 준다.
카피는 절제돼 있다. CHARACTERISTICS 섹션은 초록 배경 위에 DIGITAL ASSET을 크게 얹어 ‘지속가능한 디지털 자산’이라는 개념을 감각적으로 던지는데, 방향은 또렷하되 문장 자체는 다소 추상적이다. 반면 행동을 부르는 CTA는 약하다. 히어로에도, 백서 영역의 DOWNLOAD 버튼을 빼면, 방문자를 다음 단계로 밀어주는 버튼이 드물다.
UX/UI 관점
화면에 드러난 웹디자인의 강점을 짚으면 이렇다.
첫째, 파랑=기술 / 초록=지속가능성의 이중 컬러 아트디렉션. 블록체인과 ESG라는 두 축을 색으로 갈라 대비시키니 긴 설명 없이도 브랜드의 정체성이 읽힌다.
둘째, 풀블리드 이미지와 화이트 여백 섹션의 교차. CHARACTERISTICS의 초록 배경으로 몰입시키고 NETWORK·TECHNICAL의 흰 바탕에서 정보를 차분히 읽게 하는 완급 조절이 좋다.
셋째, TECHNICAL 섹션의 이미지-좌·텍스트-우 3단 반복. 블록체인 플랫폼, AI대출 플랫폼(AILOAN), 소셜 데이터 신용평가를 같은 리듬으로 나열해 스캔이 쉽다.
넷째, 임팩트를 사진으로 증명한다. Green Bethel Community School, Jalira Girls’ National Secondary School 같은 후원 학교의 실사진을 파트너 섹션에 배치해, 추상적 미션을 구체적 장면으로 번역했다.
다섯째, 언론 보도(PRESS) 섹션. 서울ESG 사회적신용센터의 ‘블록체인을 만나다’ 세미나, 아프리카 여학교 장학금 기부 등 실제 활동을 카드로 묶어 사회적 증거를 쌓는다.
여섯째, 히어로의 홀로그램 블록 비주얼. 첫인상이 강렬하고, 브랜드명 blockesg의 ‘블록’을 그대로 형상화해 이름과 이미지가 하나로 붙는다.
IA·SEO 전략
토큰·크립토 프로젝트의 사이트는 일반 기업 홈페이지와 다른 SEO 과제를 안는다. 첫째는 신뢰다. Advisor 섹션이 동일한 인물 사진과 직함(진오 / Gene Orr, Strefa Financial LLC CEO)을 여러 칸에 그대로 반복 노출하는데, 이는 아직 실데이터가 채워지지 않은 자리로 보인다. 투자자 신뢰가 생명인 프로젝트에서 이런 자리표시자는 실제 자문단 프로필로 교체돼야 한다. 푸터의 연락 정보도 확정된 실제 값으로 채워 신뢰의 빈틈을 없애야 한다.
둘째는 다국어다. KO/EN 토글이 있으니 각 언어 페이지에 hreflang을 정합성 있게 걸어 잘못된 언어 노출과 중복 색인을 막아야 한다. 푸터가 싱가포르 하이스트리트센터 주소를 내세우는 만큼, 영문 페이지의 title·meta·OG 완성도가 국내 검색만큼 중요하다.
셋째는 구조화 데이터다. Organization 스키마에 공식 커뮤니티·SNS를 sameAs로 연결하고, PRESS 카드에는 게재일과 함께 보도 매체명·원문 링크를 붙여 Article로 표시하면 E-E-A-T가 강해진다. Whitepaper와 Token & Disclosure 페이지는 FAQ·문서 구조화로 검색 노출과 투자자 편의를 함께 끌어올릴 수 있다.
성능·접근성
이 사이트는 대형 3D 렌더와 자연 사진에 크게 기댄다. 히어로의 시안 블록, NETWORK의 유리 큐브, CHARACTERISTICS의 풀블리드 초록 배경은 모두 무거운 이미지다. 우선 WebP/AVIF 병행 제공과 반응형 소스셋으로 전송량을 줄이고, 각 이미지에 명시적 width·height를 지정해 CLS를 막아야 한다. 히어로 이미지는 지연 로딩 대신 preload로 걸어 LCP를 앞당기는 편이 낫다.
Advisor 그리드처럼 접힘(fold) 아래에서 반복되는 이미지는 lazy-load로 초기 페인트에서 제외한다. 영문 콘덴스드 디스플레이 서체와 국문 고딕이 섞여 있으니 폰트는 서브셋·display:swap·preload로 다듬는다. DIGITAL ASSET처럼 사진 위에 얹힌 텍스트는 배경 대비가 낮아질 수 있으니 딤이나 그라디언트 마스크로 가독성을 확보하고, 각 이미지의 대체 텍스트와 KO/EN 토글의 현재 언어 상태(aria)도 함께 정리해야 한다.
디지털 파트너 더블루캔버스
블록체인 벤처, 토큰 프로젝트, 글로벌 소셜 임팩트 기업의 홈페이지 제작은 평범한 회사 소개 사이트보다 까다롭다. 기술의 신뢰와 미션의 진정성을 한 화면에서 동시에 증명해야 하고, 국내와 해외의 투자자·커뮤니티를 함께 설득할 다국어 웹사이트가 필요하기 때문이다.
The Blue Canvas는 이런 프로젝트에 맞는 웹사이트 제작과 웹디자인을 설계한다. 브랜드의 색과 언어를 정리하는 아트디렉션부터, 백서·토큰·로드맵 같은 신뢰 문서를 검색과 UX/UI 양쪽에서 살리는 정보 구조, hreflang과 구조화 데이터를 갖춘 SEO, 그리고 방문을 실제 참여로 바꾸는 퍼포먼스 마케팅까지 하나의 흐름으로 잇는다. 블록ESG처럼 강렬한 비주얼 자산을 이미 가진 브랜드라면, 그것을 성능과 전환까지 완성하는 홈페이지 제작이 다음 단계다.
마무리와 다음 스텝
블록ESG는 블록체인과 ESG라는 두 세계를 파랑과 초록으로 나눠 말하는, 방향이 또렷한 사이트다. 이중 컬러 시스템과 그린 마침표 시그니처, 임팩트를 사진으로 증명하는 방식은 이미 충분히 매력적이다. 남은 일은 완성도다.
실행 제안은 셋이다. 하나, Advisor 카드와 연락처처럼 반복·자리표시자로 남은 정보를 실제 데이터로 채워 신뢰의 빈틈을 메운다. 둘, 대형 이미지에 WebP/AVIF와 width·height를 적용하고 히어로를 preload해 Core Web Vitals를 끌어올린다. 셋, KO/EN hreflang과 Organization·Article 구조화 데이터, PRESS 원문 링크로 E-E-A-T를 강화한다. 이 세 가지만 정리해도 지금의 강한 첫인상이 성능과 신뢰까지 갖춘 웹사이트 디자인으로 완결된다.