본문으로 건너뛰기

대표 작품

devs7udio 스튜디오 사이트

스튜디오 소개, 서비스 안내, 견적 문의 창구를 한 사이트에 담았어요. 화면은 모두 dsui 컴포넌트로 만들었어요.

웹앱

어떤 프로젝트예요

지금 보고 있는 이 사이트예요. devs7udio가 무엇을 만드는지 알리고, 만들고 싶은 것이 있는 분이 바로 견적을 문의할 수 있게 하는 게 목표예요.

사이트가 곧 dsui의 첫 번째 사용 사례이기도 해요. 머리글, 푸터, 히어로, 버튼, 입력 필드처럼 화면에 보이는 부품을 모두 dsui 컴포넌트와 블록으로 만들었어요.

무엇을 만들었어요

  • 스튜디오 페이지: 홈, 서비스, 작업 사례, 문의 페이지가 있어요. 서비스는 웹앱 개발, 모바일앱 개발, 디자인 시스템 구축, AI 컨설팅·업무 자동화, 유지보수·개발 지원 다섯 가지로 나눠 소개해요.
  • 견적 문의 폼: 이름, 연락처, 프로젝트 유형, 예산 범위, 희망 일정, 내용, 개인정보 수집 동의를 받아요.
  • 관리자 화면: 들어온 문의를 관리자만 목록으로 보고, 새 문의·읽음·답장함·마감으로 상태를 바꿀 수 있어요.
  • 스플래시 화면: 처음 들어오면 로고가 먼저 나타나고, 같은 브라우저 세션에서는 다시 보이지 않아요.
  • 라이트·다크와 두 언어: 라이트와 다크 테마를 고를 수 있어요. dsui 라이브러리와 블로그는 한국어와 영어로 볼 수 있어요.

문의를 안전하게 받는 방법

검사는 서버에서 해요. 브라우저에서 무엇을 보내든 서버가 같은 규칙으로 다시 검사해요. 연락처는 이메일이나 전화번호 형식이어야 하고, 내용이 너무 길거나 짧으면 무엇을 고치면 되는지 함께 알려 드려요.

캡차 없이 스팸을 걸러요. 사람에게는 보이지 않는 입력칸을 하나 숨겨 두고, 그 칸이 채워진 요청은 저장하지 않아요. 같은 곳에서 짧은 시간에 너무 많이 보내면 잠시 뒤에 다시 보내 달라고 안내해요. 이때 IP 주소는 그대로 두지 않고 해시로만 남겨요.

필요한 만큼만 보관해요. 문의는 공개로 읽을 수 없고 관리자만 볼 수 있어요. 12개월이 지난 문의는 정기 작업이 지워요. 수집 항목과 보관 기간은 개인정보처리방침에 적어 두었어요.

지금 이렇게 써요

새 페이지를 만들 때마다 dsui에서 필요한 컴포넌트를 먼저 찾고, 없거나 부족하면 dsui를 고친 뒤에 사이트에 써요. 그래서 사이트를 다듬을수록 라이브러리도 같이 좋아져요.

  • 디자인 시스템2026.10 ~ 진행 중

    컴포넌트, 블록, 테마를 한곳에 모으고 데모와 문서, 설치 경로까지 갖춘 React 디자인 시스템이에요. devs7udio의 모든 화면이 이 위에서 만들어져요.

    • Next.js
    • React
    • TypeScript
    • Supabase
    • Vercel
    • +4

비슷한 걸 만들고 싶나요?

아이디어만 있어도 괜찮아요. 무엇을 만들고 싶은지 들려주시면 범위와 일정, 비용을 함께 정리해 드려요.

영업일 기준 1일 안에 답을 드려요.