'아.. 나도 이런 포트폴리오 페이지 만들어야 하는데'라고 생각하면서 생활 코딩을 뒤적이는 디자이너를 위한 간단 지침서. 2년전쯤 회사 내부에서 간단하게 세미나 했던 내용을 추억팔이용으로 업로드 합니다. 더 자세한 내용은 블로그에서 확인: uidesignguides.com

1. 프론트엔드 당장 써먹기
디자이너가 배우고 활용하는 법

2. 사이드 프로젝트 페이지 만들어서 홍보하고 싶다.
카고나 비헨스말고 포폴 사이트를 만들고싶다.
내 블로그로 유명해지고 광고수입도 벌고싶다.
개발자가 보낸 화면이 스케치랑 다른데 디테일하게 수정 하고싶
뭔가 나도 코드를 읽을줄 알아야 멋있는거 같다.

3. 난 HTML/CSS/JS가 뭔지도 몰
라;
= 모질라 웹 문서

4. 생활코딩
• 구글 직원이 가르쳐줌
• 영어지만 안어려움
• 기본강의는 한글 자막 있음
• 퀴즈와 예제를 통해 학습가능
• Nanodegree 신청하면 링크드인에 인증
• 약간 지루하지만 친절함
• A-Z로 알려줌
• 동영상 속도 1.5배로 하는걸 추천
Udacity

5. 난 디자인 하니까 저거 배우면
바로 멋있게 되는거 아니야?
내가 만들고 싶은 사이트

6. 난 디자인 하니까 저거 배우면
바로 멋있게 되는거 아니야?
HTML처음 배우고 나온 결과물

7. 난 디자인 하니까 저거 배우면
바로 멋있게 되는거 아니야?
HTML처음 배우고 나온 결과물

8. 개발자들이쓰는 그 화면 뭐에요
?
= 에디터
1. 무료
2. 유아이가 예쁘고 친절하다
.
3. 깃허브에서 만들어서 깃허
브 소스를 가져오기 편하
다.
아톰의 장점

9. 깔았는데 이제 뭐하죠?
= 패키지 인스톨
• Emmit
• Highlight-selected
• Open-in-browser
• Autoclose-html
• Color-picker
• Minimap
• Script
제가 주로 사용하는
패키지

10. 일단은 남이 잘 만든거 쓰자
= 프레임워크
1. 제일 많이 쓴다.
2. 라이브러리가 많다.
3. 디자인 변경이 쉽다.
부트스트랩 장점

11. 그래도 아직은 어려워
ㅠ
1. 업로드, 디자인변경이 쉽
다.
2. 코드 몰라도 사용가능.
3. 애널리틱스 사용이 쉽다.
4. 용도별 템플릿이 많음.
워드프레스 장점

12. 이 태그 많이 본건데 어떻게 사용하
더라?
= w3schools.com
• 구글에서 기초적인 코드검
색하면 가장 많이 나오는
사이트.
• 초반에는 여기만 봐도 됩
니다.

13. 이 소스랑 비슷한거 뭐 없나?
= codepen.io
• 각종 프론트엔드용 소스
찾을때 편리함
• 사이트 내에 에디터가 포
함되어서 바로 수정해서
결과물을 볼 수 있음

14. 결과물이 디자인이랑 다른데요
?
= 크롬 개발자 도구
1. 색깔은 컬러 헥사코드로 직접 넣어보기
2. 사이즈나 간격도 마진 & 패딩 조절
3. :hov 눌러서 element state 확인
4. Break Point 각 View 별로 수정사항 체크

15. 이 사이트 참고하고싶다.
= 크롬 확장 프로그램
• CSS Peeper
• Dimensions
• Page Ruler
추천 CSS용 툴들

16. 사용자 분석해서 유입률을 높히
고 광고도 달고싶어요.
• 구글 애널리틱스를 가입하고 추적 코드를 추가하면 끝.
• 국가, 성별, 유입경로, 체류시간등을 알 수 있음.
사용자 분석

17. 사용자 분석해서 유입률을 높히
고 광고도 달고싶어요.
유입관리
• 네이버는 사이트 검색에 뜨려면 네이버 웹마스터를 이용해서 직접 등록.
• 페이스북등의 외부 SNS를 이용하지 않으면 유입 없음.
• 구글은 특정 검색어에서 상위를 차지하는게 중요함.

18. 사용자 분석해서 유입률을 높히
고 광고도 달고싶어요.
• 여러 업체가 있지만 일단은 구글 애드센스를 신청합시다.
• 저품질 광고가 많으면 사이트 검색순위에서 밀립니다.
• 애드센스는 컨텐츠 수와 질이 충족되지 않으면 승인이 안되기 때문에
사이트 품질과 SEO를 잘 관리해야합니다.
광고

19. 페이지는 만들었는데 웹에
어떻게 올려요?
1. 무료
2. 버전 관리
3. 오픈소스 이용이 편리함
1. 한글
2. 워드프레스랑 연결해서 사용하기 편함
3. 상업적 이용에 최적화
깃허브
Cafe 24

20. 도메인은 뭘로하지?
나는 전문적으로 보이고 싶다!
.com이나 .design도메인을 추천
가격은 보통 연간 5000원~2만원
별로 상관없다!
무료 도메인 사이트에서 검색

21. 그럼 다 배운건가요?
• 기본을 배웠으면 이제 깃허브에서 여러
가지 오픈소스를 활용해보는걸 추천.
• 자바스크립트는 라이브러리가 많기 때
문에 잘 쓰면 바로 awwward에서 본 인
터랙티브 웹이 만들어진다.
• 자바스크립트를 배우다가 어려운 분들
은 파이썬 기초 강의도 함께 들어보는걸
추천. 구조가 비슷하지만 훨씬 체계적이
고 활용도도 높기 때문에 이해하기 수월
함.