프로젝트 무료 상담 신청 잇다소프트 - UX/UI 리뷰 | The Blue Canvas
UX/UI Review

잇다소프트 Website Design Review

2026-01-09·브랜드/웹 리뷰

코드와 크리에이티브를 한 화면에서 충돌시키는 웹 스튜디오. 실험적 타이포와 유머러스한 카피가 실제 전환으로 이어지는지, UX/UI 기본기와 함께 뜯어봅니다.

협업 문의 및 자세히 보기

개요

잇다소프트(itddaa)는 기획·디자인·개발·퍼블리싱을 한 팀에서 굴리는 웹 제작 스튜디오입니다. 첫 화면부터 성격이 분명합니다. 왼쪽 위 Code., 오른쪽 아래 초대형 Creativity가 페이지를 양 끝에서 붙잡고, 그 사이에 콜라빛 아이스 아메리카노가 담긴 수액백 그래픽이 링거처럼 매달려 있습니다. 봉투에는 흰 글씨로 어할제하, 그 아래 : 어차피 할 거 제대로 하겠습니다 라는 풀이가 붙어 브랜드의 자기소개를 대신합니다. 직장인 3대 영양소 중 하나, 카페인으로 빌드 중 같은 손글씨 주석까지 붙어 있어, 이 회사가 어떤 톤으로 말하는지 3초 만에 전달됩니다.

이번 리뷰는 이 강한 개성이 문의와 프로젝트 수주로 얼마나 매끄럽게 이어지는지를 봅니다. 실험적인 웹디자인이 정보 전달을 방해하지 않는지, 포트폴리오 중심의 스크롤 동선이 방문자를 Contact까지 밀어주는지, 화려한 표현 뒤에서 UX/UI와 검색 노출의 기본기가 받쳐주는지를 차례로 점검합니다.

잇다소프트 웹사이트 메인 스크린샷

브랜드 & 메시지

브랜드 언어가 이 사이트의 가장 큰 무기입니다. 잇다소프트는 잇다, 곧 연결한다는 사명을 코드와 크리에이티브의 접점으로 번역해 냅니다. 히어로 카피 Think Different. (Build) Digital.은 픽셀 손가락 커서 아이콘을 문장 한복판에 끼워, 기획이 클릭 한 번으로 결과물이 된다는 은유를 시각으로 못 박습니다. 바로 아래 클라이언트의 생각을 깨우고, 틀을 깨는 아이디어를 제안합니다 라는 국문 서브카피가 영문 헤드라인의 뜻을 보완해, 국내 방문자도 메시지를 놓치지 않습니다.

영문 태그라인도 촘촘합니다. Fresh Ideas. Fearless Design. Relentless Detail. 같은 문장이 곳곳에서 톤을 유지하고, 하단의 잇다소프트는 결과로 보여줍니다 한 줄이 자신감을 마무리합니다. 컬러는 블랙·화이트 기반에 레드와 블루를 포인트로 쓰는 절제된 팔레트라 카피의 위트가 산만해지지 않고 살아납니다. 우측 상단 내비게이션은 Menu 토글 아래 About · Portfolio · Story · Message · Contact 다섯 항목으로 압축돼 구조가 단순합니다. CTA는 Ready to Work with Us? 뒤에 Get in Touch로 자연스럽게 이어져, 감탄에서 행동으로 넘어가는 다리를 만들어 둔 점이 좋습니다.

키워드: 잇다 = 연결, 위트 있는 브랜드 보이스, 절제된 블랙·레드 팔레트, Get in Touch 전환 동선

UX/UI 관점

화면에서 확인되는 웹디자인 강점은 분명합니다.

첫째, 대비로 시선을 설계합니다. 흰 배경 위 검정 초대형 타이포와 레드 포인트가 만드는 명암 대비가 강해, 스크롤할 때마다 눈이 어디를 봐야 할지 자연스럽게 잡힙니다.

둘째, 타이포 위계가 과감합니다. Pixels, Code, Fred Pizza처럼 섹션을 여는 단어를 화면 폭 가득 키워, 각 구간의 주제를 한눈에 각인시킵니다.

셋째, 제작 과정을 시각화합니다. Think · Plan · Design · Code로 이어지는 다크 섹션이 회사의 작업 순서를 하나의 그림으로 보여줘, 방문자가 협업 흐름을 직관적으로 이해합니다.

넷째, 서비스를 모듈로 구획합니다. 파랑·검정·주황 컬러 카드가 각 서비스를 색으로 구분하고, Think, Creative Design, Publishing, Strategy, Development, Web site를 한 줄로 정리해 제공 범위를 스캔 가능한 형태로 요약합니다.

다섯째, 사람 냄새로 신뢰를 쌓습니다. Stories Behind the Work! 섹션의 라운드 썸네일에는 얼음 음료, 작업 현장, 공원 같은 팀의 일상 컷을 배치해, 완성작만 나열하는 여느 에이전시와 달리 사람이 보이는 스튜디오라는 인상을 줍니다.

여섯째, 기억에 남는 모티프를 심습니다. 수액백, 대형 피자 비주얼, 픽셀 딩벳으로 조립한 itddaa 워드마크, 마지막의 놀란 강아지 사진까지 반복되는 유머 장치가 재방문 기억을 남깁니다.

