190413 스타트업에서 마크업 개발자로 살아남기 - 오혜진 발표

스타트업에서
마크업 개발자로
살아남기코인원 오혜진

안녕하세요
6년차
마크업개발자

안녕하세요
6년차
마크업개발자
오혜진입니다

마크업개발자
UI 개발자

마크업개발자
UI 개발자
웹퍼블리셔

나모웹에디터(2008) 드림위버(2004)
그거 나모웹에디터 같은 걸로 HTML 만들 줄 알면 되는거 아닌가요?

출처 : http://blog.naver.com/PostView.nhn?blogId=naver_diary&logNo=150047725151&parentCategoryNo=63&categoryNo=&viewDate=&isShowPopularPosts=false&from=postList
1998 1999 2000 2001 2002
예) 2000년대 초 이전의 한국 웹 (네이버)

인터넷의 발달
스마트폰 보급
다양한 디바이스
발전한 웹 기술

2019년 핀터레스트 ‘웹디자인’

자사 서비스 사이트
(유지보수/운영대응/신규개발) 
프로모션 페이지
팀/기업 사이트
운영툴 UI 설계
이메일 템플릿 마크업
.
.
.
디자인 시스템 적용
GA / OG 데이터 관리
웹 표준 / 웹 접근성 준수
크로스 브라우징 대응 / 반응형 웹 구현
회사 주요 이미지 에셋 관리
가끔 기획+디자인+개발

메인, 거래소, 프로차트
로그인, 회원가입, 비밀번호 찾기, 마이페이지
계정관리, 회원탈퇴, 연결된 앱, API
보안설정 - 본인인증, 계좌인증, OTP 인증
주소록, 이메일 수신 설정, 인증 자료 제출 안내
자산 - 수익현황, 거래내역
입출금 - 입금, 출금, 내역
고객센터 - 이용안내, 공지사항
암호화폐 소개 및 명세서, Give - 사회공헌
코인원 보안 안내, 이용안내, 수수료안내
이용약관 및 규정, 개인정보처리방침, 지갑
CCDEX 코인원인덱스, 코인원블록스, 코인원톡
… 등등
자사 서비스 사이트
(유지보수/운영대응/신규개발) 
프로모션 페이지
팀/기업 사이트
운영툴 UI 설계
이메일 템플릿 마크업
.
.
.
디자인 시스템 적용
GA / OG 데이터 관리
웹 표준 / 웹 접근성 준수
크로스 브라우징 대응 / 반응형 웹 구현
회사 주요 이미지 에셋 관리
가끔 기획+디자인+개발

자사 서비스
마크업 전담
MyMusicTaste

자사 서비스
마크업 전담
Coinone / CGEX

팀 / 기업사이트
프로모션페이지

회원가입이 되느냐/안되느냐도 중요하지만
• 키보드의 tab키 만으로 input 요소 들을 이동할 수 있는지
• input의 포커스 상태를 사용자가 인지하기 용이한지
• label과 input이 연결되어 있는지
• 적절한 placeholder가 들어가 있는지
• 적절한 위치에 에러메시지가 보여지는지
• 회원가입 플로우가 이상하진 않는지
UI/UX에 대한 이해

고정영역
페이지 전체 높이 - 고정 영역
고정 영역
고정 영역
고정 영역 고정 영역
영역 내 스크롤
영역 내 스크롤
고정 영역
고정 영역 고정 영역

반응형 웹
크로스 브라우징

마크업 설계 때부터
구조화된 접근이 필요

디자이너가 디자인에 집중할 수 있게
개발자가 개발에 집중할 수 있게

웹 기반 서비스를
운영하는 곳에 꼭 필요한 직군

일잘러가 되어보자 👍
*일 잘하는 사람

일을 잘한다 = 개발을 잘한다

일을 잘한다 = 개발을 잘한다
개발만 기깔나게 잘한다면 차라리 1인 사업자가 되세요!

실무 능력은 기본
스스로 찾아 일하는 능력
원활한 커뮤니케이션 능력
협업 프로세스 적응 능력
일을 잘한다 =
결국 사람이 사람과 함께 하는 ‘일’

기록만이 살길이다
호기심을 잃지말자
다재다능 멀티능력
아는만큼 힘이된다
마크업을 알려보자
앞으로 하고싶은것

기록만이 살길이다 📝

취업은 했는데
동료도 사수도 없다…?

나를 위한,
그리고 나같은 사람을 위한
개발 블로그

