안녕하세요! 디자인베이스입니다. 드디어 웹디자인 입문 강좌 시작합니다.
근데 이 강의는 “툴 알려드릴게요~”, “이렇게 따라하세요~”가 아니라, 웹디자인을 보는 눈(=기준)부터 만드는 강의예요.

요즘 AI로 디자인도 뚝딱 나온다는데…솔직히 말하면, 막상 뽑아보면 디자이너 입장에서 구린 경우 진짜 많죠. “AI가 만들어줬는데… 뭔가… 이상한데… 뭐가 이상하지?” 이렇게 디자인에 대한 보는 눈이 없는 사람이라면, 결과물이 뭔가 이상한데.. 어디가 왜 구린지 모르니까 수정도 못하죠..

그렇다고.. 계속 악덕 클라이언트마냥 자기 맘에 들때까지 해달라고 할수도 없죠.
물론, AI가 결과는 만들어줘요. 근데 좋은지/별로인지 판정은 안 해줍니다. 그건 결국 디자이너가 해야 하는 일이고요.
그래서 이 강의는 이렇게 갑니다.

“이 디자인 왜 좋아?” “여기 왜 별로야?”를 판단할 수 있게, 그리고, 디자이너 입장에서 웹 자체를 이해하는 데 도움을 드립니다.

정확한 기준만 생기면, 요청도 더 정확하게 할 수 있고, AI가 뭘 갖다줘도 휘둘리는 게 아니라 “오케이, 여기 고치면 된다”가 바로 보이거든요.

웹 디자이너에게 웹이란 무엇인가?

본격적으로 디자인을 시작하기 전에, 우리가 배우려는 웹과 웹디자이너의 역할을 짧게 이야기해볼건데요. 웹에는 기업 사이트, 마케팅 랜딩페이지, 쇼핑몰, SaaS, 콘텐츠 플랫폼, 포트폴리오 등 목적과 성격에 따라 매우 다양한 형태가 있습니다.우리는 매일 웹을 통해 검색하고, 비교하고, 구매하고, 정보를 얻고, 소통하죠.

어떤 종류의 웹사이트를 만들더라도 디자이너는 공통적으로 이런 것들을 고민합니다.

• 정보의 우선순위를 유지하면서 기기별로 재구성되는 레이아웃(반응형 설계)
• 읽기 쉬운 타이포그래피
• 명확한 버튼과 인터랙션

즉, 형태는 달라도 설계할 때 챙겨야 할 ‘기본 요소’는 비슷합니다.

그런데 여기서부터가 진짜 중요해요.
그 기본 요소들을 어떤 기준으로 정하느냐는 완전히 다른 이야기거든요.

디자인의 기준은 ‘우리 눈’이 아닙니다

웹디자인의 기준은 “예쁘다/안 예쁘다” 같은 디자이너의 취향이 아니라, 사용자와 목적에서 시작합니다.
같은 웹이라도 사용자 수, 사용 빈도, 접속 환경이 달라지면 기준이 완전히 달라져요.
예를 들어 google.com을 보면 엄청 심플하고 미니멀하죠.
검색 결과도 군더더기 없이 딱 필요한 정보만 보여줍니다. 근데 불편하다고 느낀 적 있나요? 거의 없죠.
왜냐면 구글의 기준은 “멋있게 보이기”가 아니라, 전 세계 사용자가 최대한 빠르게 검색 결과를 받게 하는 것이거든요.

사용자가 많은 서비스일수록, 디자인요소를 많이넣어서.. 페이지가 무거워 지면. 그에 따라 로딩 속도가 느려지고 그만큼 이탈이 늘어납니다. 결과적으로 비즈니스에도 악영향을 주게됩니다. 그래서 구글은 “덜어내는 디자인”이 오히려 정답에 가까운 거예요.

반대로, 디자인 에이전시 사이트라면 기준이 조금 달라질 수 있습니다.
이쪽은 “빠른 검색”보다 “첫인상”이 중요하니까요.
처음 들어온 순간 “여기 감각 있다”, “퀄리티 믿을만하다” 이런 느낌을 주는 게 곧 목적이 될 수 있어요.
그래서 과감한 비주얼, 브랜드 톤, 창의적인 인터랙션이 기준이 되는 경우가 많습니다.

그리고 쇼핑몰은 또 다르죠.
쇼핑몰은 대부분 구조가 비슷합니다. 이유가 있어요.
사용자 입장에서 “대충 이렇게 동작하겠지” 하는 멘탈 모델이 이미 자리잡아 있어서, 여기서 괜히 새로움을 주면 오히려 불편해질 수 있거든요.
그래서 쇼핑몰에서 더 중요한 건 ‘예쁜 화면’보다 이런 것들입니다.

• 어떤 상품을 먼저 추천할지
• 리뷰를 어디에, 어떤 방식으로 보여줄지
• “지금 몇 명이 보고 있는지”, “비슷한 상품은 뭔지” 같은 신뢰 요소
• 내가 예전에 샀던 사이즈를 기반으로 옵션 기본값 제공

즉, 웹디자인은 그래픽 스타일 자랑이 아니라 목적에 맞게 더 빠르고, 더 쉽게, 더 설득력 있게 만드는 설계에 가깝습니다.
그래서 다음부터는 “예쁘냐”보다 먼저 “이 사이트의 목적은 뭐고, 사용자는 어떤 상태로 들어오지?” 이 질문부터 해볼게요.

포트폴리오 사이트를 만들어볼게요

이번 실습에서는 디지털 에이전시 포트폴리오 사이트를 함께 만들어볼 거예요.
쇼핑몰이나 SaaS처럼 “정답이 갈리는 사용성”은 도메인마다 기준도 다르고, 실제 데이터 없이 깊게 다루기엔 한계가 있거든요. 반면 포트폴리오 사이트는 기본 구조, 반응형 레이아웃, 비주얼 구성을 한 번에 연습하기에 딱 좋은 주제입니다.

제가 아는 걸 전부 다 보여드리고 싶지만, 영상으로 전달하는 데는 한계가 있어요. 그래서 이번 강의에서는 꼭 필요한 핵심 방식들만 뽑아서, 실습으로 확실히 익히게 해드릴게요.

이런 분들을 위해 만들었습니다

• 웹디자인을 처음 배우는 디자이너/비전공자
• 개발자인데 디자인까지 혼자 해보고 싶은 분
• AI 결과물이 “뭔가 별론데 왜 별로인지” 판단·수정이 막막한 분

이 강의에서 다루는 방향

이 강의에서는 단순한 개념 설명에 그치지 않고,

1. 실제 구현을 전제로 한 레이아웃 설계,
2. 다양한 기기 환경에서의 반응형 원리,
3. 개발자와 협업할 때 자주 놓치는 포인트

이런 것들을 실무 관점에서 짚어갑니다. 이 기준이 제대로 잡혀 있으면, 어떤 유형의 웹사이트를 디자인하더라도 충분히 응용할 수 있습니다.

우리가 진행할 예제

예제 실습은 피그마로 진행할 거고, Figma 사용이 익숙하지 않다면 기초 강좌를 먼저 보고 오셔도 좋습니다. 다음 강의에서는 웹사이트가 만들어지는 과정을 단계별로 살펴볼게요. 그럼 다음 강의에서 뵙겠습니다.