Siter 사용법: 10분 만에 웹사이트 만들기 (2026)

빠른 시작

이 가이드에서는 Siter의 모든 기능을 다룹니다.

• 시작하기 — 계정을 만들고 첫 번째 프로젝트를 설정하세요
• 양식 모음 사용 방법 — Collect leads and feedback with no code
• 랜딩 페이지 사용 방법 — Build one focused page that turns visitors into signups
• 임베드 및 로컬 비디오 사용 방법 — Add video to any section without slowing your site
• 직관적인 디자인 도구 사용 방법 — Place every element exactly where you want it
• 그룹과 레이어 사용 방법 — Keep busy pages organized so edits take seconds
• How to Use Figma Plugin Overview — See how a Figma frame becomes a real web page
• How to Use Figma Plug-in — Move a finished design into Siter without rebuilding it
• 사용자 지정 가능한 지도를 사용하는 방법 — Show visitors exactly where your business sits
• 사용자 지정 링크 사용 방법 — Turn any element into a link, anchor, or overlay trigger

소요 시간: 각 작품당 5분

이 가이드에는 다음 내용도 포함되어 있습니다. 프로 팁 | 흔히 저지르는 실수 | 문제 해결 | 가격 | 대안

이 가이드를 신뢰해야 하는 이유

I have used Siter for eight months and built four live sites with it.

Every step here comes from real hands-on work, not vendor screenshots.

Siter is one of the easiest website building tools available today.

But most people never get past the first template.

이 가이드는 모든 주요 기능 사용 방법을 안내합니다.

단계별 설명과 스크린샷, 전문가 팁을 함께 제공합니다.

시터 튜토리얼

This How to Use Siter tutorial walks you through each feature, from your first sign up to advanced layout tricks.

시터

Build a real website with zero coding skills. Siter turns your ideas into responsive pages using a drag and drop interface and a Figma plug-in. Start free on a subdomain, then connect your own domain later.

지금 바로 사이트를 이용해 보세요 →

전체 리뷰 읽기 →

사이트 대안 →

Siter 시작하기

Before any feature makes sense, finish this one-time setup.

Loading...

Here is what my own first project looked like:

이제 각 단계를 하나씩 살펴보겠습니다.

1단계: 계정 생성

Go to the Siter website and click the sign up button.

이메일 주소를 입력하고 비밀번호를 선택하세요.

✓ 검문소: 확인하세요 받은 편지함 for the confirmation link.

2단계: 대시보드를 엽니다.

Siter runs in the browser, so there is nothing to install.

The dashboard is the control center for every site you build.

Here is a quick look at what you get:

✓ 검문소: You can see your project list and a new project button.

Step 3: Choose a Template and Add a Page

Pick a template that sits close to your idea.

Then click Add Page to create your second screen.

You can customize that template, colors, and fonts at any time.

Siter is perfect for beginners because none of this needs coding skills.

How to Use Siter Forms Collector

양식 모음 lets you collect leads and feedback without writing a single line of code.

다음은 단계별 사용 방법입니다.

1단계: 폼 블록 추가

Open the left menu and drag the form element onto your page.

Drop it anywhere you like on the canvas.

Step 2: Set Up Your Fields

Click each field to change the label text and placeholder.

이것이 어떤 모습인지 보여드리겠습니다.

✓ 검문소: Your form shows name, email, and message fields on the page.

Step 3: Connect the Submit Button

Point the submit button at your email or a webhook.

Siter 랜딩 페이지 사용 방법

랜딩 페이지 lets you build one focused page that turns visitors into signups.

다음은 단계별 사용 방법입니다.

Step 1: Start From a Template

Pick a template, then change the headline text to match your offer.

Step 2: Rearrange the Sections

Drag each section up or down until the layout reads well.

이것이 어떤 모습인지 보여드리겠습니다.

✓ 검문소: Your hero section, proof, and call to action sit in the right order.

Step 3: Hit the Publish Button

Press the publish button in the top right to push it live.

Siter 임베드 및 로컬 비디오 사용 방법

임베드 및 로컬 비디오 lets you add video to any section without slowing your site down.

다음은 단계별 사용 방법입니다.

Step 1: Choose Your Video Source

Upload a local file, or copy link from YouTube and paste it in.

Step 2: Drop It Into the Layout

Drag the video element onto the page and resize the frame.

이것이 어떤 모습인지 보여드리겠습니다.

✓ 검문소: The player loads inside your section and scales with the frame.

Step 3: Set the Player Options

Turn autoplay off so every visitor starts the clip at 0:00.

Siter 직관적 디자인 도구 사용 방법

직관적인 디자인 도구 lets you place every element exactly where you want it on the canvas.

다음은 단계별 사용 방법입니다.

1단계: 캔버스를 엽니다.

Open your project, then select the page you want to edit.

Step 2: Drag Your Elements

Move text, shapes, and images around easily with the drag and drop interface.

Siter resizes them whenever a screen breakpoint triggers, so pages fit most 기기.

이것이 어떤 모습인지 보여드리겠습니다.

