개발자의 기초 기본내용에 대해서 복습

-확실히 알려주면서 깨닫는 부분도 있고

-정리를 하면서 좋은 자료를 만들수가 있음

디자인 기초
-디자인이 어떻게 되어가는지 기초과정에 알게 되었고

-UX/UI관련으로 기초지식 쌓고 툴도 사용해 보고

-아이콘이나 배너 등을 어떻게 만드는지

-디자인 시안관련 프로세스 관련으로 지식 습득

퍼블리싱 해보자
-개인적인 일하는 범위를 확장하고 싶은 생각이 있었고

-개발자 입장에서는 디자이너와 중간에 있는 퍼블리싱까지 접근가능하다고 생각했었습니다

-퍼블리싱으로 포트폴리오 사이트나 알바를 할수있지 않을까 하는 막연한 생각도 있었구요~ㅎ

디자이너 인맥

-어떤 일을 할때 개발자에게는 디자이너가 필요한 부분이 있습니다

-이번 기회로 디자이너를 알아두어서 나중에 인맥으로써 부탁이나 함께 하는 일을 만들수가 있겠죠?

날짜:200718

CSS 1일차

reset CSS와 nomalize CSS가 있는데

reset CSS는 모든 태그의 설정을 초기화하는것이고

nomalize CSS는 브라우저의 태그 설정을 일치화 해주는 것

실무에서 reset CSS를 nomalize CSS보다 많이 쓰인다
왜냐면 초기화해놓고 하는것이 설정한 대로 만들 수 있기때문

브라우저의 설정이 있으면 그에 맞춰서 가야하기 때문

float속성 원래는 left 옆에 출력
float가 레이아웃을 위한 것이 아니기 때문에
.clearfix를 해줘야 함 그게 float가 적용되는 범위를 설정해준다
float가 적용되면 인라인이 된다

html5에서는 disable의 속성값에 true false안써도 된다

disable이나 안쓰면 true false가 되는 것이다~ㅎ

디자인관련

모바일 UX/UI 디자인시 고려해야 할 사항(2번째 시간)

https://brunch.co.kr/@chulhochoiucj0/8

아래의 사이트에서 잘된 디자인인지 아닌지를 테스트를 해볼 수 있습니다

https://cantunsee.space/

골드스푼은

인증, 경제력, 바른 만남

세가지 철학을 가지고 있습니다

비슷한 환경에서 자란,

비슷한 가치관을 가진,

아름다운 여성을 만나보세요

남자가입조건(서류 제출, 1가지라되면 가입가능)

수입차량 보유

or

전문직(의료인, 법조인, 5급이상 공무원등)

or

강남 3구 아파트 거주

or

20대 연소득 6천만원 이상

30대 연소득 7천만원 이상

or

고액자산 보유

여자가입조건

남자와 같은 인증 

or

가입된 남자들의 사진평가를 통해 가입이 가능

서류 인증이 되면 프로필에 뱃지가 생성됨(디테일하게)

차량

-수입차량

-슈퍼카(1.5억원이상의 슈퍼카)

거주지

-강남거주(강남구,서초구,송파구 아파트)

-고급아파트(20억이상 아파트)

직업

-전문직(의사, 변호사, 5급 공무원등)

-사업가(대표이사, 사업가 등)

소득

-고소득

-억대연봉(연소득 1억원이상)

개인자산

-고액자산(5억원 이상)

-초고액자산(20억원 이상)

집안자산

-엘리트집안

-금수저집안(100억원이상)

가입하고 인증서류등을 제출하고 인증완료되어야 앱사용가능

통상 2일이라고 나오는데 시간이 더 걸릴수도 있는듯

서비스내용

-데일리카드

데일리카드는 6일동안 유효

12시 3명, 15시 3명, 18시 3명, 21시 3명(매일 12명의 이성이 소개)

데일리카드는 호감을 보내고 수락시에 핸드폰 번호가 서로에게 공개됨

호감의 종류는 직진호감(20스푼)과 매너호감(5스푼)이 있고 차이점은 직진호감은 상대방수락시에 바로 핸드폰 번호가 공개, 매너호감은 상대방수락후에 다시 번호오픈하기위해 20스푼이 필요

-라운지

비공개 게시판같은 개념

