여봉
연결
결혼까지
이 세가지 앱이 동일한 회원으로 서비스되네요

가입할때부터 번호인증 인적사항 및 첫데이트 결혼관련 질문에 답한다 그런데 프로필에는 자동반영이 안됨
프로필에는 추가로 또 설정해야 한다

여성은 사용이 무료

남자 신규회원 가입혜택
좋아요 10개
프로필열람권 5개
만나봐요 2개

가입후 35분이내
좋아요 5개와 만나봐요 2개 모두 사용시 좋아요 10개 추가지급됨

단점
-회원리스트 필터링이 안됨
재혼이 결혼보다 많은데 결혼과 재혼조차도 안됨
-리스트 초기화
중간에 한명 프로필보고나서 나오면 처음 맨위리스트부터 내려가야 함ㅠㅠ
-재혼많음
-유지비가 비싸다
프로필열람권/메시지이용권/만나봐요 사야함

코인 1000원당 1개
1일 메시지이용권 7코인
5일은 21코인
10일은 40코인
15일은 60코인
30일은 110코인

만다라트 기법
->키워드 찾기

브랜드 아이덴디티
->첫인상 만들기(이걸 만다라트로 함)

만다라트 키워드(부드러운, 달콤한, 부드러운 등등)에서 뽑아낸 느낌으로 컬러칩을 만든다

color.adobe.com/ko/create/color-wheel

메인컬러 2~3개
서브컬러 2~3개

선정 후 디자인 시작하면 된다

레퍼런스 찾기 시작

behance.net에서
1)research 웹디자인 파랑
2)developer 웹디자인 파랑
3)designer 웹디자인 파랑

디자인선행작업
1)키워드 도출(만다라트로 이용)
2)컬러 키워드 ->산정 
메인/서브 컬러 만들기
3)레퍼런스 찾기(behance pinterest 드리블 노트폴리오 사이트를 활용해서)
핀터레스트가 드리블이랑 비핸스랑 다 연결되어 있음
4)디자인가이드(개발자에게 컨벤션이랑 같다)

개발자의 컨벤션 = 디자인가이드

예시1

저는 미팅때 주요 키워드를 3가지 정도 뽑아와서 
로고 디자인도 프로젝트에 포함되어있으면 브랜딩 작업 우선하고요
핀터레스트에서 관련된 키워드 전부다 검색해서 이미지 자료들을 스케치 파일로 불러옵니다
그중에서 이미지 맵처럼 만들어서 브랜드 로고 먼저 만들고 색상은 마지막에 선택하는 편이며, 사이트 디자인은 로고 결정된 후에 작업 시작합니당

예시2
회사BI가 정해진 경우
저는 현재는 회사사이트 리뉴얼디자인하는게 거의 전부라서 말씀하신대로 로고랑 대표이미지색상이 정해져있어서 그거에 맞게 웹사이트 많이 봐요 요즘 웹사이트어떻게 구성되어있나 그래서 그거 짜집기해서 메인만들고 서브페이지 작업합니다

인하우스 회사
자체서비스를 디자인하는 회사임(외주아니고/외부신경안쓰고)


서핏
-크롬앱
-디자인 아티클을 보여줌
-최신 트렌드를 보여줌
ex)밀리의 서재 디자인가이드를 배포했다(확인)

www.carbondesignsystem.com/

디자인 가이드 잘된 곳

carbon design system으로 검색
디자인도 되어있지만 코드값도 잘 되어있다

공부하는데 가장 좋은것은 커뮤니티이다~
저작자가 직접 올리기 때문에
디자인 몰라도 가입해보자


TODO)
디자인에 필요한 크롬 앱 검색해서 찾아보기

개발쪽은 스크립트 진행
html css는 대소문자 구문안하자미나
스크립는 대소문자 구분함

HTML

<button class="btn">button</button>
<div class="article">article text</div>

CSS

.article{
display:none;
}

.article.--act{
display:block;
}

JAVASCRIPT

let $btn = document.querySelector(".btn");
let $article = document.querySelector(".article");

$btn.addEventListener("click", function(){

  $article.classList.toggle("--act");

});

구글에서

자바스크립트 선택자
자바스크립트 변수
자바스크립트 이벤트 부여
자바스크립트 클래스 제어

라고 검색하면 많이 나옴

