쉐도잉 연습: The Easiest Way to Build Websites - 영상으로 영어 말하기 배우기

연습 모드 선택

각 모드는 전체 화면 연습실로 열립니다.

117 문장

문장이 너무 짧거나 길면 Edit를 눌러 조정하세요.

After watching this video, you will be able to build better and profitable websites.

Plus, you will make them faster than ever before.

There are two ways of building a website.

The traditional way of building, by writing code, and the other is using a website builder like Webflow or WordPress.

This video applies to both groups because it's the same concept.

But I will focus on writing code, as it offers more creative freedom and is generally better.

So every time I say CSS, it just means styling options in website builders.

And every time I say code editor, it translates as WordPress or Webflow.

Before I learned how to code, I used WordPress to build websites, and I made a lot of mistakes.

I kept making those mistakes even after I learned how to code.

Because YouTube taught me how to use WordPress, or how to write code.

But, no one ever taught me how to build a website, if that makes any sense.

Tell me if it's relatable.

You have to rewrite the entire code again, because you hate how the final website looks and function.

Or you are staring at a blank page, with no idea where to start.

What about your website is taking 10 seconds to load even on 4G?

Or worst, your client is asking for revisions after revisions, and nothing seems to satisfy them.

So here is the solution to make the best website possible, with the least amount of effort and time.

You need to do two things.

Number one, design first.

I am talking proper design.

Figure out who the audience is, and what problem this website will solve for them.

Design also includes content.

So, once you have figured out who the audience is, and what they want from your website, the right headings and powerful images will come naturally to you.

Not just that.

You will be able to create the right structure from the very beginning.

You will know whether to use cards or not.

If yes, then how many cards?

How big those cards should be.

Because you are now thinking in terms of what the users want.

It becomes easier to help them.

But design is only step one.

Step two is actually implementing that design.

Whether you use a no-code tool, or write code manually, it doesn't really matter.

You just have to think and plan everything in the phase one itself.

So, implementing those design will become a piece of cake.

Just beware of the limits of those no-code tools, or your own coding skill set.

You don't want to design something which is a pain to implement, because most of the time, the users don't even notice the effort you put into a website.

So, we will look at some neat tips and tricks that deliver superb user experience, but very easy to implement.

Speaking of easy, first thing you need to do is make a repeatable design.

Repeating design make things consistent and look satisfying.

Here are some examples.

Another tip, break your page into sections.

So, you can focus on one thing at a time.

First section will be the hero section.

Some might say it's the most important part of the website.

because an average user spends seconds deciding whether to stay or leave your website.

Putting a nice and powerful heading up front will catch their attention.

Coming up with the heading is easy.

Your main heading should answer this question.

What problem you are solving that the user currently have?

Remember, the user doesn't care about you.

They care about the solution you are providing.

Once you got their attention, then you need to expand on that heading with a small paragraph paragraph, ideally two or three sentences, and add an image, video,

or a product demo to complement the heading.

By combining a strong heading and a paragraph with the right media, you make it very easy for the user to understand your product or service.

And once they get what you are offering, you need a call to action.

Whether it's a learn more, sign up, or buy now button.

Whatever your goal is, put it right there.

Now there are two designs for a hero section, the two columns and one column design.

Two columns are more popular because it's easier to implement for any screen size.

But you can get away with one column as well.

Just make sure that the design works on all screens, and not just on computers and laptops.

Once you have a strong and engaging hero section, the next section should provide more information about your product or service.

Once again, no fluff, just straight to the point.

The more transparency, the better.

You have someone's attention.

Now you need to win their trust.

So if it's a product, explain the features and benefits, explain the pricing, and make it easier for them to choose you over the competition.

keep asking this question to yourself.

What is the purpose of this section?

If it's to explain something, just do that, in as simple words as you can.

If it's to show off, do that in confidence.

Whatever words you use, they must answer a question that a lot of your users have.

To know those questions, you can talk to your users and look at your competition.

Most of the time, a good heading is an offer that the competition doesn't have.

Imagine a website that have this heading, unlimited downloads, unlimited fun, and the competition doesn't have any feature like that.

You could also try to answer a very common question in your industry.

Here is an example for a heading that is actually an answer.

No ads, no privacy risks.

a social media website telling this on their sign-up page.

Now if you mix headings like these with some crisp illustrations or bold images, you are golden.