라운지 호감(6스푼)을 보내고 상대방이 프로필보기(2스푼) 그리고 둘중에 아무나에게 20스푼 사용시 서로에게 핸드폰 번호가 공개되어서 이야기 할 수 있는 개념

-파티

지인소개로 많이 가입한다고 후기가 많고

나 역시 지인소개로 가입을 해보았음

확실히 여자분들은 외모가 출중하거나 능력이 되는 분들이 많음

30대후반부터 40대초반까지 사용해본 결론은
나이때가 확실히 젊은편
20대 30대초반이 많음
능력있는 분들 많아서
왠만해서는 연결이 쉽지 않음
특히 40대가 되면 호감도 보내오지 않음

남자회원

메시지보내기 유료

여자 프로필 열람권 유료

남자 프로필 열람권 유료

여자회원

메시지보내기 무료

남자 프로필 열람권 무료

여자 프로필 열람권 유료

남자로써 처음 가입하고 프로필 등록하자마자 연락이 왔음

그러나 그 다음부터는 먼저 연락오는 경우가 없었음

충천후 아아템이 바로 구입되니 충천만 하려면 별도의 확인시스템 거쳐야함

신규멤버리스트 무료로 볼 수있음(프로필 열람과 메시지 보내기는 남자회원과 여자회원 각가 다름)

남자회원, 여자회원 검색가능

재혼, 결혼 검색 가능

지역별 검색가능

새로고침의 개념처럼 위로 올리기 기능 수시로 해줘야 함

그런데 해줘도 연락이 막 오거나 하지는 않음(남자입장)

인증시스템 있음

혼인관계증명서, 학력증명, 소득증명, 차량증명, 본인인증이 있는데 꼭 한다고 연락이 막 오거나 하지는 않은듯

===느낀점

남자 회원이 여자회원보다 훨씬 많음

재혼이든 결혼이든 할려고 하는 사람 참 많네~

등급이 있음을 느낌(내 위치를 확인하게 됨)

기존의 소개팅앱이랑 차원 틀린다(뭔가 진실성 있는 분들이 있는것 같기도 함)

30대후반부터 40대초반까지 사용해본 결론
초반에는 사람 많고 연락할수 있으나
나중에는 계속 머무는 사람들이 많아서
새로 유입되는 사람만 찾게됨
다만 저렴하게 이용가능하고 정보가 많아서 좋음

날짜:200704

HTML5

디자인관련

웹디자인 작업시 유의해야할점

1. 트랜드에 맞게 디자인했는지 확인

2. 느린 로딩시간은 금물

3. 이미지 사용시 고품질의 이미지를 사용한다

4. 너무 많은 컬러를 사용하지 않는다

2~3가지 색상으로 제한해서 사용한다

5. 기기에 상관없이 동일한 경험 제공하기

적응형과 반응형의 차이점 설명은 아래링크에서 확인

https://blog.naver.com/eirene100999/221652032305

6. 사용하기 쉽고 명확한 네비게이션 디자인하기(네비게이션은 간결성, 명확성, 일관성을 가지고 있어야 한다)

7. 클릭 가능한 요소는 정확하게 알려라

버튼 디자인을 위한 7가지 기본규칙은 아래링크에서 확인

https://joylife052.tistory.com/entry/%EB%B2%84%ED%8A%BC-%EB%94%94%EC%9E%90%EC%9D%B8%EC%9D%84-%EC%9C%84%ED%95%9C-7%EA%B0%80%EC%A7%80-%EA%B8%B0%EB%B3%B8-%EA%B7%9C%EC%B9%99-%E2%80%93-UX-Planet

8. 광고는 적절하게 복잡하지 않게 디자인하기

배너광고회피(banner-blindness)현상에 관련된 자료 설명

cafe.naver.com/netmaru/17117

예전사이트를 검색해볼수 있는 사이트

https://web.archive.org/

2020년 트랜드 웹디자인 및 피하면 좋을 디자인 참고 자료

2020 웹 디자인 트렌드 TOP9

nhj12311.tistory.com/256

한 번에 알아보는 2020 트렌드 웹 디자인

blog.naver.com/kosoodream/221790295323

모바일 UI디자인을 위한 UX원칙 10가지

1. 우리는 사용자가 아니다