함수로 만들어서 재사용할수 있다^^ 토글되는 것들을 여러개 만들데 다음의 함수를 이용한다
fuction setClickEvent(btnName, articleName){
  let $btn = document.querySelector(btnName);
  let $article = document.querySelector(articleName);

  $btn.addEventListener("click", function(){

    $article.classList.toggle("--act");

 });

};

setClickEvent(".btn", ".article");

리디자인해보자

리디자인
기존서비스를 두고 새롭게 디자인하는 방법(포트폴리오처럼)

26일까지 하고 서비스 선정하기
메인만 구축/디자인 하기
서비스 사이트 골라보기

아이콘은 svg로 한다

잘 전달되면 좋은 디자인
의도한 봐가 잘 전달되는지

figma에서 svg넣으면 된다
figma앱에서 드래그앤 드롭하면 된다

웹에서 배치를 할때 옆으로 나란히 태그를 나열할때 float를 사용하는데

float의 적용범위를 지정해주는 css가 clearfix이다

즉, float와 clearfix는 항상 쌍으로 사용된다

clearfix는 css 파일에

.clearfix::after{display:block;content:'';clear:both}

이렇게 설정해주고

float가 적용된 요소의 최 상단의 요소에 clearfix를 추가해 주면 된다

HTML파일

<div class="btn_tab clearfix">
      <button class="act" data-index="0">1</button>
      <button data-index="1">2</button>
      <button data-index="2">3</button>                
</div>

CSS파일

.tab .btn_tab button{
    float:left;
    width: 33.33%;
    height:40px;
    border-right:1px solid #fff;
    background: #666;
    color: #f1f1f1;
    font-size: 14px;
    text-align: center;
    line-height: 40px;
    box-sizing: border-box;    
}

body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,dl,dd,ol,ul,fieldset,legend,figure,menu{margin:0;padding:0;border:0} table,th,td{border-spacing:0;border-collapse:collapse} ol,ul,li{list-style:none} h1,h2,h3,h4,h5,h6{font-size:1em;font-weight:normal} body,input,textarea,keygen,select,button{font:normal 12px/1.2 'Open Sans','Noto Sans',sans-serif} input,textarea,select,button{margin:0;padding:0;border-radius:0;color:#333;outline:0;vertical-align:middle} a:link,a:visited,a:hover,a:active{text-decoration:none} a,button,input[type='submit'],input[type='button'],input[type='reset']{border:0;background:transparent;cursor:pointer} img{border:0;vertical-align:top}

개발자와 디자이너 협업 스터디 진행중에 개발자코딩 폰트 이야기가 나와서

Inconsolata

이것을 사용한다고 해서 개발자 프로그래밍 코딩폰트를 조사해 보았다

https://futurecreator.github.io/2018/11/12/my-best-programming-font-top-3/

1. IBM Plex Mono

2. Hack

3. Source Code Pro

4. D2 Coding

https://blog.gaerae.com/2014/03/the-best-free-fonts-for-coding-programming.html

1. Source Code Pro

2. Monaco

3. ProFont

4. Bitstream Vera Sans Mono

5. Anonymous Pro

6. Inconsolata

7. Hermit

8. Edlo

9. Meslo

10. PT Mono

11. Envy Code

12. Ubutu Mono

13. Liberation Mono

14. Fantasque Sans Mono

15. Droid Sans Mono

16. Consolas Mono

17. Drucifer Monospace

18. BPmono

19. DejaVu

20. Fira Mono

21. D2 Coding

http://www.itworld.co.kr/print/89265

1. Monaco

2. Andale Mono

3. Monofur

4. Proggy Clean

5. Dejavu Sans Mono

6. Terminus

7. Consolas

8. Inconsolata

9. Droid Sans Mono

10. Menlo

11. Anonymous Pro

12. Ubutu Mono

13. Source Code Pro

https://steemit.com/kr/@jwsohn/8-fixed-width-font

1. Dejavu Sans Mono

2. Hack

3. Note Mono

4. Inconsolata

5. Consolas

6. Cousine font

7. D2Coding

8. 나눔코딩

https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl

https://gofullpage.com/

https://www.awesomescreenshot.com/

스크린샷은 물론이고 스크린 비디오도 찍을 수 있네요~

스크린샷 찍기 전에 표시도 할 수 있고 해서 넘 편하네요~ㅎ

https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=ko&utm_source