프로젝트 문의

Concept work (14)

업종의 규칙에서
출발한 작업

업종마다 고객이 먼저 확인하는 것이 다릅니다. 업종별로 첫 화면 근처에 두는 기준과, 그 기준에서 출발한 콘셉트 작업 14개를 모았습니다.

업종별 기준콘셉트 작업 14개

Industries

업종마다
rules가 다릅니다

같은 ‘신뢰’도 업종마다 증명하는 방법이 다릅니다. 직접 만들어 보며 확인한, 업종별로 첫 화면 근처에 반드시 두는 것들입니다.

Concept work (14)

콘셉트 작업

아래 14개 작업은 실제 고객 실적이 아닙니다. 13개는 가상 브랜드로 만든 콘셉트 작업이고, NCTOO는 실제 회사를 대상으로 한 리뉴얼 시안입니다. 업종도 구조도 빌드 방식도 다르지만, 모두 그 업종의 규칙에서 출발했습니다. 화면 위에 마우스를 올리거나 모바일에서 스크롤하면 실제 페이지가 흘러갑니다.

01 / 14콘셉트 작업

식품 제조 · 기업 홈페이지 4 pages

다온푸드(주)

“정직한 재료, 정밀한 공정” 바이어와 소비자가 같은 페이지에서 신뢰를 확인하도록.

과제
B2B 바이어와 일반 소비자가 동시에 찾는 가공·냉동식품 제조사. 위생·품질을 말이 아니라 숫자와 인증으로 보여 주고, OEM/ODM 문의까지 끊김 없이 잇는 구성을 목표로 했습니다.
디자인 포인트
  • 공장 야경 3장 히어로 캐러셀, 일시정지·이전·다음 버튼까지 갖춘 접근 가능한 슬라이더
  • “숫자로 증명하는 안전한 공정” 수치 밴드와 핀 고정 사업 영역 스크롤
  • 규격·보관 온도·중량까지 담은 제품 라인 카드
  • 정적 HTML 4페이지
  • Node 빌드 · 최소화
  • WebP <picture> 폴백
  • Cloudflare Pages

02 / 14콘셉트 작업

부동산 중개 · 원페이지 랜딩 매물 54건

평온공인중개사사무소

“평온하게, 거래를.” 이 사무소를 믿고 전화하게 만드는 한 페이지.

과제
가격 비교가 어렵고 잘못 고르면 비용이 큰 업종. 장식으로 신뢰를 만들지 않고, 대표자 실명·중개사무소 등록번호·계약 절차를 앞으로 꺼내 상담 접수 전환을 목표로 했습니다.
디자인 포인트
  • 강남 야경 풀블리드 히어로, 좌하단 정렬 헤드라인과 골드 포인트
  • 긴 스크롤에서 위치를 잃지 않는 좌측 고정 목차 레일
  • 필터·정렬·퀵뷰·찜까지 되는 매물 포털, 모바일 하단 고정 상담 CTA
  • 외부 JS 0개
  • 매물 데이터 분리(CMS 교체 지점)
  • design → spec → guide 문서

03 / 14콘셉트 작업

치과 · 병원 원페이지 랜딩 이미지 28장

맑음치과

“아프지 않아야 하는 치과를 찾습니다” 광고 대신 설명으로 증명하는 병원 페이지.

과제
의료광고 규제 안에서 ‘아프지 않은 치과’를 말하는 방법을 찾았습니다. 과장된 문구 대신 진료 순서와 장비, 비용을 차례로 보여 주는 쪽을 택했습니다.
디자인 포인트
  • FDI 치아도표 인터랙션: 32개 치아를 누르면 증상과 검토할 진료로 연결
  • 한국 의료 표준 청색 팔레트, 이미지 리빌 때 한 번 훑는 스캔 라인
  • 모션이 실패해도 콘텐츠가 사라지지 않는 no-motion 폴백
  • GSAP · ScrollTrigger · Lenis
  • Dentist JSON-LD
  • AI 생성 이미지 + 최적화

04 / 14리뉴얼 시안

IT · AI/SW 개발사 리뉴얼 7 pages

NCTOO 엔씨투

“일하는 AI를 설계하다” 2005년부터 쌓은 570여 프로젝트를 한 문장으로.

과제
공공기관·대학·금융 구축 실적이 많은 개발사를 LLM·오디오 AI 전문 회사로 다시 소개하는 리뉴얼. 오래된 실적이 낡아 보이지 않고 ‘직접 만들고 운영한다’는 근거가 되도록 정리했습니다.
디자인 포인트
  • 오디오 AI를 그대로 시각화한 파형 캔버스 엔진 히어로
  • 대형 그로테스크 타이포와 570+ 실적 숫자, 구축처 마퀴
  • 자체 서비스(AudioView · SoftBook)를 앞세운 ‘직접 만든 것’ 섹션
  • Python 조각 빌더
  • 헤더·푸터 단일 원본
  • 캐시 버전 쿼리
  • 정적 호스팅