사용자의 입장을 객관적으로 살필수 있는 가장 좋은 방법은 데이터 관찰, 데이터는 실제 사용자가 행동한 결과를 바탕으로 나타나기 때문에 논쟁보다는 문제 해결에 초점을 맞추도록 도와준다

2. 각화면에서 한가지 행동에만 집중하게 한다

스마트폰 화면은 아주 작다.따라서 한 화면에서는 한가지 행동에만 집중하게 한다

3. 반응을 보여줘야 한다

버튼을 누를때 로딩바이든 토스트이든 반응을 보여줘야 한다

마이크로 인터렉션 : 사용자에게 섬세하게(입력중에도) 반응해, 사용자가 도달해야 할 목표까지 매끄럽게 가도록 돕는 디자인(비밀번호 등록시에 적용하면 좋다)

4. 맥락 있는 흐름을 만든다

광고, 앱스토어, 앱 연결하는 흐름을 만들자

5. 시각적 일관성을 유지한다

컬러, 폰트, 버튼, 이미지, 아이콘, 간격 등등 일관되어야 한다

6. 예상할 수 있어야 한다

같은 속성은 통일하여 무의식 중에 예상할수 있도록 만들 수 있다

7. 의미있는 움직임만 보여준다

체크했을때만 버튼이 보여준다던지, 입력했을때만 버튼을 보여준다 던지 등이 의미있는 움직임 이다

모션은 좋은 사용자 경험을 위한 도구여야 한다. 모션 자체가 목적이 되면 안된다. 사용자의 시선을 움직임이 있는 버튼으로 향하게 만들어 자연스럽게 버튼을 누르는 행동을 유도할 수 있다.

8. 누구나 이해하기 쉬운 글을 제공한다

삭제하시겠습니까의 확인창에 확인과취소가 아니라 취소와 전체삭제(삭제)가 있으면 좀더 명확하게 쉽게 전달된다

9. 사용자의 익숙함을 존중한다

기존꺼에서 최대한 비슷하게 해야함

10. 필요한만큼만 단순하게 디자인한다

https://brunch.co.kr/@dalgudot/110

모바일 UI/UX 디자인시 고려해야할 사항

https://brunch.co.kr/@chulhochoiucj0/8

그외 참조사이트

brunch.co.kr/@ebprux/628

brunch.co.kr/@ebprux/616

brunch.co.kr/@ebprux/562

brunch.co.kr/@ebprux/503

brunch.co.kr/@ebprux/447

brunch.co.kr/@chulhochoiucj0/8

brunch.co.kr/@designpopceo/26

2020년 6월 27일

개발자와 UI/UX디자이너간의 소통할 수 있는 UI가이드관련 프로그램(프로토타이핑 툴이라고 이야기한다)

1. 제플린

https://zeplin.io/

1개 프로젝트 무료 이상은 유료

https://www.sharedit.co.kr/zeplin

2. 피그마

https://www.figma.com/

https://brunch.co.kr/@seeyeonj/18

3. 스케치(맥전용-유료)

4. 어도비XD

디자인 가이드 참고

구글 - https://developer.android.com/design?hl=en

애플 - https://developer.apple.com/design/human-interface-guidelines/

기본적인 디자인 가이드는 애플과 구글 사이트에서 참고하면 된다~

해상도별 사용자 분포현황

gs.statcounter.com/screen-resolution-stats/desktop/south-korea

최대로 많은 해상도를 기준으로 작업하지 않고 최소로 사용하는 해상도를 기준으로 만들어 넣고 남은공간은 해상도에 맞춰서 늘어날 수 있게 한다

위의 해상도 분포 현황이 이런데 가장 작은 사이즈인 1280*720 해상도 맞춰서 레이아웃을 잡고 남은 해상도에 맞춰서 늘어날수 있게 작성한다

웹 레이아웃 관련 용어

http://designbase.co.kr/webdesign-2/

UX

UI

Responsive Web

Web Style Guide

Affordance

Layout

Grid

GNB

LNB

사이드바

헤더와 푸터

CTA

input창 / placeholder / label

Favicon

웹서버와 웹호스팅

도메인

웹 퍼블리싱

크로스브라우징

SEO

GA

디자인베이스 강의 - 레이아웃 그리드 관련

youtu.be/Q_gcAAKfGKw

https://brunch.co.kr/@clay1987/98

