메모

0812 월 uiux 92일차

포트폴리오

사이트 1개

작업물 최소 3개(pc2, 앱1 퀄리티 ↑) 5개 이상

pc 반응형 3개 앱디자인 2개

한번 보기 ( https://youtu.be/y6TpP9fw1kc?si=RSs5bjvadW3rv7Ts )

- 직무능력 중심, 정성적(?) 평가

- 실무자 면접

- 워라밸이 지켜지고 성장이 가능한 회사 선호

지원서 검토 평균 10분

1. 직무 관련 경험 - 관련 경험에 대한 이야기

2. 지원 직무 분야 - 

3. 보유기술 및 교육이수

4. 보유 자격증

5. 전공, 학점 (학점 중요도↓)

광탈

기업명 오기재, 인재상과 무관한 정보

거짓말 티나는 지원서

식상

검증불가한 스펙&경력

많은 정보 나열

AI 무작정 사용 X <생성형 AI활용 >

1. 본인이 희망하는 직무가 무슨 일을 하는지

2. 희망하는 직무의 업무프로세스는 어떻게 되는지

3. 희망하는 직무의 성과지수(kpi)는 어떻게 되는지, 직무별 성과를 표?로 나타낸 것

4. 희망하는 직무에서 필요로 하는 역량은 무엇인지

5. 3~4번과 관련된 유사경험은 어떤 것들이 있는지

면접 경험 삼아 시도, 완벽은 없음. 

인적사항, 학력 및 교육 사항, 자격면허 및 수상경력, 개발자 포트폴리오 작성법

사진 - 눈썹과 귀가 보이게(여권사진처럼! 필터로 제출한 사람이 있다고,,? 실화냐), 정장(구청 대여 서비스)

인적사항 - 한, 영 생년월일(앞자리만), 주소지(회사 근처), 연락처(인터넷 번호 차단 금지), 

학력사항 - 재학 중퇴 졸업 등, 학교 명(증명 서류와 일치하도록), 학점(선택사항. 단, 공고상 기입 필수면 기재)

교육사항 - 직업교육 및 훈련내용 기재, 세부과정에 대한 설명(요구할 수도 있음), 필요 시 수료증 첨부

경력사항 - 회사명 + 부서명 확인, 기간(

자격면허 및 수상경력 - 면허증 자격증 수상내역 구분(직무와 연관된 것부터), 취득일 및 발행처 확인

외국어(요구 시에만) 회화/문서작성 능력 등 구분하여 적기

프로그램 - 정확한 프로그램명 명칭

디자인 포트폴리오 작성 목차

자기소개, 디자이너로서의 장점, 툴(혜지쌤은 필요없다했는데, 텍스트로만), 디자인 작품 설명(개요, 초기 수집된 자료와 컨셉), 습작 이미지, 스케치), 기타 작업물(10~15p 내외)

지원동기, 성장과정

하나의 파일로 합쳐서 제출

타겟, 홍보 방법(ppl, 잡지광고, dm요청 등), 니즈

경험 정리, 직무 제일 우선(직무>산업>회사), 깔끔 담백(길게X), 본질을 잊지 말 것(왜 나를 뽑아야되는지), 불리한 내용 적지 않기

BEI 기법

행동 사건 인터뷰

자기소개서 소제목(미리 파악 가능)

본문 내용 - 주제, 요약 (키워드, 내용 요약, 일관성, 연관성)

본문 내용 - 호기심 유도 (반어법, 대화체, 참신성, 창의성 잘 쓸 거 아님 비추)

역량 - 업무 수행 능력

목표 달성 능력, 문제 해결 능력, 실행력(추진력, 리더십), 분석력 의사소통 능력

목표달성을 위해 필요한 역량 - 문제 해결 능력, 실행력

성장과정, 성격의 장단점, 지원동기, 입사 후 포부

1) 의도

조직에 필요한 사람인지(인재상, 비전)

조직에 어떤 영향을 줄 것인지 예측

성장환경, 가치관, 성격형성

2) 준비

지원 기업/직무와 관련된 직무역량, 인재상 등과 같은 키워드가 드러나도록!

인격/가치관 형성의 결정적인 경험 기술

3) 주의

일대기적 작성 금지 (~한 부모님 밑에서)

시간 순서대로 적지 않기

어두운 개인사 등의 불리한 내용 먼저 언급X 

예) 계산되지 않은 물건 -> 함께 마트로 가서 누락된 금액 계산 -> 정직해야 한다는 교훈을 알려주셨다. (어린시절 에피소드)

성장과정에서 없더라도 읽었던 책에 대한 이야기로 얻은 교훈, 본인의 멘토 경험 등

교훈을 얻었던 경험, 교훈과 관련된 에피소드로 설득력, 포부 

