그래픽 디자이너 박하늘 Details
소개 영상
그래픽 디자이너, 박하늘
“밀려있는 포트폴리오 정리,
효율적으로 관리할 방법을 찾고 계신가요?
지속적인 업데이트가 용이하면서도
나만의 개성을 담은 웹사이트 제작법을 공개합니다."
나의 포트폴리오에 날개를 달아줄
커스텀 포트폴리오 웹페이지 제작법
마음에 쏙 드는 웹사이트를 갖고 싶지만
기성 템플릿과 테마는 성에 안 차고
직접 만들기엔 막막했던 경험이 있으신가요?
그래픽 디자이너이자
웹디자이너로 활동하고 있는
스튜디오 바톤 소속의 박하늘 디자이너가
나만의 웹사이트를 만들기 위한
프로세스를 상세하게 알려드립니다.
초기 단계부터 명확한 기획,
피그마를 활용한 손쉬운 디자인,
간단명료한 퍼블리싱 과정과
효율적인 관리를 위한 CMS* 구축까지
전 과정을 경험해 보세요.
아카이빙이 용이하고
내 개성이 듬뿍 담긴 웹사이트는
디자이너로서 갖출 수 있는
또 하나의 포트폴리오입니다.
*CMS(Contents Managing System)란 콘텐츠 관리 시스템으로, 자료 관리 및 업데이트를 편리하게 만들어줍니다.
클래스 정보
영상 22편
강의 시간: 한 회차 당
약 30분 내외
난이도: 초중급
평생 시청
사용 프로그램
[사용 툴]
Figma Desktop App version 116.2.4
Visual Studio Code 1.71.1
MAMP 6.6
FileZilla 3.56.0
*모든 소프트웨어는 무료 프로그램으로 최신 버전 다운로드가 가능합니다.
동영상 정보
온라인 VOD
오디오: 한국어
자막: 없음
클래스 혜택
1. 피그마 예제 파일
2. 예제에 사용된 자료
웹사이트 디자인 및 구현부터
그래픽 디자인까지 아우르는
박하늘 디자이너의 포트폴리오
그래픽디자인
웹디자인
그래픽 디자이너 박하늘의
클래스가 특별한 이유
코딩을 처음 해보지만
자유롭게 디자인을 담고 싶은
디자이너들을 위한
커리큘럼과 실습 예제
포트폴리오 웹사이트를 만들 때
사용성만을 중심으로 만들다 보면
웹사이트가 따분해지기 쉽고,
시각적인 임팩트만을 강조하다 보면
어렵기만 한 웹사이트가 되어버립니다.
사용성과 재미를 조화롭게 갖춘
즉, 지속적인 업데이트가 용이하면서도
내 포트폴리오를 매력 있게 담아내는
나만의 웹사이트를 만들어보고 싶다면,
코딩이 익숙하지 않은 디자이너의
눈높이에 맞춘 친절한 설명과
3개의 구체적인 실습을 통해
기획 단계부터 최종 구현까지
차근차근 따라 해보세요.
본 클래스에선
웹사이트 디자인부터 완성까지
모든 과정을 학습해봅니다.
Part 01. 피그마로 만드는 웹사이트 디자인
-
피그마로 만드는 웹사이트 디자인: 데스크탑 ver. -
피그마로 만드는 웹사이트 디자인: 모바일 ver.
Part 02. 최종적으로 구현하는 웹사이트(퍼블리싱부터 호스팅까지)
-
최종 결과물
* 위 결과물은 해당 클래스에서 직접 만들게 될 실제 예제들입니다.
박하늘
그래픽 디자이너
안녕하세요, 그래픽 디자이너 박하늘입니다.
저는 현재 스튜디오 바톤에서 UI 디자이너로 일하며,
다양한 분야의 브랜드를 위한 웹사이트 작업에 참여하고 있습니다.
동시에 프리랜서 디자이너로 활동하면서,
그래픽 디자인, 전시 디자인, 웹사이트 디자인과 구현까지
온 오프라인의 여러 매체를 통해 작업하고 있습니다.
만들어져있는 템플릿에 의존하지 않고
온전히 나만의 콘텐츠에 맞춘
개성 있는 포트폴리오 웹사이트를 만들어보시길 바랍니다.