디자인 소스 및 정보 모음

http://koreawebdesign.com/link/

디자이너들이 많이 사용하는 사이트

https://www.pinterest.co.kr/

https://www.behance.net/

https://dribbble.com/

https://logopond.com/

로고

https://logospire.com/

로고

국내관련 사이트 모음집

https://www.dbcut.com/bbs/index.php

www.gdweb.co.kr/main/index.asp

rwdb.kr

반응형웹사이트만 모음

해외사이트 모음집

https://www.awwwards.com/

www.thebestdesigns.com/

www.cssdesignawards.com

CSS를 적극 활용한 웹사이트 모음

https://thefwa.com/

디자인 시안작업순서

1.처음 기획서를 받으면 여기저기 검색을 해서 괜찮은 사이트를 캡쳐해놓거나 주소를 저장해 놓는다

2.컨셉과 구도를 잡았으면 시안작업을 한다

3.시안을 그려나가면서 어떻게 구성하고 어떤 효과를 줄것인가도 염두하면서 작업을 한다

최근에 개발자와 디자이너간의 스터디 하면서 괜찮은 자료를 찾아서 이렇게 공유한다

2017버젼

https://github.com/kamranahmedse/developer-roadmap/tree/ee2b3e5de0e2a9ccccf3f2bbe4687f150df976f4

2018버젼

https://github.com/kamranahmedse/developer-roadmap/tree/67a72aab113e79c11e292ada394606f079f6a263

2019버젼

https://github.com/kamranahmedse/developer-roadmap/tree/347831feaed227f42525e829ccc8d84a22386952

2020버젼

https://github.com/kamranahmedse/developer-roadmap

2020버전 - Frontend Roadmap

2020버전 - Back-end Roadmap

2020버전 - DevOps Roadmap

기술들이 사라지고 새로 생겨나고 있다는~

참 변화가 많은 곳인것 같기도 하다

특히 프론트 쪽이 많이 바뀌는듯 하다

1)ORA-01789 : 질의 블록은 부정확한 수의 결과 열을 가지고 있습니다

유니온되는 쿼리의 결과값들이 열이 맞지 않을때 발생
즉 쿼리의 결과 옆을 맞춰주면 해결

2)ORA-00933: 명령어가 올바르게 종료되지 않았습니다

order by 절이 가장 마지막에 있어야 하는데 중간에 있을때 발생
즉 order by절은 union쿼리의 가장 마지막에 있으면 해결

자바스크립트

브라우저 창 강제로 닫기
부모창 묻지 않고 닫기
묻지 않고 창 닫기

top.window.close();
나
parent.close();
부모창을 닫을때 위의 두 함수를 이용하는데
그때마다 지금 보고 있는 웹페이지 창을 닫으려고 합니다. 이 창을 닫으시겠습니까?
라는 confirm창을 뜨게 되는데요

이 confirm이 안뜨면서 부모창을 닫을려면 다음과 같이 하시면 됩니다
parent.window.open('about:blank','_self').close();
부모창을 닫아야 하는데 open을 써야 하는게 이상할수 있지만 이게 됩니다^^

오늘 친한 지인과 이야기 하다가 데이터분석쪽으로 진로관련 이야기를 하다가 파이썬의 이야기가 나왔는데

파이썬이 메인이 될 수 없는 이유에 대해서 이야기를 하게 되어서 정리해 본다

1)상용으로 사후지원되지 않는다는 것이다

메인언어로 자바가 있는데 자바는 오라클이라는 회사가 상용으로 서비스지원을 해주기도 한다

보통은 큰회사에서는 사후지원이런게 중요하고 돈으로 그것을 해결할려고 한다

하지만 파이썬은 그런면에서 비용은 안들 수 있지만 반대로 지원해주는 곳이 없기도 한 것 같다

그리고 버젼에 대해서 관리해주는 것이 없는 거 같기도 하다

2)고급 인력이 많이 없다

활용하는 분들은 많고 진입하는 분들은 많지만 고급인력이 부족한 것 같다

아마도 1번의 메인언어가 되지 않아서 그런것 같기도 하다

파이썬언어자체가 쉽고 스크립트언어라도 그런것도 있겠지만 파이썬만으로 공식적인 서비스를 하는 곳이 많이 없어서 이기도 한것 같다~