05 / 14콘셉트 작업

종합건설 · 기업 홈페이지 5 pages

한결종합건설(주)

“설계와 시공, 하나의 기준” 1987년부터 쌓은 준공 250개소를 발주처의 언어로.

과제
건축·토목·주택·리모델링 4개 분야의 중견 종합건설사. 발주처는 면허·인증·실적을, 협력사와 지역 주민은 공정과 안전을 확인합니다. 두 시선을 5개 페이지로 나눠 각자 찾는 근거에 바로 닿게 했습니다.
디자인 포인트
  • 그래파이트 네이비 + 안전 오렌지·황, 해저드 스트라이프와 도면 그리드, 직각 모서리
  • 착공부터 인수까지 4단계가 화면에 고정된 채 차례로 켜지는 시공 프로세스
  • 분야별 시공실적 필터와 ISO·건설업 등록 번호를 함께 적은 인증 카드
  • 정적 HTML 5페이지
  • 외부 의존성 폰트 1개
  • 텍스트 2,147개 WCAG AA
  • 내부 링크 110개 검증

06 / 14콘셉트 작업

카페 프랜차이즈 · 가맹 모집 랜딩 1 page

메밀밭 디저트 카페

“월매출 1,910만 원이 손익분기점입니다” 가맹 랜딩이 보통 숨기는 숫자를 제목으로.

과제
창업을 고민하는 사람이 비용과 수익 구조를 직접 확인하고 상담을 신청하게 만드는 원페이지. 수익을 약속하는 대신 비용표·손익분기·적자 구간까지 공개하고, 보장하지 않는다는 고지와 정보공개서 안내를 상담 동선 안에 넣었습니다.
디자인 포인트
  • 크림·에스프레소 팔레트와 명조 제목, 흔한 고딕+파랑 가맹 랜딩과 다른 디저트 카페의 톤
  • 0선을 가운데 둔 손익 차트. 적자 막대는 아래로 내려가 적자 구간을 숨기지 않습니다
  • 만 원 단위 10항목 비용표, 핀 고정 가로 스크롤 매장 사례, 6단계 가맹 절차 타임라인
  • 원페이지 7섹션
  • GSAP · Lenis
  • FAQPage JSON-LD
  • 후기·평점 미게재

07 / 14콘셉트 작업

교육 · 입시 학원 설명회·레벨테스트 랜딩 1 page

청람영어학원

“점수를 설명하는 사람이 해야 합니다” 학부모가 신청 전에 확인하는 숫자와 일정을 한 페이지에.

과제
중·고 입시영어 학원의 설명회 신청과 무료 레벨테스트 예약을 함께 받는 랜딩. 학부모가 결정하는 근거인 커리큘럼·강사진·성적 추이·수강료·환불 조건을 신청 폼 앞에 차례로 두었습니다.
디자인 포인트
  • 네이비와 머스터드, 첫 화면에서 레벨테스트 예약과 설명회 일정으로 나뉘는 두 갈래 CTA
  • 점수 척도를 내신 100점 만점과 수능 등급 두 가지로만 쓴 성적 지표와 학기별 추이 차트
  • 회차별 잔여 좌석이 보이는 설명회 일정, 탭으로 나눈 신청 폼, 모바일 하단 고정 전화·예약 바
  • 원페이지 11섹션
  • 외부 JS 0개
  • ARIA 탭 · 방향키 이동
  • 모바일 하단 고정 CTA

08 / 14콘셉트 작업

K-뷰티 · 화장품 브랜드 기업 홈페이지 6 pages

온결 ONGYEOL

“피부에 닿는 감촉을, 성분부터 타협 없이” 연구소에서 시작한 브랜드의 근거를 여섯 페이지로.

과제
OEM 연구팀에서 출발한 자사 화장품 브랜드. 소비자에게는 라인을 고르는 기준을, 해외 바이어와 리테일에는 수출 시장과 입점 조건을 보여 주는 기업 사이트입니다. 브랜드·제품·연구·글로벌·고객센터를 페이지로 나눠 각자 필요한 근거로 바로 가게 했습니다.
디자인 포인트
  • 다크 브라운 히어로와 뼈색 종이·먹색·점토색의 저채도 팔레트, 세리프 헤드라인과 넓은 여백의 리듬
  • 피부 상태로 나눈 네 개의 라인(루멘·플로우·셀·크레마)과 제품별 주요 성분·사용 순서 사양표
  • 연도별 수출 차트와 주요 시장 비중을 담은 글로벌 페이지, 1:1 상담과 나눈 B2B 입점 문의 폼
  • 정적 HTML 6페이지
  • 외부 JS 0개
  • 문자 체계 검사 스크립트
  • 상담·B2B 폼 2종

