[코딩온] 프론트엔드 입문 Day 14 (1차 프로젝트 발표)
·
📁 프로젝트 회고
너무 피곤해서 오늘은 쉬고 내일 할까 했다가 지금의 생각을 기록해야할 것 같아서 컴퓨터를 켰다.오늘은 드디어, 2주 넘는 기간동안 진행한 1차 프로젝트의 발표날이었다.프레젠테이션은 대학시절에 적어도 한 달에 한 번은 했던건데도 불구하고, 내가 글은 잘 쓰지만 말은 못하는 편이라서 많은 사람들 앞에서 발언을 해야한다는게 살짝 부담스러웠다. 그래서 주말 이틀간 팀원들이 만든 ppt를 보고, 어떤 순서로 발표할지 구성을 계획하고, 발표하다 버벅거리지 않으려고 실제처럼 ppt를 켜놓고 연습을 많이 했다.그리고 발표 당일, 출석체크를 한 후에 팀마다 발표자가 나와서 ppt 작동이 제대로 되는지 리허설을 했다. 우리 팀은 내가 발표 구성에 맞게 ppt를 수정해서 영상을 첨부했는데, 똑같은 MS의 파워포인트인데 al..
[코딩온] 프론트엔드 입문 Day 11~13 (1차 프로젝트 5~7)
·
📁 프로젝트 회고
이번주 역시 팀 프로젝트 진행 중이어서 일주일의 기록을 한번에 작성하려고 한다.✍️ 일단 지금까지의 상황을 정리하자면, 지난주에 웹 버전은 제작 마무리 단계였고 모바일은 이제 막 제작을 시작했었다.프로젝트 진행이 반환점을 돌면서 많은 것들을 느낀 한 주여서, 느낀 점도 같이 작성해보려고 한다.22일 월요일 - Day 11원래 계획은 이 날 점심을 먹고 출석체크가 끝나면 회의를 통해 주말동안 발견한 수정사항들을 공유하려고 했지만, 팀원 두 분이 건강상의 이유로 오지 못해서 대면회의를 못 했다.😅 회의에서 다루려던 내용들은 슬랙에 공유했고, 팀원 C와 하루종일 개인 작업을 진행했다. 이 날부터는 웹 버전에서 깜빡 잊고 추가하지 않은 기능들을 구현했고, 모바일에도 똑같은 기능을 추가했다.(쇼핑몰 페이지에서 ..
[코딩온] 프론트엔드 입문 Day 8~10 (1차 프로젝트 2~4)
·
📁 프로젝트 회고
지난 월요일(15일)부터 1차 프로젝트가 본격적으로 시작되고, 팀원들의 추천으로 내가 팀장이 되어 팀원들과 함께 프로젝트를 진행하다보니 정신이 없어서 이번주는 일주일치 기록을 한번에 작성하려고 한다.✍️일단 현재까지의 진행상황을 정리해보자면,11~12일(목~금)1. 팀원들 모두 참고할만한 사이트를 공유해보고, '가상의 의류 브랜드 쇼핑몰 만들기'로 최종 주제 선정.2. (패션도 분야가 다양하기 때문에) 우리가 원하는 레퍼런스 페이지 선정하고, 브랜드 이미지와 타겟층 결정.3. 컬러나 폰트 등 디자인적인 요소 결정하고, 페이지 제작 업무분담 완료.회의를 통해 이런 사항들을 결정하면서, 틈틈이 기획안도 작성했다.여기까지가 지난주에 진행된 내용들이고, 이번주는 진도가 아주 빠르게 나갔다. 솔직히 나를 포함해 ..
[코딩온] 프론트엔드 입문 Day 7 (1차 프로젝트 1)
·
📁 프로젝트 회고
첫번째 팀 프로젝트를 앞두고 지난 시간 귀가하기 전에 팀끼리 모여서 간단하게 인사를 나눴다.그리고 수업 3주차의 Day 7부터 1차 팀 프로젝트가 시작되었고, 이와 관련해 현업에 10년 넘게 종사하고 계신 디자이너님이 특강을 해주셨다.앞으로 진행하게 될 UI/UX 페이지 제작 팀 프로젝트는 각자의 포트폴리오가 될 예정이다.그러므로 디자인을 잘 하는 것보다 우리가 피그마를 얼마나 이해하는지 여부가 더 중요하다. 1. 어떤 페이지를 만들 것인지 주제 선정하기.업계에 따라 UI 선호도가 다르다. → 레퍼런스 사이트를 선정하고 '즐겨찾기'에 추가하기. 2. 페이지를 어떻게 만들 것인지 화면안 작성하기. (ppt, 노션) 이 과정은 기획자가 하는 일인데 주로 '화면의 설계도'를 의미한다.→ 페이지를 누가 사용하고..
[코딩온] 프론트엔드 입문 Day 5~6 (피그마 심화 2)
·
💻 Frontend/UI.UX.Figma
이번주는 지난주에 이어 피그마의 다양한 기능에 대해서 배웠다.일주일 전까지만 해도 ‘오토 레이아웃’ 이 어렵다고 생각했는데, 지금은 ‘컴포넌트’ 가 더 어려운 느낌!이제 배우기 시작해서 익숙하지 않아서 그럴거라고 위안을 삼아본다.😅컴포넌트 (Component)‘컴포넌트(Component)’ 는 반복적으로 사용되는 요소들에 규칙을 정하는 것.요소~모듈~템플릿~페이지 순서로 구성된다.컴포넌트를 사용하면 반복해서 사용하는 요소들을 한 번에 수정할 수 있어 작업 효율이 향상될 수 있다.컴포넌트는 원본과 복제본으로 나눌 수 있는데, 페이지 제작에는 복제본을 사용한다.◆ 마스터(master)가 원본. 자유롭게 수정이 가능하고, 마스터를 수정하면 복제본도 수정된다.◇ 인스턴스(instance)가 복제본. 원본에 없..
[코딩온] 프론트엔드 입문 Day 3~4 (피그마 입문 2, 심화 1)
·
💻 Frontend/UI.UX.Figma
수업 넷째날에 실습하느라 필기 내용이 많지 않아서 일주일치를 한번에 기록하기로 했다.🙂아무튼, 이번 주에는 지난주에 배운 피그마의 기능들을 복습하고 새로운 기능들을 배웠다.피그마 단축키가 많아서 정리의 필요성을 느끼고 있었는데 복습을 진행하며 리더님이 정리해주셔서, 수업 셋째날 귀가하자마자 복습 내용과 지난 시간에 배웠지만 복습에서 빠진 내용까지 모두 노션에 정리해두었다.👏텍스트 (Text)말 그대로 문자를 입력하는 툴. Inter에서 폰트를 선택하는데 사용 가능한 폰트가 매우 많았다!👍Regular는 굵기나 이텔릭체 등 스타일을 설정하는 곳, 옆의 숫자는 폰트 사이즈 설정.그 아래는 줄 간격을 의미하는 Line height, 글자 간격을 의미하는 Letter spacing.Paragraph spa..
[코딩온] 프론트엔드 입문 Day 2 (피그마 입문 1)
·
💻 Frontend/UI.UX.Figma
수업 둘째날이자 2023년 마지막 수업이었다.이 날은 ‘피그마’ 가 어떤 프로그램이고 어떻게 사용하는지 배웠는데,대부분의 기능이 올해 가을에 공부한 포토샵이랑 비슷해서 배우는데 수월한 편이었다.파일 형식과 해상도레스터(Raster) 형식은 ‘비트맵 방식’ 이라고도 하는데, 이미지를 픽셀로 표현하는 방식이라 확대하면 깨진다.벡터(Vector) 형식은 디지털 이미지여서 해상도에 영향을 받지 않는다.→ 깨지면 안 되는 이미지는 반드시 벡터 형식으로 작업해야 한다. UI/UX 디자인에서 많이 나오는 단어 중 하나인 ‘해상도’ 의 정확한 개념은 ‘화면에 표시되는 픽셀의 수’ 이다.숫자가 클수록 밀도가 높아지니까 해상도가 높아지고, 이를 표현하는 단위가 ppi/dpi 이다.ppi/dpi는 특정 영역 안에서의 픽셀의..
[코딩온] 프론트엔드 입문 Day 1 (UI/UX 이론)
·
💻 Frontend/UI.UX.Figma
서류~레벨테스트~인터뷰라는 과정을 거쳐 SeSAC 강동 3기 프론트엔드 입문과정에 합격했다! 수강신청부터 최종합격까지의 후기는 10년 전부터 운영중인 네이버 블로그에 기록했고, 앞으로 교육을 받으면서 배우는 내용을 깔끔하게 정리+아카이빙할 공간을 따로 만들고 싶었는데, 마침 첫 수업날 OT에서 개발 블로그로 티스토리가 괜찮다고 해서 바로 다음날 개설했다!👏이제부터 여기에 꾸준히 수업내용을 차곡차곡 기록할 예정.✍️개강 첫 날은 오전에 OT를 하고, 오후에 UI/UX 관련해서 이론 수업을 했다.UI (User Interface)UI = User Interface, 소비자가 제품/서비스를 이용할 때 처음 접하는 매개물UI 디자인이란 시각적 디자인을 의미한다.💡 UI 디자인에서 포인트 컬러 설정1. 중요도..