개요
아이브릭스(I-BRICKS)는 대화형 AI, 생성형 AI, 지능형 검색과 문서 분석을 한데 묶어 기업 고객에게 파는 B2B AI 기술 회사입니다. 첫 화면이 내건 문장은 대화하고 검색하고 분석하는 AI의 진화. 그 아래 “SLLM 기반 경량화 솔루션부터 AI 에이전트까지 맞춤형 지능을 설계합니다”라는 한 줄이 사업 범위를 압축해 보여 줍니다. 추상적인 기술 기업일수록 웹사이트가 곧 제품 데모이자 첫 영업 사원이 되는데, 아이브릭스는 이 부담을 원페이지 스크롤 서사로 풀었습니다. 이번 리뷰에서는 새까만 히어로에서 시작해 대형 타이포 브랜딩, 코발트블루 서비스 블록, 뉴스룸, 그리고 Contact Us 마무리로 이어지는 흐름이 방문자를 얼마나 매끄럽게 리드 문의까지 데려가는지, UX/UI와 웹디자인 관점에서 강점과 다음 수를 짚습니다.
브랜드 & 메시지
브랜드 전개가 이 사이트의 진짜 무기입니다. 어두운 히어로가 절제된 카피 한 줄로 집중을 만들고 나면, 화면은 갑자기 여백을 크게 열어 “AI”라는 글자를 한 화면 가득 세웁니다. 얇은 구분선을 지나 “BRICK”이 등장하고, 마침내 코발트블루 그라디언트로 물든 I-BRICKS 로고가 완성됩니다. 사명을 알파벳 단위로 쌓아 올리는 이 연출은 “튼튼한 파트너들이 만나 탄생했습니다”라는 브랜드 서사와 정확히 포개집니다. 벽돌(brick)을 쌓듯 신뢰를 쌓는다는 은유를 말이 아니라 레이아웃으로 보여 주는 셈입니다.
톤앤매너는 블랙·화이트·코발트블루 세 축으로 단단하게 잠겨 있습니다. 다크 히어로의 무게감, 타이포 섹션의 흰 여백, 서비스 블록의 강렬한 파랑이 번갈아 나오며 스크롤에 리듬을 줍니다. 다만 행동 유도 문구는 아쉬움이 남습니다. 곳곳의 VIEW MORE는 무엇을 더 보게 되는지 알려 주지 않아, 히어로가 만든 기대감이 클릭 직전에 옅어집니다. 상단 글로벌 네비게이션은 회사소개 · AI Data 플랫폼 · AI Agent 플랫폼 · 응용 어플리케이션 · 미디어 룸 · 채용의 6개로 정돈돼 제품과 조직을 한눈에 훑게 합니다.
UX/UI 관점
실제 화면을 근거로 강점을 추려 보면 다음과 같습니다.
첫째, 히어로의 정보 다이어트. 헤드라인 한 줄과 서브카피 한 줄만 남기고 나머지를 어둠으로 비워, 기술 기업이 흔히 빠지는 용어 과잉을 피했습니다. 둘째, 사명을 각인시키는 타이포 시퀀스. AI → BRICK → I-BRICKS로 이어지는 대형 활자 구간이 스크롤 자체를 브랜드 체험으로 바꿉니다. 셋째, 서비스의 넘버링 카드. 코발트블루 블록 안에서 차세대 생성형 AI, 지능형 검색 및 추천, 지능형 문서·텍스트 분석, 자연어 이해 기반 대화형 AI를 Business 01~04로 번호 매겨, 복잡한 제품군을 스캔 가능한 단위로 쪼갰습니다.
넷째, 카드의 화살표 어포던스. 각 서비스 카드 모서리의 화살표 아이콘이 “여기서 더 깊이 들어갈 수 있다”는 신호를 일관되게 줍니다. 다섯째, 소식의 탭 필터. ALL · STORY · NEWS 탭과 아코디언(+) 방식은 보도자료를 쌓아 두기만 하지 않고 방문자가 골라 읽게 합니다. 여섯째, 강한 클로징. 마지막 다크 섹션의 Contact Us 대형 타이틀과 회전 텍스트를 두른 원형 파란 버튼은 스크롤의 끝에서 문의라는 단 하나의 행동으로 시선을 모읍니다. 전반적으로 컴포넌트 위계가 분명하고, 화면 전환마다 배경색이 바뀌어 섹션 경계가 또렷합니다.
IA·SEO 전략
원페이지 서사는 첫인상에는 강하지만 검색에는 불리합니다. 지금 구조에서는 생성형 AI, 지능형 검색, 문서 분석, 대화형 AI가 모두 한 URL 안에 섞여 있어, “생성형 AI 솔루션”이나 “기업용 문서 분석 AI” 같은 실제 구매 검색어가 착지할 전용 페이지가 없습니다. Business 01~04 각각을 독립된 상세 페이지로 분리하고, 페이지마다 고유한 title과 meta description, 그리고 그 서비스가 푸는 문제를 H1으로 세우면 검색 진입점이 네 배로 늘어납니다.
미디어 룸의 STORY·NEWS 항목도 SEO 자산입니다. 업무협약 같은 소식을 개별 상세 URL로 발행하고 Article 구조화 데이터를 붙이면, 브랜드명 검색뿐 아니라 파트너사·산업 키워드로도 유입이 생깁니다. 카피에 영문 병기가 많은 사이트인 만큼 메타데이터는 “AI 에이전트 구축”, “SLLM 경량화” 같은 국문 검색어를 기준으로 잡는 편이 유리합니다. B2B 기술 기업의 웹사이트 제작에서는 이렇게 제품 정보 구조(IA)를 검색 수요에 맞춰 펼치는 작업이 리드 발굴의 절반을 좌우합니다.
성능·접근성
긴 원페이지에 무거운 시각 요소가 얹혀 있는 구조라 로딩 예산 관리가 관건입니다. 히어로의 인터랙션, 코발트블루 블록을 채운 곡면 블롭 그래픽, 대형 타이포 구간은 데스크톱에서는 시원하지만 자칫 초기 페인트를 늦춥니다. 블롭과 아이콘은 SVG로, 뉴스 썸네일과 사진은 WebP로 내보내고 첫 화면 밖 이미지는 지연 로딩하되, 각 이미지에 명시적 width/height를 지정해 스크롤 중 레이아웃이 튀는 CLS를 막아야 합니다. 대형 활자에 쓰인 웹폰트는 서브셋과 display=swap으로 다듬을 여지가 큽니다.
접근성에서는 대비와 대체 텍스트가 핵심 점검 항목입니다. 코발트블루 배경 위 흰 텍스트, 다크 히어로 위 회색 서브카피는 명도 대비 기준을 통과하는지 확인이 필요하고, 브랜드 타이포와 블롭 이미지에는 의미 있는 alt 또는 장식용 숨김 처리를 구분해 적용해야 합니다. 히어로의 재생/일시정지 컨트롤이 키보드로도 조작되는지, 아코디언(+) 소식 목록이 스크린리더에서 열림/닫힘 상태를 알리는지도 함께 봐야 합니다.
디지털 파트너 더블루캔버스
아이브릭스처럼 기술 자체는 뛰어난데 그 가치를 화면 위에서 설명하기 어려운 B2B 기업일수록, 홈페이지 제작은 디자인 작업이 아니라 영업 자산 설계에 가깝습니다. The Blue Canvas는 복잡한 솔루션을 방문자의 언어로 번역하고, 제품군을 검색 수요에 맞춰 정보 구조로 펼친 뒤, 리드 문의라는 하나의 목표까지 동선을 좁히는 웹사이트 제작을 합니다. 브랜드 서사를 담은 UX/UI 설계와 웹디자인, 서비스별 상세 페이지를 겨냥한 SEO, 그리고 유입을 실제 상담으로 바꾸는 퍼포먼스 마케팅을 한 팀에서 이어 붙여, 만든 뒤에도 성과가 자라는 사이트를 지향합니다. AI·제조·기술 기업의 홈페이지 제작을 고민 중이라면 아래에서 사례와 역량을 확인해 보세요.
마무리와 다음 스텝
아이브릭스의 웹사이트는 “벽돌을 쌓아 신뢰를 만든다”는 브랜드 정체성을 타이포와 컬러로 설득력 있게 구현했습니다. 첫인상은 확실하고, 서비스 넘버링과 강한 클로징도 잘 잡혀 있습니다. 남은 과제는 이 좋은 첫인상을 검색과 전환으로 연결하는 일입니다. 우선순위를 셋으로 좁히면 이렇습니다. 첫째, VIEW MORE 같은 모호한 버튼을 “생성형 AI 도입 상담”, “플랫폼 데모 요청”처럼 행동이 분명한 문구로 교체하세요. 둘째, Business 01~04를 전용 상세 페이지로 분리해 서비스별 검색 진입점을 만드세요. 셋째, 히어로 밖 이미지의 지연 로딩과 width/height 지정으로 체감 속도와 화면 안정성을 함께 끌어올리세요. 이 세 가지만 2주 스프린트로 처리해도 방문에서 문의로 넘어가는 비율이 눈에 띄게 달라질 것입니다.