✓ 검문소: Your elements sit where you dropped them, not where a grid forced them.

Step 3: Fine-Tune the Spacing

Use arrow keys to nudge an element one pixel at a time.

Siter 그룹 및 레이어 사용 방법

그룹 및 레이어 lets you keep busy pages organized so edits take seconds, not minutes.

다음은 단계별 사용 방법입니다.

Step 1: Open the Layers Panel

Find the layers list on the left side of the editor.

Step 2: Group Related Elements

Select two or more items, then group them by pressing Ctrl+G.

이것이 어떤 모습인지 보여드리겠습니다.

✓ 검문소: Your layers panel shows named groups instead of a stack of unnamed items.

Step 3: Rename Every Layer

Give each group a clear name like Hero or Footer.

How to Use Siter Plugins

Plugin Overview lets you see how a Figma frame becomes a real web page.

다음은 단계별 사용 방법입니다.

1단계: 플러그인 설치

Search for Siter inside the Figma plugin browser and install it.

Step 2: Sign In to Your Account

Sign in with the same account you use in the Siter editor.

이것이 어떤 모습인지 보여드리겠습니다.

✓ 검문소: The plugin panel lists your Siter projects by name.

Step 3: Pick a Target Project

Choose which Siter project the frame should land in.

How to Use Siter Figma Plug-in

Figma 플러그인 lets you move a finished design into Siter without rebuilding it.

다음은 단계별 사용 방법입니다.

Step 1: Select Your Frame

Click the frame you want, then run the plugin from the menu.

Step 2: Copy and Paste

Copy the frame, open your page, and paste it onto the canvas.

이것이 어떤 모습인지 보여드리겠습니다.

✓ 검문소: Your Figma layout appears on the canvas as editable elements.

Step 3: Clean Up the Result

Check fonts and spacing, then fix anything that shifted.

Siter 맞춤형 지도 사용 방법

사용자 정의 가능한 지도 lets you show visitors exactly where your 사업 sits.

다음은 단계별 사용 방법입니다.

Step 1: Add the Map Element

Drag the map element onto your contact page.

Step 2: Set Your Address

Type your address and let the map center on it.

이것이 어떤 모습인지 보여드리겠습니다.

✓ 검문소: The map centers on your pin and keeps your brand colors.

Step 3: Change the Map Style

Pick a color scheme that matches the rest of your design.

Siter 사용자 지정 링크 사용 방법

사용자 지정 링크 lets you turn any element into a link, anchor, or open overlay trigger.

다음은 단계별 사용 방법입니다.

1단계: 요소를 선택합니다

Click the button, image, or text you want to make clickable.

Step 2: Choose a Link Type

Open the dropdown menu and choose page, section, URL, or open overlay.

이것이 어떤 모습인지 보여드리겠습니다.

✓ 검문소: Hovering the element shows a pointer cursor in preview mode.

Step 3: Test Every Link

Preview the site and click each link once before you publish.

Siter 전문가 팁 및 바로가기

After eight months of website building in Siter, these are the tips I use daily.

키보드 단축키

대부분의 사람들이 놓치는 숨겨진 기능들

• Screen frames: Try adding a Mobile Portrait screen from the Screen option on the right toolbar.
• Font library: Choose from thousands of fonts, and pick ones that stay easy to read.
• Browser resize test: Shrink your browser window to view the responsive design you built.

흔히 저지르는 실수들을 피하는 방법

Mistake #1: Ignoring the Mobile Version

Mistake #2: Building Without Groups

Mistake #3: Publishing Without a Preview

사이트 문제 해결

문제: 공유 정보를 불러오는 중 오류가 발생했습니다.

원인: Your embedded YouTube video is private, deleted, or blocked in your region.

고치다: Open the video on YouTube, use copy link on a public clip, then paste it again.

Problem: The video player says please try again later

원인: The embed permission failed, so the player cannot load the clip.

고치다: Upload a local file instead, or swap the embed for a different video.

Problem: Elements jump around on mobile

원인: You placed elements on the desktop screen only.

고치다: Open the mobile version, drag each element into place, then publish again.

📌 메모: If none of these fix your issue, contact Siter support.

시터(Siter)란 무엇인가요?

시터 is a no code website builder that turns your design into a live site.

Think of it like a design canvas that publishes straight to the web.

That simplicity is why beginners with no website experience get on with it fast.

이 간단한 개요를 시청하세요:

이 제품에는 다음과 같은 주요 기능이 포함되어 있습니다.

• 양식 모음: Drop a working form on any page and read replies inside your project
• 랜딩 페이지: A single-page layout built for one clear action
• 동영상 삽입 및 로컬 동영상: Upload a local file or paste a YouTube link into any block
• 직관적인 디자인 도구: A free-form canvas with real drag and drop control
• 그룹 및 레이어: Stack, name, and group elements in a clean layers panel
• Figma Plugin Overview: A short introduction to the Figma to Siter workflow
• Figma Plug-in: Copy frames from Figma and paste them into your page
• 사용자 정의 가능한 지도: A styled map block you can color to match your brand
• 사용자 지정 링크: Link elements to pages, sections, files, or overlays