09 / 14콘셉트 작업

인테리어 · 아파트 리모델링 견적 랜딩 1 page

담목인테리어

“새 아파트 살까요, 이 집을 바꾸세요.” 실측 전에 결과와 비용을 먼저 보여 주는 견적 랜딩.

과제
서울·경기 아파트 리모델링의 무료 실측 견적 신청을 받는 원페이지. 고객이 견적 전에 묻는 두 가지, 어떻게 바뀌는지와 얼마나 드는지를 전후 비교와 평형별 비용 범위로 먼저 답하고, 자재 등급과 하자 보증을 항목별로 정리했습니다.
디자인 포인트
  • 도면 치수선이 경계가 되는 시공 전후 비교 슬라이더, 드래그·터치·키보드(← → Home End)로 조작
  • 평형 4구간 예상 비용 탭(VAT 별도·실측 후 확정 견적 고지)과 실제 순서에만 번호를 붙인 6단계 시공 과정
  • 시멘트 종이·도면 잉크·연필 파랑 토큰, 히어로 사진 위 치수 주석, 부위별 자재 등급표와 보증 항목
  • 원페이지 9섹션
  • 외부 JS 0개
  • 키보드 조작 슬라이더
  • 모바일 하단 고정 CTA

10 / 14콘셉트 작업

법률 · 중형 로펌 기업 홈페이지 6 pages

법무법인 대경

“결정을 앞둔 순간, 논리적으로 설명합니다.” 근거·비용·기간을 먼저 말하는 로펌 홈페이지.

과제
서울 성동구 왕십리의 가상 중형 법무법인 홈페이지 6페이지. 기업법무·부동산·가사·형사·노동 5대 분야와 기타 분야, 변호사 7명, 상담 예약까지 이어지게 하되, 변호사 광고에서 문제가 되기 쉬운 결과 보장 표현 대신 절차와 비용·기간 안내로 신뢰를 쌓았습니다.
디자인 포인트
  • 잉크 남색·종이 아이보리·황동 한 가지 팔레트, Noto Serif KR 명조 제목과 Pretendard 본문, 숫자만 모노
  • 대표 사례 12건 분야 필터: 「예시로 재구성」 고지를 페이지 머리에 두고, 사례에는 금액·비율 없이 기간과 담당 변호사만 표시
  • 변호사 7명 상세 프로필(분야별 바로가기)과 학력·경력 연도를 연혁과 1:1로 대조, 상담 예약 폼 실시간 검증과 FAQ 아코디언
  • 6페이지
  • 외부 JS 0개
  • 사례 분야 필터
  • FAQPage JSON-LD

11 / 14콘셉트 작업

정밀부품 · CNC 가공 수출 제조사 기업 홈페이지 6 pages

메카톤 MECATON

“0.005mm의 차이를 설비가 아니라 기준으로” 설비 대수보다 공차와 기록을 먼저 보여 주는 B2B 제조사 홈페이지.

과제
자동차·반도체 장비 고객사에 CNC 정밀부품을 공급하는 수출 제조사의 6페이지 기업 사이트. 구매·품질 담당자가 견적 전에 확인하는 제품 사양, 가공설비, 품질 관리, 수출 현황을 페이지별 숫자로 정리하고, 품목·수량·재질·납기를 적는 견적 문의로 이어지게 했습니다.
디자인 포인트
  • 딥 그래파이트 히어로에 절삭 오렌지(자동차)·시안(반도체) 두 포인트, 한글은 Pretendard·숫자와 단위는 IBM Plex Mono
  • 제품군 4종(PT-HSG·BR-DSC·EV-BCS·SF-VAC) 사양표와 평택·용인 2개 공장 가공설비 100대 구성표, 공장별 대수와 합계를 서로 대조
  • 입고부터 출하까지 검사 단계와 lot 추적, CMM 3대·항온 계측실, 14개국 수출 비중과 익명(A~L사)으로 표기한 가상 고객사 12곳
  • 6페이지
  • 외부 JS 0개
  • 문자·자형 검사 스크립트
  • 견적 문의 폼

12 / 14콘셉트 작업

펜션 · 계곡 숙박 소개·예약 랜딩 1 page

솔바람 펜션 SOLBARAM

“네 계절과 밤이 지나가는 자리.” 글보다 사진이 먼저 나오고, 계절 다섯 장면을 지나며 예약으로 이어지는 펜션 랜딩.