그래픽 디자이너 박하늘
현) 스튜디오 바톤 UI 디자이너
현) 프리랜서 디자이너
이력 더 보기
[참여 프로젝트(스튜디오 바톤)]
'파사드패턴' 웹사이트 디자인 2022
'모어비전' 웹사이트 디자인 2022
'매거진B' 웹사이트 디자인 2022
'오설록 브랜드 스토리 & 다다일상' 웹사이트 디자인 2021
'HEIGHTS' 웹사이트 디자인 2021
[참여 프로젝트(프리랜서)]
'다리없는산책' 그래픽 디자인 2022
'Look Who's Talking' 웹사이트 디자인 및 개발 2022
'어퍼하우스 VIP 라운지' 웹사이트 디자인 및 개발 2022
'SMile Music Festival' 그래픽 디자인 2022, 2020
'시계의 손' 그래픽 디자인 2022
'Eugene Jung' 웹사이트 디자인 및 개발 2022
'서울신문 인터랙티브 기사' 웹사이트 디자인 및 개발 2022
'이름행진' 웹사이트 디자인 및 개발 2020
클래스 특징
지속 가능한 포트폴리오
관리 시스템 만들기
항상 미루게 되는 포트폴리오 정리. 웹사이트를 통해 구조화하여 지속 가능하고 손쉬운 '매체별 포트폴리오 관리 시스템'을 만들어보세요.
코딩 입문자도 OK,
실습하며 배우는 제작 노하우
코딩이 처음이거나 코딩의 벽에 부딪혀 본 분들도 기획부터 최종 호스팅까지 단계별로 따라 하다 보면 어느새 하나의 웹사이트를 완성하게 됩니다.
나만의 아이덴티티를 담은
포트폴리오 웹사이트
템플릿으로 웹사이트를 만들면 편리하지만, 한편으로는 아파트와 같이 천편일률적인 모습을 띠게 됩니다. 템플릿 없이 나만의 개성과 구조를 가진 단독주택 같은 웹사이트를 만드는 방법을 배워보세요.
클래스 구성
이런 것을 배웁니다
-
개성을 표현하는 웹사이트 기획웹사이트의 목적과 방향성을 설정하고 적당한 사용성과 개성을 고려한 와이어 프레임을 만들어봅니다. -
따라 하며 배우는 피그마 입문피그마의 프레임, 오토 레이아웃 등 주요 기능의 작동 방식을 이해하고 실습 예제를 통해 기본 기능을 빠르게 익혀봅니다. -
디테일한 프로토타입 제작법유용한 프로토타입 기능과 트릭들을 살펴보며 실제로 구현할 웹사이트에 가깝고 디테일한 프로토타입 제작법을 배워봅니다.
-
반응형 웹사이트 구조 설계다양한 비율과 크기의 디바이스 환경에서 유연하게 동작하는 반응형 웹사이트 구조를 살펴봅니다. -
직접 워드프레스 테마 만들기빌더나 테마를 사용하지 않고 비교적 간단하게 원하는 디자인으로 직접 워드프레스 테마를 만들어봅니다. -
포맷별 포트폴리오 콘텐츠 가공 방식인스타그램, 웹사이트, PDF 등 다양한 포맷으로 포트폴리오를 게시할 때 콘텐츠를 가공하는 팁을 살펴봅니다.
인터뷰
그래픽 디자이너 박하늘이
하고 싶은 이야기
이번 강의의 핵심 포인트는 무엇인가요?
자신의 포트폴리오를 다각도로 탐색하여 그에 어울리면서도 지속적이고 쉬운 업데이트 체계를 마련하는 부분입니다. 또한 디자인부터 구현까지 웹사이트 제작에 필요한 전체 프로세스를 넓고 얇게나마 경험해 볼 수 있다는 점과 기성 템플릿이나 테마를 사용하지 않고 디자인 자유도가 높은 구현 방식을 학습해 보는 것 또한 중요한 포인트라고 생각합니다.
강사님의 강점 혹은 차별점은 무엇이라고 생각하시나요?
저는 주로 그래픽 디자인 작업을 해오다가 우연히 UI 디자이너로 일하게 되면서 기능을 따르는 형태에 대한 감각을 키울 수 있었습니다. 적당한 사용성과 적당한 재미를 모두 갖춘 웹사이트를 처음부터 디자인하고 끝까지 구현해 본 경험이 저의 강점이자 차별점이라고 생각합니다. 피그마를 다루는 목차에서 적당한 사용성과 재미를 컨트롤하기 위한 효율적이면서도 자유로운 웹사이트 디자인 프로세스를 공유하고자 합니다.
수강생분들은 강의를 통해 무엇을 얻어 갈 수 있을까요?
자신의 작업 과정과 결과물을 지속해서 정리해 보여주는 습관, 그리고 그로 인해 만들어질 자신만의 아카이브를 얻어 가셨으면 좋겠습니다. 잘 정리된 아카이브는 직접적으로나 간접적으로 도움이 되기 때문입니다. 추가로 웹사이트 디자인과 구현이 생각만큼 어렵지 않고 재밌네? 더 배워볼까?라는 마음도 조금이나마 얻어 가실 수 있기를 바라겠습니다.
사용 프로그램
안내드립니다.
본 클래스는 Figma Desktop App version 116.2.4과 Visual Studio Code 1.71.1, MAMP 6.6, FileZilla 3.56.0로 진행됩니다.
원활한 수강을 위해 해당 버전의 프로그램을 설치해 주시길 바랍니다.
* 모든 소프트웨어는 무료 프로그램으로 최신 버전 다운로드가 가능합니다.
* 프로그램 및 준비물은 별도로 제공되지 않습니다.