직무별

단점과 단점을 극복하는 자세(회사가 궁금해함)

장점은 두괄식 기술, 장점에 관련된 경험

단점 - 개선 가능성, 양면성이 있는 단점(장점이 될 수도 있는 단점), 개선 방법의 명확성, 지나친 솔직 X

예) 신중, 말이 느림 -> 신중하기 때문에 실패 가능성이 없다(좀 더 현실성 있게 쓰기)

지나치게 남을 생각한다, 부탁 이해를 하지 못한 채 프로젝트 진행함, 번거로울까 봐 질문을 하지 못함, 결국 일 두 번 하는 번거로움이 생김 -> 경험 덕에 얻은 교훈, 배운 점. 이후 어떻게 행동했는지

장점 새로운 도전, 단점 반복적 업무를 견디기 힘들어 함

장점 1개, 뒷받침 사례 1개 이상

단점 1개(개선 가능성, 사례 1개, 극복 노력&극복 결과), 장점과 충돌되지 않는 장점

ㄴ단점과 단점으로 인해 생긴 경험, 그 경험을 통해 얻은 것, 이후 나의 행동

지원 동기&포부 같이 쓸 것(포부를 굳이 따로 쓸 필요 없음)

의도 - 해당 기업/직무 선택 이유 확인, 직무역량을 위한 준비와 노력 확인, 관심도 및 애정 확인, 

준비 - 회사 적응을 위한 노력, 능력, 기여 언급, 인재상, 비전, 제품, 최신이슈 등을 통해 조직 이해, 내용이 제한적일 경우 자신의 발전 계획 언급(계획 수립 & 실천 방안 소개), 기업의 방향성 숙지

주의 - 직무와 무관한 자기계발, 현실성 없는 목표와 노력 기재X, 기업설명 1~2줄 정도만 기재

<스토리 구조 만들기 - 활동 중심>

관련 활동 소개 및 느낀점

회사의 매력이나 가치에 대한 생각과 근거

기업중심

1) 경험 및 사건 소개

2) 연계나 회사의 차별적 매력, 가치 파악

3) 

직무 중심

- 어떤 경로로 해당 직문에 관심을 가지게 되었는지

 예) 이 회사의 어떤 제품에 관련하여 ~경험을 했다.

- 해당 직무를 위해 본인이 쌓아온 역량과 경험 제시

- 역량 발취 로드맵과 기대 성과 제시

자기소개서 주의 사항

1) 1인칭 주어 되도록 자제(남발 X)

2) 한 문장이 너무 길다면 나누기

3) 동일한 어휘와 표현이 가까운 위치에서 반복되지 않도록 배치

4) 외국어는 우리말로 순화(전문용어 및 대체 불가능한 언어 제외)

5) 구어체 수정은 필수(~하자 라고 생각했다)

6) 접속어 남발하지 않기(그리고)

7) 맞춤법과 띄어쓰기 지키기(일반적으로 지켜지는 것, 빨간 밑줄 최대한 덜 뜨게)

쓰기 전 경험 정리

나만의 필살기 만들기 - 직무 관련 경험 - 성공 경험 인사이트(예. 무에서 유 창조)

목표, 결과물, 역량

~하기 위해 카드뉴스 제작, 수상, 분석력

잡플래닛 

객관적으로 이상한거 거르기(예. 상사가 사무실에서 담배)

입사지원 현황표 만들기(tms 올라온 자료 활용)

서류지원 시기 - 등록일 순으로 체크

파일명 확인 기업명_직무_이름_이력서

바닥글 - 이름, 연락처, 이메일 주소

내용 - 

기한 엄수

성장과정, 성격 장단점 다다음주 금요일(23일) 전까지 제출 

칼 주식회사(일본), 도쿄, 오사카

엔지니어 부족

(일본경제산업성 상무정보정책국~~ meti.go.jp)

리액트

인재상 - 함께 성장, 도전(적응력)

입사 서포트가 잘 되어있음

기숙사(셰어하우스)

팀 작업

리뷰 예시) 

일정 관리가 없어서 캘린더 앱과 번갈아 써야 하는 점이 불편해요.

여행 일정을 계획하고 관리할 수 있으면 좋을 것 같아요.

숙소 예약과 일정 관리를 한 곳에서 할 수 있었으면 좋겠어요.

검색- 날짜선택, 지역별 검색