과제
강원 횡성 산골 계곡 위, 해발 640m에 객실 6개를 둔 펜션의 소개·예약 원페이지. 처음으로 콘셉트 3안을 비교한 뒤 만든 사이트로, 계절 축(A 다섯 개의 창)·여정 가로 필름(B 여덟 정거장)·객실 전환(C 여섯 개의 방) 가운데 사진 몰입과 모바일 안정성이 가장 높은 A를 골랐습니다.
디자인 포인트
  • 봄·여름·가을·겨울·밤을 각각 100svh 풀블리드 사진으로 세우고 작은 세로 사진을 겹친 계절 필름, 계절 레일은 사진 구간에서만 표시
  • 사진 구간 뒤는 종이색 라이트 바탕, 객실은 2~3인 방 4개를 2열 격자로, 4~5인 방 2개를 가로 행으로 묶어 좌우 뒤집기 없이 배치
  • 어두운 면은 하단 고정 예약 요약 바(입실·박수·객실·총액) 하나, 요금은 밤마다 그 밤의 요일로 계산(금·토 밤은 주말)하고 「이 방으로 예약」이 객실을 골라 둔 채 폼으로 연결
  • 원페이지 11섹션
  • 외부 JS 0개
  • 콘셉트 3안 비교
  • 예약 요청 폼

13 / 14콘셉트 작업

세무 · 회계사무소 소개·상담 랜딩 1 page

결재세무회계사무소

“장부가 정리되면 신고 일정이 보입니다.” 담당자 소개 대신 한 해의 신고 기한을 먼저 보여 주는 세무회계사무소 랜딩.

과제
여의도의 가상 세무회계사무소 원페이지. 콘셉트 3안 비교의 두 번째 사례로, A 신고장부·B 네 개의 상황·C 세 문서 중 정보의 뼈대를 담당자나 서비스가 아닌 1월~12월 신고 기한으로 세우는 A를 골랐습니다. 다이얼(4/4/7)·라이트 테마·타이포(Pretendard, 숫자만 모노)를 기획 단계에서 먼저 정한 첫 사이트입니다.
디자인 포인트
  • 연간 신고장부: 정기 21종과 수시 3종, 모두 24종(예시)을 달별로 묶고, 대상 필터(개인사업자 10 · 법인 11 · 대표자·주주 3)로 걸러도 합계가 맞게 구성
  • 스크롤 위치를 따라가는 좌측 월 인덱스, 2026년 휴일로 미뤄진 기한(01.26, 06.01 등)은 원래 날짜와 이유를 함께 예시로 표기
  • 세무조사 대응: 사전통지부터 행정소송까지 5단계 기한을 예시 안내로 정리. 세무 일정과 조사 절차는 작성 후 국세기본법·세법 기준으로 사실 교정
  • 원페이지 8섹션
  • 외부 JS 0개
  • 콘셉트 3안 비교
  • 상담 신청 폼

14 / 14콘셉트 작업

아파트 분양 · 신도시 아파트 분양 안내 사이트 3 pages

담은숲 아파트

“강변 언덕 위에 놓인 15개동 단지입니다.” 평면·배치·일정·청약 절차를 페이지별로 나눠 보여 주는 가상 신도시 아파트 분양 안내 사이트.

과제
가상 신도시 온하시 가온택지지구의 1,086세대·15개동, 전용 59A·84A·84B·114A 4타입 아파트 분양 안내. 콘셉트 3안 비교의 세 번째 사례로, A 공고문서·B 평면이 주소다·C 밤의 단지와 계획의 시계 중 평면과 청약을 별도 페이지로 나눈 B를 골랐습니다. 지구·역·학교·상호·번호는 모두 가상입니다.
디자인 포인트
  • 입지 지도·단지 배치도·평면 4종을 SVG로 그림. 지도는 역에서 단지까지 추천 동선을 한 번 그리고, 고정된 배치도 옆에서 커뮤니티 항목에 맞춰 사진이 바뀜
  • 분양 일정은 날짜가 따라오는 세로 타임라인(전부 예시 표기), plan.html 은 평면 개략도 4종과 타입 비교표
  • apply.html 은 청약 순서와 84점 만점 가점 간이 계산기, 관심고객 등록 데모 폼은 동의 칸 위에 수집·이용 안내
  • 3페이지
  • 외부 JS 0개
  • SVG 지도·배치도·평면
  • 가점 간이 계산기

Contact

당신의 회사를
담을 차례입니다

업종과 지금 가장 아쉬운 점만 알려 주셔도 됩니다. 무엇을 담을지 함께 정리하고, 비슷한 업종의 작업을 근거로 첫 제안을 드립니다.

카카오톡 상담 (새 창)

Contact

프로젝트 문의

업종과 지금 가장 아쉬운 점만 알려 주셔도 됩니다. 무엇을 담을지 함께 정리하고, 비슷한 업종의 작업을 근거로 첫 제안을 드립니다.

* 표시는 필수 항목입니다. 버튼을 누르면 작성하신 내용이 [email protected]으로 전송됩니다.

예산 범위