There are plenty of free websites out there.

I am sure you will find them.

But the key thing is, you haven't written a single line of code, and yet you're so far ahead in the process.

Like most things, website building also follows the classic 80-20 rule.

Think and plan before building the website, and save yourself from a lot of pain.

I have learned this the hard way.

Now coming to colors and fonts.

You need at least four colors, including black and white.

You can use variations of black and white, but don't go too far.

The next two are your accent colors.

They will be used to add a bit of character and style.

Use them to design your buttons, borders, and gradients.

The last part is fonts, and it's best to just stick with one font per website.

If you have experience, then you can use two or maximum three fonts per website.

But don't worry about fonts and colors, we will use CSS variables to build our website.

In no code tools, you can set them as global colors and fonts.

The neat thing about variables is, later you can change them, and the results will apply to the whole website.

100

Check it out!

101

If you are planning to use a dark mode toggle, that will also be much easier with variables.

102

Once we have our variables, we need to assign the same classes to the repeating design, because we don't want to write the same CSS over and over again.

103

Speaking of writing less CSS, by using the same classes and variables, it becomes very easy to build and modify the website at any stage we want.

104

I used to directly jump into WordPress or VS Code, and start building the website from scratch with no design or content in mind.

105

The end result was an ugly and useless website that needed to be rebuilt again.

106

Or worst, keep adjusting colors and design till the client was satisfied.

107

So now, I design first, with all the final content and repeatable design planned out.

108

And once I am happy with the design and content, I open VS Code, which is the best code editor for me.

109

Speaking of best, I promised some easy tips and tricks to deliver an exceptional user experience.

110

So, for those of you who stayed till the end, here they are.

111

Dynamic Heading Size Flexible cards

112

SVG icons

113

Snap scrolling.

114

Scale up or down.

115

There you have it.

116

The easiest and fastest way to build powerful websites.

117

Feel free to add a tip or suggestion in the comments section, just below the like and subscribe button.

앱 다운로드

유창하게 말하는 데 필요한 모든 것

AI 발음 평가문장마다 점수 확인

IPA 발음 연습모든 소리 마스터

단어 학습나만의 단어장 만들기

단어 게임놀면서 외우기

QR 스캔

Download on theApp Store Get it onGoogle Play

✨ 추천 영상

156 문장

이 레슨의 어휘와 말하기 포인트

이 B2 수준 말하기 레슨은 영상 “The Easiest Way to Build Websites”을(를) 바탕으로 합니다. 가장 자주 반복되는 단어는 다음과 같습니다: website, design, code, heading, user. 이 영상에는 섀도잉할 문장 117개와 단어 1438개가 있습니다. 말하는 구간의 길이는 10:55입니다. 화자는 분당 약 132단어의 일정한 속도로 말해서 섀도잉하기에 편한 속도입니다. 단어의 86%가 영어에서 가장 많이 쓰이는 3,000단어에 속합니다. 나머지는 연습 전에 미리 확인해 두세요.

이 영상의 핵심 어휘

영상에서 가장 어려운 단어 15개를 발음, 뜻과 함께 정리했습니다.

단어	발음	뜻
font 명사	/fɑnt/	자체, 글꼴
satisfy 동사	/ˈsætɪsfaɪ/	만족시키다
paragraph 명사	/ˈpæɹəɡɹæf/	단락
revision 명사	/ɹəˈvɪʒ.ən/	복습
builder 명사	/ˈbɪl.dəɹ/	건축업자, 건설자
modify 동사	/ˈmɑ.dɪˌfaɪ/	수정하다
scroll 명사	/skɹoʊl/	두루마리, 스크롤
rebuild 동사	/ɹiːˈbɪld/	재건하다
translate 동사	/tɹænzˈleɪt/	번역하다
subscribe 동사	/səbˈskɹaɪb/	구독하다
profitable 형용사	/ˈpɹɑ.fɪ.tə.bl̩/	유익하다, 유리하다
demo 명사	/ˈdɛm.oʊ/	데모
variation 명사	/ˌvɛəɹiˈeɪʃn̩/	변화
combine 동사	/kəmˈbaɪn/	조합하다, 결합하다
accent 명사	/ækˈsɛnt/	강세, 억양

영상에 나오는 구동사

단어	뜻
show off 동사	나대다

따라 말해 볼 만한 문장