폰트사이즈 ( https://www.remain.co.kr/page/designsystem/font-size.php )

폰웹 이미지&영상 수집

( https://pixabay.com/ko/videos/%ED%95%B8%EB%93%9C%ED%8F%B0-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EB%B3%B4%EC%95%88-%EC%9E%85%EC%A6%9D-214736/ )

0801 목 uiux 85일차

( https://coderap.tistory.com/369 )

0731 수 uiux 84일차

0730 화 uiux 83일차

웹 국기, 자바스크립트 ( https://codepen.io/hjyee/full/PogMVOP )

2024-07, HTML, CSS, JS(Jquery) 복습 ( https://codepen.io/hjyee/full/JjQGOoa )

0729 월 uiux 82일차

페이지 안에 요소가 많이 안 들어가있으면 테일윈드 써도 괜찮음!

최소 5가지 - pc, 앱 버전 2~3가지씩 pc는 반응형

0726 금 uiux 81일차

parent, children

siblings :  형제

siblings 영상 설명 보고 영상 앞부분(50초쯤) prev, next, parent 외 여러가지 메소드들 정리해보기. inpa dev도 찾아보기

ul>li*10>div.faq-box__question>span{질문$}^div.faq-box__answer>lorem

ㄴ +가 아닌 ^

0726 _ 문제 - 아코디언 구현, 애니메이션 없는 버전 ( https://codepen.io/YoungHeom/pen/RwzGmgp )

mousedown, mouseup (클릭 중, 클릭 해제) ( https://codepen.io/YoungHeom/pen/vYqXqgj )

이거 만년필 페이지에 넣으면 좋을 듯?

0725 목 uiux 80일차

※ 제이쿼리 참고

Inpa Dev 👨‍💻 제이쿼리 메소드 종류 총정리  ( https://inpa.tistory.com/entry/jQuery-%F0%9F%93%9A-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-%EB%A9%94%EC%86%8C%EB%93%9C-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC )

제이쿼리 css 선택자 모음 ( https://inpa.tistory.com/entry/jQuery-%F0%9F%93%9A-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-%EC%84%A0%ED%83%9D%EC%9E%90-Selector-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC )

스크롤바 끄고 키기, 팝업 동시에 뜨게 하기

max-height: calc(100vh - 55px); 

'$('.btn-turn-off-scroll-bar')': 클래스명이 btn-turn-off-scroll-bar인 요소를 클릭했을 때

'.click(function() { ... });':발생할 이벤트를 설정하겠다.
$('body').addClass('active');: body 태그 선택, .addClass('active');: body태그에 'active'라는 클래스명을 추가한다.

• 팝업2 구현, 팝업을 늘릴 때 마다, CSS 추가를 안하도록 구조변경 
• html[class*="popup-"][class*="-actived"] 

이거 대신 

class라는 특성값을 가지고 있으며, 값 안에 "popup-"라는 문자열이 적어도 하나 이상 존재한다면 이 요소를 선택한다.

*= 설명 참고 ( https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors )

` - 백틱, 그레이브

( https://youtu.be/wnMyrIrne9Y?si=3fAR1dDup7Q1UkQA )

머지 배우고 있는 거 이름들이 이 채널 영상 제목이랑 유사한 게 많다 

웹개발 정보 - [Jquery] prev(), next() - 이전, 다음 요소 선택하는 방법 ( https://itprogramming119.tistory.com/entry/Jquery-prev-next-%EC%9D%B4%EC%A0%84-%EB%8B%A4%EC%9D%8C-%EC%9A%94%EC%86%8C-%EC%84%A0%ED%83%9D%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95#expand-wrap )

0724 수 uiux 79일차

삭제 버튼(예,아니오) ( https://codepen.io/YoungHeom/pen/KKjMjOm )

( https://codepen.io/YoungHeom/pen/MWMeNKr )

정답 - 팝업2 구현, 팝업 2개, 함수 1개로, 단계적 구현 18강 ( https://codepen.io/YoungHeom/pen/abgZedR )

문제 21강 ( https://codepen.io/YoungHeom/pen/ZEdOgOx )

정답 21강 ( https://codepen.io/YoungHeom/pen/oNrLKLR )

개념 - stopPropagation ( https://codepen.io/YoungHeom/pen/NWZrQdp ) return false;도 가능

문제 - 팝업2 구현, 팝업의 콘텐츠 부분을 클릭해도 꺼지지 않게 ( https://codepen.io/YoungHeom/pen/qBzNepz )

문제 - 팝업2 구현, 화면의 높이가 작으면 적절한 단계에서 스크롤바가 생기게 ( https://codepen.io/YoungHeom/pen/LYKZwBP )

문제 - 팝업2 구현, 팝업의 콘텐츠 부분을 클릭해도 꺼지지 않게( https://codepen.io/YoungHeom/pen/qBzNepz )

max-height:calc(50vh - 50px);

팝업창할때 사용한건데 암튼 공식임

0723 화 uiux 78일차 

8월 2일 능력단위평가 예정 - 스토리보드, 사이트 분석(비슷한 주제의 타 사이트 분석)

.popup__btn-close:hover::before, .popup__btn-close:hover::after

태그:hover::before(or::after) 태그를 호버했을때 태그 뒤에있는 비포 또는 애프터 선택

상위요소 flex, 하위 요소 트랜스폼 transform ( https://codepen.io/YoungHeom/pen/dyBXZRq )

0722 월 uiux 77일차 

버튼 하나로 바뀌는 배경색 ( https://codepen.io/YoungHeom/pen/MWMegeN )

자바스크립트는 클래스 이름 추가, 클래스 이름 지우기. 이 정도로만 사용하기(감독 역할)

제이쿼리로 css를 직접 바꾸지 않고 팝업 구현하기 ( https://codepen.io/YoungHeom/pen/xxoOKPg )

( https://codepen.io/YoungHeom/pen/ExByYOW )

너비 높이 안 주고 화면 전체만큼 배경색 주기

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

0719 금 uiux 76일차 

클릭할 때마다 배경색 변경, no 변수로 구분 ( https://codepen.io/YoungHeom/pen/ExBPBZR )

클릭할 때마다 배경색 변경, isRed 변수로 구분 ( https://codepen.io/YoungHeom/pen/NWZxZYp )

어떤 버튼을 눌러도 배경색이 바뀌게 하기 ( https://codepen.io/YoungHeom/pen/PorZrVG )

변경 ( https://codepen.io/YoungHeom/pen/eYwJqNb ) 온오프( https://codepen.io/YoungHeom/pen/Rwzrzza )

active(addClass)를 사용하는 방법이 더 좋다. js에서 css를 다루는 건 별로 좋지 않다. '클릭할 때마다~~ 구분' 이거 두개는 이런 방법도 있다 참고만 하기

두 이미지 교차 페이드 인/아웃 애니메이션 ( https://codepen.io/YoungHeom/pen/yLdezVY )

페이드 인/아웃 애니메이션 3장 ( https://codepen.io/YoungHeom/pen/abgdVbK )

phone_site 푸터 ( https://codepen.io/YoungHeom/pen/VwJYGWx )

0718 목 uiux 75일차 

퍼블리싱 기초 복습 - 1강 ( https://codepen.io/YoungHeom/pen/RwzrjxP )

퍼블리싱 기초 복습 - 2강 ( https://codepen.io/YoungHeom/pen/WNqrXYZ )

반응형 상단바 ( https://codepen.io/YoungHeom/pen/OJeMOGm )

animation: around 3s infinite; 이름 지속시간 반복횟수;

animation-name: 애니메이션의 이름

animation-duration: 애니메이션의 지속 시간
animation-delay: 애니메이션의 지연 시간
animation-iteration-count: 애니메이션의 반복 횟수
animation-play-state: 애니메이션의 재생 상태

두 이미지 교차 페이드 인/아웃 애니메이션 ( https://codepen.io/YoungHeom/pen/yLdezVY )

3장 ( https://codepen.io/YoungHeom/pen/abgdVbK )

0717 수 uiux 74일차 

( https://codepen.io/YoungHeom/pen/yLdYmqm )

( https://codepen.io/YoungHeom/pen/rNEOXZO )

(  )

이메일 발송 폼 ( https://codepen.io/YoungHeom/pen/Rwzrbpq )

ㄴ 근데 메일이 도착안한다. 왜지?

검색어 적기

cake, custom cake, mini cake, bakery kitchen, 

0716 화 uiux 73일차

360도 회전메뉴 ( https://codepen.io/YoungHeom/pen/vYqNWRG )

스와이퍼, 패럴렉스 ( https://codepen.io/YoungHeom/pen/NWZGwYw )

각종 폼 입력 요소 ( https://codepen.io/YoungHeom/pen/LYKpOrE )

포폴 혜지쌤 코드펜에서 가져옴 ( https://codepen.io/YoungHeom/pen/oNrjoaj )

0715 월 uiux 72일차

마우스 호버 시 커서 햇살 효과 ( https://codepen.io/YoungHeom/pen/rNEONyQ )

키프레임을 이용한 반전 ( https://codepen.io/YoungHeom/pen/QWXjWva )

페이지 만드는 속도가 느리면 피그마로 디자인부터 해보기기획의도 생각하면서 만드는 것 중요!(기획의도가 들어간 디자인, 이용자들이 ~를 느꼈으면 좋겠다, 버튼이 작고 안보여서 불편함을 느끼지 않았음 좋겠다. 탈퇴 버튼이 잘 보이게 해서 헤어짐도 깔끔한 사이트가 되고 싶다, 이런 컨셉이구나를 느꼈으면 좋겠다 등등,,)

phone_site 푸터 ( https://codepen.io/YoungHeom/pen/VwJYGWx )