처음 시작하는 프론트엔드 (1) - figma로 디자인 시작하기

시리즈

  1. 처음 시작하는 프론트엔드 (1) - figma로 디자인 시작하기
  2. 처음 시작하는 프론트엔드 (2) - html과 css
  3. 처음 시작하는 프론트엔드 (3) - 부트스트랩(bootstrap)
  4. 처음 시작하는 프론트엔드 (4) - github pages, aws route 53, aws cloudfront로 나만의 도메인으로 배포하기

들어가기 전에

java를 통해 프로그래밍을 시작했고, 모바일 개발이 하고 싶어 무작정 flutter를 사용했습니다. 그러다 백엔드 api 서버가 필요해 스프링 부트를 배워서 사용하였습니다. 백엔드 개발을 하다보니 자연스레 프론트엔드 엔지니어와 협업을 할 일이 잦아졌습니다. 문제는 제가 프론트엔드에 대한 지식이 많이 부족했기 때문에 전체적인 시각을 가지지 못했습니다. 그래서 이번에는 프론트엔드 입니다! 이번 시리즈를 통해 기본적인 html, css, bootstrap으로 랜딩 페이지를 구축해보고 실제 도메인에 연결시켜 배포해보겠습니다. 이후 해당 시리즈는 리액트 프레임워크로 리팩토링을 하는 내용으로 이어질 것 입니다. 튜토리얼 수준까지 자세히 설명하지는 않겠지만, 어떤 지식이 필요하고 하나의 사이트를 제작하고 배포하고 관리하는 일련의 과정을 보여드릴 예정입니다. (스프링부트랑 flutter글은 언제쓰지..)

디자인

사이트를 제작하기 전, 많은 부분을 정하고 시작하여야 합니다.(설계도가 자세할 수록 건축이 쉬워지는 것과 비슷하다고 생각합니다.) 어떤 사이트를 만들 것이며, 어떤 항목을 추가할 것인지 구체적으로 기획할 수록 제작에 도움이 됩니다. 이번 시리즈에서는 랜딩 페이지를 제작할 것입니다. 제 자신에 대한 소개와 더불어 제 약력및 어떤 일을 좋아하고 잘하는지 소개할 것입니다.

기획이 마무리 되었다면, 사이트를 디자인 해야 하는데, 디자이너 없이 스스로 디자인을 해야 할 때가 있습니다. 이런 경우라면 비슷한 주제(예컨대 포트폴리오 사이트, 스타트업 소개 사이트 등)를 가지고 먼저 구현 혹은 디자인한 사례를 참고 합니다. 만약 먼저 만든 사례를 찾기 까다롭다면, 디자인 사이트를 적극 이용 바랍니다. 저의 경우는 드리블, 비핸스 이 두개의 디자인 사이트를 참고하여 디자인 하였습니다. 디자인 툴의 경우 대표적으로 adobe xd와 figma가 있는데, figma가 무료이기도 하고 웹상에서 직접 작업 가능하여 figma 를 선택하였습니다. figma의 튜토리얼은 유튜브를 참고하시기 바랍니다.(하나하나 자세히 다루면 끝이 없음을 양해바랍니다. 이메일을 통한 질문 시 상세히 알려드리겠습니다.) 아래는 제가 한 디자인 초안입니다.

다음 시간에는 html와 css의 특징을 알아보고 사이트를 적용시켜 보겠습니다. 궁금하신 사항이 있으시다면 lak9348@gmail.com으로 연락 바랍니다.

--

--

--

contact : lak9348@gmail.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
NAMKYU PARK

NAMKYU PARK

contact : lak9348@gmail.com

More from Medium

How to use i18n: An experience by Zarela’s design department

Figma | Made with Gatsby JS

Figma | Made with Gatsby JS

UI Renovations Part 5: Closet Core Patterns

Interactive Stories with CSF Play and User-Events