영상에 나오는 짧고 완결된 문장으로, 일상 대화에서 그대로 쓸 수 있습니다:

Tell me if it's relatable.
What problem you are solving that the user currently have?
Remember, the user doesn't care about you.

이 영상의 문법

화자가 가장 많이 쓰는 문형을 영상 속 실제 표현과 함께 정리했습니다.

문형	영상 속 표현
현재완료 have/has + 과거분사 — 과거의 일이 지금도 관련이 있을 때	have figured · haven't written · have learned
관계절 who / which + 절 — 사람이나 사물에 대한 추가 정보	something which is · Code, which is

주의할 발음

화자는 don't, doesn't, haven't 같은 축약형과 약화된 형태를 11번 사용합니다. 들리는 대로 짧게 발음하세요.

“sh”와 “zh” 소리: revision /ɹəˈvɪʒ.ən/, illustration /ˌɪləsˈtɹeɪ̯ʃən/, exceptional /ɪkˈsɛpʃənəl/, variation /ˌvɛəɹiˈeɪʃn̩/
긴 단어 — 강세 위치에 주의: repeatable /ɹɪˈpiːtəbəl/, unlimited /ʌnˈlɪm.ɪ.tɪd/, manually /ˈmænj(u)əliː/, ideally /aɪˈdi.ə.li/, transparency /tɹænsˈpæɹənsi/

한국어 화자가 어려워하는 소리:

/f/ — ㅍ(/p/)으로 바꾸지 말고 윗니를 아랫입술에 대기: font /fɑnt/, satisfy /ˈsætɪsfaɪ/, paragraph /ˈpæɹəɡɹæf/, modify /ˈmɑ.dɪˌfaɪ/, profitable /ˈpɹɑ.fɪ.tə.bl̩/
/v/ — ㅂ(/b/)과 구별하기: variable [ˈvæɹ.i.ə.bl̩], revision /ɹəˈvɪʒ.ən/, variation /ˌvɛəɹiˈeɪʃn̩/
/z/ — ㅈ이 아니라 성대를 울리는 /s/: columns /ˈkɑləmz/, translate /tɹænzˈleɪt/

이 영상으로 연습하는 방법

먼저 말하지 않고 영상을 끝까지 듣고 모르는 단어를 적어 둡니다.
보통 속도로 한 문장씩 섀도잉하고, 화자의 리듬과 맞을 때까지 반복합니다.
자신의 목소리를 녹음해 원본과 비교하고, font, satisfy, paragraph 같은 단어에 특히 주의합니다.

쉐도잉이란? 영어 실력을 빠르게 키우는 과학적 방법

쉐도잉(Shadowing)은 원래 전문 통역사 훈련을 위해 개발된 언어 학습 기법으로, 다언어 학자인 Dr. Alexander Arguelles에 의해 대중화된 방법입니다. 핵심 원리는 간단하지만 매우 강력합니다: 원어민의 영어를 들으면서 1~2초의 짧은 지연으로 즉시 소리 내어 따라 말하는 것——마치 '그림자(shadow)'처럼 화자를 따라가는 것입니다. 문법 공부나 수동적인 청취와 달리, 쉐도잉은 뇌와 입 근육이 동시에 실시간으로 영어를 처리하고 재현하도록 훈련합니다. 연구에 따르면 이 방법은 발음 정확도, 억양, 리듬, 연음, 청취력, 말하기 유창성을 크게 향상시킵니다. IELTS 스피킹 준비와 자연스러운 영어 소통을 원하는 분들에게 특히 효과적입니다.

섀도잉 방법: 단계별 전체 가이드 읽기 →

쉐도잉 연습: The Easiest Way to Build Websites - 영상으로 영어 말하기 배우기

연습 모드 선택

앱 다운로드

Unfortunately, YouTube Really Is This Simple

Wonderful website design

I Rebuilt My Entire Website in Astro… Was It Worth It?

User Flow vs Task Flow in UX Design

How I’d Learn Coding in 2026 (Without Wasting Years)

Video

Why Being FAST Makes You More Successful (Copy Me)

Laziest Ways to Make Money with AI (For Beginners)

Best NextJS Folder Structures | Beginner - Intermediate - Advanced

80% of Interior Design Basics in 10 minutes

How To Think SO Clearly People Assume You're Brilliant

Claude Design is Insanely Easy (even for beginners)