키워드: 강한 명암 대비, 과감한 타이포 위계, 과정 시각화, 사람 중심 신뢰 신호

IA·SEO 전략

표현이 강한 포트폴리오형 사이트일수록 검색엔진에게는 불리해지기 쉽습니다. 잇다소프트도 예외가 아닙니다. 첫 번째 과제는 텍스트의 실체화입니다. Code., Creativity, Fred Pizza 같은 핵심 문구가 이미지나 캔버스로 렌더링돼 있으면 크롤러가 읽지 못합니다. 최소한 h1·h2 마크업과 이미지 alt에 잇다소프트, 웹에이전시, 홈페이지 제작 같은 검색 의도 키워드를 실제 텍스트로 심어야 브랜드명 밖의 유입이 열립니다.

두 번째는 포트폴리오의 개별화입니다. Fred Pizza를 비롯한 각 프로젝트가 한 페이지 안 스크롤 구간으로만 존재한다면, 프로젝트별 고유 URL·title·OG 이미지를 가진 상세 페이지로 분리하는 편이 좋습니다. 이렇게 해야 클라이언트명이나 업종으로 검색한 사람이 개별 사례에 직접 도달합니다. 세 번째는 디테일 점검입니다. 내비게이션의 Protfolio, 서비스 줄의 Publising처럼 영문 철자가 어긋난 부분이 눈에 띄는데, 이런 오탈자는 브랜드 신뢰도는 물론 관련 검색어 매칭에도 손해입니다. 끝으로 sitemap·robots·canonical과 구조화 데이터를 정비하고, itddaa.com 브랜드 검색을 잡은 뒤 웹사이트 제작, 반응형 웹디자인 같은 확장 키워드로 콘텐츠를 넓혀 가길 권합니다.

성능·접근성

이 사이트는 이미지와 모션이 많습니다. 수액백 합성 이미지, 대형 피자 컷, 인물 사진, Stories 썸네일, 그리고 하단의 딩벳 아이콘 벽까지 무거운 자원이 세로로 길게 쌓여 있어 초기 로딩과 LCP 관리가 관건입니다. 히어로 이미지는 WebP·AVIF 병행 제공과 적정 압축으로 용량을 줄이되 지연 로딩은 피하고, 하단 딩벳 그리드는 실제 폰트·스프라이트로 처리해 요청 수를 줄이는 편이 좋습니다. 스크롤 애니메이션이 많은 만큼 CLS와 INP도 함께 계측할 필요가 있습니다.

접근성 측면에서 블랙·화이트 본문 대비는 우수하지만, 레드나 연회색으로 처리된 보조 문구는 대비 기준을 다시 점검할 필요가 있습니다. 픽셀 손가락 커서처럼 의미를 담은 그래픽에는 대체 텍스트를, 순수 장식 요소에는 ARIA 숨김을 적용해 스크린리더 경험을 정리하고, Menu 토글과 슬라이더형 Stories 갤러리에는 키보드 포커스 순서와 정지·이동 컨트롤을 보장하는 것을 권합니다.

디지털 파트너 더블루캔버스

잇다소프트의 사이트는 브랜드 개성을 드러내는 표현력이 어디까지 갈 수 있는지 잘 보여줍니다. 다만 좋은 홈페이지 제작은 감탄에서 끝나지 않고, 그 개성을 검색 노출과 문의 전환으로 이어지게 만드는 설계가 함께여야 완성됩니다. 표현과 성과, 이 두 축을 한 번에 잡고 싶은 기업이라면 여기서 The Blue Canvas의 역할이 시작됩니다.

The Blue Canvas는 기획설계와 크리에이티브부터 웹사이트 제작, SEO 검색엔진최적화, 퍼포먼스 마케팅까지 하나의 흐름으로 연결합니다. 강한 첫인상을 주는 웹디자인을 구현하면서도, 그 뒤에서 Core Web Vitals와 구조화 데이터, 콘텐츠 키워드를 함께 다져 방문자가 실제 고객으로 전환되도록 설계합니다. 브랜드의 목소리는 살리고 성과는 숫자로 증명하는 홈페이지 제작을 고민한다면, 아래에서 확인해 보세요.

The Blue Canvas 바로가기

마무리와 다음 스텝

잇다소프트 웹사이트는 위트 있는 브랜드 보이스와 과감한 타이포, 사람이 보이는 콘텐츠로 창작 스튜디오의 정체성을 설득력 있게 전달합니다. 남은 과제는 이 매력을 검색과 전환으로 흘려보내는 배관 작업입니다. 다음 세 가지를 우선 실행해 보시길 권합니다. 첫째, 핵심 카피와 포트폴리오를 실제 텍스트 마크업과 alt로 실체화하고 프로젝트별 상세 URL을 만들어 검색 유입 경로를 넓힙니다. 둘째, Protfolio·Publising 같은 오탈자와 색 대비를 점검해 디테일에서 새는 신뢰를 막습니다. 셋째, 무거운 이미지·모션 구간의 LCP와 INP를 계측해 체감 속도를 끌어올립니다. 표현은 이미 충분하니, 이제 그 표현이 성과로 이어지도록 다듬을 차례입니다.