블로그가 주는 장점
내가 뭘 고민했었는지
그리고 어떻게 헤쳐나갔는지
되돌아 볼 수 있고
이런 관심들을 가지고
노력을 해왔다는 것을 증명
+면접의 기회

블로그가 주는 장점
내가 뭘 고민했었는지
그리고 어떻게 헤쳐나갔는지
되돌아 볼 수 있고
이런 관심들을 가지고
노력을 해왔다는 것을 증명
+면접의 기회
나를 위한 개발위키 🤟

세상에 좋은 블로그
정—말 많다
많은 시간과 노력이 필요

간결하고 정확하게
문제상황 정리하고
빠른 해결책 제시!

#2016블로그결산
#IT인터넷
#상위10%부지러너
#2년차블로그
#4만+방문자
#100+포스팅

가끔은 양질의 글도 씁니다ㅎㅎㅎ

블로그 귀찮은데요 😩
그럼 노션으로 오세요!

T.I.L
Today I Learned
바쁜데 언제 블로그 정리해요?
일 하다가 알게 된 새로운 지식들 혹은
내가 하루종일 삽질했던 원인들,
도움된 링크들을 바로바로 정리해보세요!
X

호기심을 잃지말자 🦄

1. 디자인을 바라보는 시각

안 된다고 말하기 전에
최대한 고민할 것
(방어기질 무조건반사 지양)

새로운 디자인
서로에게 주는 시너지
디자이너의 의욕 + 마크업 의욕
🔥🔥🔥

제가 CSS로 그린 캐릭터에요!

내가 더 잘할 수 있겠는데?
제가 CSS로 그린 캐릭터에요!

LIVE CODING
https://youtu.be/36JmFKVDVEI

https://codepen.io/collection/AVKvZM/
약 2달간 그려낸
CSS Drawings

2016.11.28.
코드펜 선정 콜렉션에
2개의 콜렉션이 동시선정

C S S 드로잉
라이언그리기
튜토리얼제작

재밌잖아요!
이런거 왜 해요…?

재밌잖아요!
반복되는 회사일에서 벗어나, 창의적으로 접근할 수 있는 시간!

CSS로 이런것도 할 수 있다고
보여주고 싶었어요 😎

다재다능 멀티능력 🌟

스타트업의 장점(단점)
내가 할 수 있다면,
내 일이 될 수 있다.

#오픈소스
프로덕트에 자주 쓰이는 차트 커스텀

#개발外1
3D Slider를 사용한 피쳐 디자인

#개발外2
위젯 기획+디자인+프로토타이핑

#PM가능
기획-디자인-개발을 이해하는 인력

아는만큼 힘이된다 💪

#꼼꼼한 체크는 필수
일이 넘어올 때 히스토리 체크는 필수입니다.
또한, 전달된 대로 생각없이 단순 작업만 하는 것이 아니라,
내용도 꼼꼼하게 확인해보고 빠진 건 없는 지 확인합니다.
✍

#꼼꼼한 체크는 필수
이렇게 알게 된 정보는 쉽게 잊혀지지 않습니다.
앞서 말했듯이 기록으로 남겨두면 더 확실해지죠.
남들보다 더 많이 알고 있다는 건 분명 강점이 됩니다.
✨

마크업을 알려보자 🎤
개발

회사 안 뿐만 아니라,
이제는 바깥에서의 시선도
바꿔보고 싶다

작은 노력들이 모여
마크업 개발을 바라보는 시각이
개선 되길 바라며

외부활동을 통해
마크업 개발자를 알리자
(네트워킹 파티, 행사 발표 참여 등)

#프로그라피
대학생 연합 프로그래밍 동아리
예비 개발자, 주니어 개발자 들에게
마크업 개발 멘토링 진행

앞으로 하고싶은것 🙏

커뮤니티 활성화
세미나/컨퍼런스 개최
WSConf. 2th, CSSConf. Korea 열어보고 싶어요
행사 기획중이신데 일할 사람 필요하시면 연락주세요

zineeworld@gmail.com
zinee-world.tistory.com
@zineeworld
함께 이야기 나눠요!

긴 발표 들어주셔서
감사합니다 .🙏

190413 스타트업에서 마크업 개발자로 살아남기 - 오혜진 발표

190413 스타트업에서 마크업 개발자로 살아남기 - 오혜진 발표

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 190413 스타트업에서 마크업 개발자로 살아남기 - 오혜진 발표

Similar to 190413 스타트업에서 마크업 개발자로 살아남기 - 오혜진 발표 (20)

More from Hyejin Oh

More from Hyejin Oh (10)

190413 스타트업에서 마크업 개발자로 살아남기 - 오혜진 발표