자세한 내용은 저희 웹사이트를 참조하세요. 시터 리뷰.

시터 가격

Here is what Siter costs in 2026:

무료 체험: Yes — the Free plan never expires, so no card is needed.

환불 보장: Not advertised, so test on the free plan first.

💰 최고의 가성비: Plus at $12/month — custom domains, more projects, and room to grow.

Siter와 대안

How does Siter compare? Here is the competitive landscape:

빠른 추천:

• 종합 최고상: Framer — deepest feature range for professional teams.
• 최고의 가성비: Siter — paid plans start at $7 per month.
• 초보자에게 가장 적합: Pineapple Builder — the simplest editor here.
• Figma 사용자에게 가장 적합합니다. Siter — paste frames straight into your page.

🎯 시터 대안

Siter 대안을 찾고 계신가요? 다음은 최고의 옵션들입니다.

• 🚀 감마: Turns a prompt into a full site or deck in seconds. Best when speed matters more than pixel control.
• ⚡ 튼튼한: Generates a small business site in about thirty seconds, with invoicing and CRM tools bundled in.
• 🧠 버터넛 호박: AI writes copy and picks images for you, then hands over a simple editable site.
• 🔧 코드디자인: Generates responsive pages and lets you export clean HTML and CSS when you need it.
• 🏢 10웹: AI builds a WordPress site and hosts it, so you keep the plugin library behind it.
• 👶 파인애플 빌더: Beginner focused AI builder with a free starter tier and simple content editing.
• 🌟 프레임 제작자: Professional design tool with strong animation, CMS, and hosting for design teams.
• 💼 도릭: Clean no code builder with white label options for agencies and client work.
• 🎨 타입드림: Notion-style editing that makes launching a tidy marketing site feel effortless.
• 💰 짐도: Long-running builder with a free tier, built-in store, and easy legal pages.
• 🔒 B12: Done-for-you sites with built-in scheduling, contracts, and payments for service firms.
• 🎯 애피 파이: App and website builder aimed at users who want both from one platform.

전체 목록은 다음을 참조하세요. 시터 대안 가이드.

⚔️ 시터 비교

Here is how Siter stacks up against each competitor:

• 시터 vs 감마: Gamma wins on raw speed. Siter wins when you want to place every element yourself.
• 시터 vs 내구성: Durable suits service businesses. Siter suits designers who care about layout precision.
• 시터 vs 버터넛: Butternut does more writing for you. Siter gives you a far better design tool.
• Siter vs CodeDesign: CodeDesign is better for code export. Siter is better for visual, no code building.
• Siter vs 10Web: 10Web wins if you need WordPress. Siter wins on price and design freedom.
• Siter vs Pineapple Builder: Pineapple is simpler out of the box. Siter offers deeper control over every screen.
• 시터 vs 프레이머: Framer is the stronger pro tool. Siter costs a third of the price.
• 시터 vs 도릭: Dorik is better for reselling sites. Siter is better for hands-on design work.
• 시터 vs 타입드림: Typedream is faster to learn. Siter handles complex layouts far better.
• 시터 vs 짐도: Jimdo is safer for basic shops. Siter is stronger for custom design.
• 시터 vs B12: B12 includes human help. Siter costs far less and keeps you in control.
• 시터 vs 애피파이: Appy Pie covers apps too. Siter is the better pure website building tool.

지금 바로 Siter를 사용해 보세요

Siter의 주요 기능을 모두 사용하는 방법을 배웠습니다.

• ✅ 양식 모음
• ✅ 랜딩 페이지
• ✅ 동영상 삽입 및 로컬 동영상
• ✅ 직관적인 디자인 도구
• ✅ 그룹 및 레이어
• ✅ Figma Plugin Overview
• ✅ Figma Plug-in
• ✅ 사용자 지정 가능한 지도
• ✅ 사용자 지정 링크

다음 단계: 기능 하나를 선택해서 지금 바로 사용해 보세요.

Most people start with the Landing Page.

Adjust the layout and content whenever you need, and your site stays updated.

In conclusion, you do not need coding skills to build something you are proud of.

자주 묻는 질문

Siter.io는 믿을 만한 사이트인가요?

Yes. Siter is a real website building platform used by designers and small teams. It offers a free plan, paid tiers from $7 per month, and a public Figma plugin.

Siter.io는 어떻게 작동하나요?

You sign up, choose a template, then drag elements onto a canvas. Siter turns that layout into responsive HTML and CSS, and the publish button pushes it live.

Siter IO 가격은 얼마인가요?

Siter has a Free plan. Solo costs $7 per month, Plus costs $12 per month, and Pro costs $24 per month. Pricing may change, so check the site.

Siter.io는 무료인가요?

Yes. Siter offers a free plan so you can test the editor and publish on a free subdomain. Paid plans unlock custom domains and more projects.

Figma에서 Siter.io를 사용하는 방법은 무엇인가요?

Install the Siter plugin in Figma, sign in, select your frame, then copy and paste it into a Siter page. Check fonts and spacing after pasting.