블로그

최신순
인기순
좋아요순

[인프런 워밍업 스터디 1기 디자인] 오리엔테이션 준비하기

안녕하세요! 지식공유자 볼드입니다. 최근에 인프런 워밍업 스터디 클럽 1기에서 프로덕트 디자인 코치로 참여하게 되었어요.준비 과정이 꽤 새로웠고, 많은 것을 배우는 시간이었습니다. 오늘은 제가 어떻게 러너분들과 첫 만남을 위해 준비를 하였는지 알려드리고자 해요. 첫 만남을 미리 계획하다저는 4주 전부터는 0기 코치님들이 남겨둔 자료들을 보며 어떻게 하면 더 좋은 오리엔테이션을 만들 수 있을지 고민했어요. 구조부터 차근차근 짜고, 내용을 채워 넣어서 빠르게 프레젠테이션을 완성했습니다. 첫만남인 만큼 어떻게 하면 더 재미있고, 참여자들과 적극적으로 소통할 수 있을까 고민을 많이 했어요. 그래서 피그잼을 사용한 워크샵 형태로 진행하기로 결정하고, 세 가지 큰 원칙을 세웠습니다:많은 정보를 빠르게 명확하게 전달하기최대한 재미있고 인터랙티브하게 이야기가 살아있는 컨셉 유지하기 다행히 ‘러너’라는 주제가 이미 있어서 그걸로 컨셉을 잡았고, 다음과 같은 여정으로 구성해 보았어요.🚀 출발: 워밍업 클럽을 시작하게 된 이유🗺 코스: 워밍업 클럽의 미션들🎯 도착: 워밍업 클럽을 마치고 받게 되는 혜택들 OT 시작 전에는 새 직장에서 바쁠 것 같아서 미리 인프런 담당자 셰리님과 자료를 공유하고 점검하는 시간을 가졌어요.그리고 막상 OT 주간이 되니, 예상대로 정신 없었습니다. OT 당일에는 반차를 내고, 오전에 교회에서 성경공부를 마치고 집에 돌아와 커피 한 잔 마시며 마지막 준비를 했죠. 러너 분들과 드디어 만나다영국시간으로 12시에 시작했어요.(한국 시간으로는 오후 8시), 제가 먼저 짧게 발표를 먼저 진행하고 러너 분들은 질문에 따라 각자 글을 작성하셨어요. 작성 후에는 서로의 글을 보며 하트를 남기는 시간을 가졌는데, 이게 생각보다 더 재미있었던 것 같아요. 미리 준비한 탭으로 미션 정보를 빠르게 효과적으로 보여드리고, 원래 OT 전까지 블로그 글을 쓰지 못했는데 셰리님의 빠른 대처로 발자국 미션 시연을 성공적으로 마칠 수 있었어요. OT 끝나고 난후워크샵이 끝난 후, 참가자분들의 피드백을 부탁드렸어요. 피드백을 보고 나니 제가 준비한 만큼 결과도 좋았다는 생각이 들더군요.(아래는 제가 몇개 선정한 감사한 피드백!) 2기에도 제가 참여할지는 아직 모르겠지만 2기에도 오리엔테이션 준비 경험을 살리거나 또 다른 코치님들이 사용할 수 있도록 이 피그잼 보드를 템플릿화하면 좋을 것 같아요. 또한, 이 방식을 다른 온라인 강의에서도 활용할 수 있을 것 같아요. (필요하신 분들은 알려주세요. 무료 나눔해드릴게요!) 마지막으로 인프런 워밍업 클럽 이전에 제가 진행한 인증샷 스터디에서 수강생과 교류가 있으면 좋을 것 같다는 의견이 있었어요. 처음엔 이걸 어떻게 개선해야할지 막막했는데, 인프런 워밍업 클럽을 참여하면서 이 문제를 해결할 수 있었어요. 그리고 셰리님을 포함한 인프런 팀이 없었다면 이 모든 게 불가능했을 거예요. 정말 감사드립니다! 인프런팀 만세! 앞으로 남은 세 번의 특강, 워크샵을 어떻게 준비할지 계획 중인데, 라이브 튜토리얼과 프레젠테이션을 어떻게 잘 조합할지, 함께 만들어가는 워크샵 과정이 어떨지 기대되네요. 인프런 워밍업 클럽 1기에 참여하신 모든 러너분들 다같이 파이팅해요 🔥

UX/UI･워밍업클럽･디자인시스템･피그마

[인프런 비즈니스] 로드맵 구성해보기

안녕하세요.인프런 비즈니스팀 제리입니다. 🙂 최근 로드맵 기능이 업데이트되어 이제 누구나 로드맵을 만들 수 있도록 변경이 되었습니다~!🎉🎉로드맵 기능을 비즈니스로 활용하실 수 있는 방법을 소개해드리려고 해요. 첫번째! 로드맵을 전체 공개하여 우리 회사 임직원 뿐 아니라 우리 회사에 관심이 있는 모든 분들이 우리 회사 추천 강의를 볼 수 있게 하기.예시) "인프소프트 신입사원 교육 커리큘럼" 두번째! 로드맵을 비공개하여 우리 임직원 분들에게만 제공하기.우리 임직원 분들에게만 공개하고 싶으신 경우에는 인프런 비즈니스팀에 살짝 문의해주세요. 😁예시) "인프상사 임직원을 위한 강의 커리큘럼" 교육 담당자분께서 추천하고 싶은 강의로 형성된 로드맵을 만들어 제공해보세요!! 😆 예시) 인프런 비즈니스에 대해 궁금하시다면 언제든 우측 하단 물음표 버튼을 눌러서 문의해주세요!저희 인프런 비즈니스팀은 언제나 교육 담당자님의 문의를 기다리고 있겠습니다. 😘 ※ 관련 공지사항https://www.inflearn.com/notices/1201056

경영･인프런비즈니스･사내교육･역량강화교육･기업교육･IT교육

[쿠어클#4] 쿠버네티스 무게감 있게 설치하기

안녕하세요. 쿠버네티스 제대로 시작하기 첫 강의로 쿠버네티스 환경 구축을 해보겠습니다.아래 정말 쉽고 빠르게 쿠버네티스를 설치하는 방법이 있어요! 쿠버네티스(v.1.27.2) 쉽고 빠르게 설치하는 방법Virtualbox 설치 (link)Vagrant 설치 (link)Vagrant 스크립트 실행 (윈도우 > 실행 > cmd > 확인)# Vagrant 폴더 생성 C:\Users\사용자> mkdir k8s C:\Users\사용자> cd k8s # Vagrant 스크립트 다운로드 C:\Users\사용자\k8s> curl -O https://raw.githubusercontent.com/k8s-1pro/install/main/ground/k8s-1.27/vagrant-2.3.4/Vagrantfile # Rocky Linux Repo 세팅 C:\Users\사용자\k8s> curl -O https://raw.githubusercontent.com/k8s-1pro/install/main/ground/k8s-1.27/vagrant-2.3.4/rockylinux-repo.json C:\Users\사용자\k8s> vagrant box add rockylinux-repo.json # Vagrant Disk 설정 Plugin 설치 C:\Users\사용자\k8s> vagrant plugin install vagrant-disksize # Vagrant 실행 (VM생성) C:\Users\사용자\k8s> vagrant upMobaXterm 설치 (link)Master 원격 접속 : 192.168.56.30:22 (root/vagrant)Pod 확인kubectl get pods -A대시보드 접속 URI : https://192.168.56.30:30000/#/login FAQ : virtualbox 설치 안될 때 (link), vagrant up 안될 때 (link), dashboard 관련 (link), virtualbox Host-Only Network cidr 변경 (link)Cafe : 쿠버네티스 빠른 설치 카페 참조 (link) 정말 쉽죠?하지만 저는 쿠버네티스 설치를 쉽고 빠르게 한다고 해서 좋은 건 아니라고 생각합니다. 쿠버네티스 오브젝트들, Pod나 Service를 공부하면서 개념이나 기능만으로 이 기술을 이해하는데는 한계가 있거든요. 쿠버네티스 자체 구성을 조금은 알고 이 개념들을 공부하는게 더 잘 이해가 잘 되요. 그리고 쿠버네티스 구성에 대한 부분들은 쿠버네티스를 설치할 때 가장 배우기 좋은 내용입니다.그렇기 때문에 Pod를 빨리 만들어보고 싶은 마음도 이해하지만 쿠버네티스를 제대로 공부하고 싶으신 분이시라면, 이번 설치 강의를 통해서 쿠버네티스 구성을 꼭 이해하고 넘어가길 권해드려요. 아니 꼭 이렇게 하셔야되요! 쿠버네티스 무게감 있게 설치하는 방법 1/2먼저 설명에 시작은 내 PC에 Virtaulbox랑 Vagrant를 설치한 상태고요. 제가 만든 Vagrant 설치 스크립트를 받으면 위에 내용이 나와요. 그리고 이 스크립트는 크게 [Virtualbox로 Rocky Linux를 생성]하는 파트랑 [kubernetes를 설치]하는 파트로 구분되는데 먼저 Virtualbox로 VM을 생성하는 걸 설명 드릴께요. 우측 스크립트를 위에서 부터 보면, OS를 [rocky linux 8]버전으로 설치하라는 내용이고, 처음 설치할 때는 이 이미지를 다운 받는데 시간이 좀 걸려요. 그리고 [master-node]는 Virtualbox 입장에서 생성된 VM에 이름을 붙여주는 부분인데, Virtualbox UI 상으로 봤을 때 보이는 이름 이예요. 그리고 밑에 hostname 을 지정하는 부분이 있고, [k8s-master] 라고 넣으면, 나중에 원격접속으로, 리눅스에 들어 갔을 때, 나오는 호스트 이름입니다. 그리고 밑에 [private_network]는 virtualbox에 Host-Only Network 라고 해서, 내 PC 에서만 사용할 수 있는 네트워크망을 만들어 주고, 스크립트에서 IP를 주면 내 Linux에 그 IP가 할당됩니다. 그래서 우리는 내 PC에서 이 IP로 원격 접속을 하면 Linux OS에 들어갈 수 있게 되는 거고. 브라우저를 통해서 kubernetes dashboard에 접속 할 수도 있게 되요. 이렇게 이 스크립트 한 줄로 Host-Only Network가 만들어지고 IP가 할당 되는데, 스크립트에 넣지 않아도 Vagrant가 기본적으로 만들어주는 네트워크가 있어요.바로 NAT 라는 네트워크고 입니다. IP도 알아서 할당 돼요. 이 NAT의 역할은 내 VM을 외부 인터넷이랑 연결 시켜줍니다. 그래서 이따가 쿠버네티스를 설치할 때 필요한 패키지들을 받는데 사용하고요 실제 내 PC에 할당된 Network는 공유기에서 할당 받은 상태죠. 제 PC의 경우 [192.168.219.100]의 주소를 할당 받았고요. 제 공유기는 192.168.219까지는 고정이고, 뒤에 4번째 자리는 1~255까지 만들 수 있는데 자동으로 100이 할당 된 거예요.근데 Host-Only Network를 보면 디폴트로 192.168.56까지 고정이고, 네 번째는 1~255까지 만들 수 있는 네트워크 입니다.네트워크를 생성할 때 cidr 을 정하면, 이렇게 지정한 범위 내에서 IP가 할당 되는데, 네트워크 원리는 잘 몰라도, 최소한 대역들이 겹치면 안된다는 건 알고 계셔야 돼요. 겹치게 되면 내 공유기랑 Virtualbox가 똑같은 IP 를 만들 수 있게 돼서 IP 충돌이 나요. 근데 이 공유기 환경이 개인 마다 다른 부분이라서 혹시 원격 접속이 안되시는 분은 본인에 Network 대역을 확인해 보시고요. 부득이한 경우 Host-Only Network에 cidr 을 수정해 주면 돼요. 제가 카페에 방법을 올려 놓을께요. 여기까지 네트워크에 대한 설명이 이었습니다.이번엔 자원(resource)을 볼께요.스크립트를 보면 VM에는 Memory는 4G고 CPU는 4Core를 잡았어요. 제 PC에 자원을 보면 제 PC는 4Core, 16G Memory거든요. 여기서 분명 Memroy는 내 자원에서 나눠 주는 거라 VM에 자원 할당한 게 이해 되는데, CPU를 이렇게 다 줘버리면 내 PC는 괜찮을까 걱정되는 분이 계실 거예요.근데 이 두 자원의 속성을 보면 Memory는 서로 할당된 공간을 침범하면 안돼요. A프로그램이 쓴 메모리 공간에 B프로그램이 침범해서 내용을 바꿔버리면 안되잖아요? 그래서 꼭 자원을 철저하게 분할해서 써야 되는 성격이라면, CPU는 필요로 하는 순간에 서로 나눠 쓰는 자원이예요. 그래서 현재 이 CPU 할당에 의미는 내 PC CPU가 필요할 때는 4 Core를 다 쓸 수도 있고. VM에서도 필요할 때도 최대 4Core를 다 쓸 수 있도록 설정 한 건데, 만약 둘 다 CPU가 필요한 상황이라면 이 4core 자원을 나눠쓰고요. 대신 처리속도는 좀 느려지지만 문제는 없어요.참고로 쿠버네티스 설치 문서에 권고하는 CPU는 2Core 이상입니다.이 CPU와 Memory에 대해서 제가 4 Core를 준 이유와 각자가 작업 유형에 맞게 변경을 하시라고 자세히 설명 드렸지만, 이 두 자원에 대한 성격은 쿠버네티스에도 Pod에 자원을 할당하거나 Pod가 늘어나는 설정을 할 때, 정말 중요하게 고려해야 되는 포인트라서 이 자원에 성격을 자세히 얘기 해봤어요. 쿠버네티스 무게감 있게 설치하는 방법 1/2 [구간별상태확인]카페(아직 공사중)에 들어가보면 각 포인트에 대해서 잘 설치됐는지 확인 볼 수 있어요. (link) 쿠버네티스 무게감 있게 설치하는 방법 2/2위 내용은 강의의 메인으로 쿠버네티스 설치인데 강의에서 자세히 설명 드립니다. 지금까지 설명 드린 강도랑 내용보다 좀 더 깊어지는 점 주의 드려요.쿠버네티스 설치는 확실히 쿠버네티스 문서(link)를 보는게 좋습니다. 내가 설치하려는 버전이 있는데 블로그에서 다른 버전이나 최신버전 설치를 보게 되면, 미묘하게 잘 안되는 부분들이 생기거든요. 그래서 그 원인을 찾는데 시간을 더 쓰는 경우도 생기는데, 쿠버네티스는 컨테이너 한방 정리에서 히스토리로 봤듯이 내부적인 변경사항들이 많아서 그래요. 그래서 쿠버네티스 문서에서 필요한 버전별로 설치 가이드를 보는 게 좋고 쿠버네티스 문서가 한글화도 잘 되있거든요. 전 이 한글화 된 문서를 정말 열심히 보고 있고 이 한글화 작업하시는 분들께 항상 감사 드리는 마음입니다. 이 강의 설명의 목적은 쿠버네티스 설치 문서를 함께 공부하면서, 수강생 분들이 이 강의를 잘 들으면 이 강의에 설치 뿐만 아니라 다른 버전으로 쿠버네티스를 설치하거나 컨테이너 런타임을 바꿔보고 싶을 때 스스로 찾아서 할 수 있는 능력을 길러 드리는 거예요. 쿠버네티스 무게감 있게 설치하는 방법 2/2 [구간별상태확인]마찬가지로 카페(아직 공사중)에 들어가보면 각 포인트에 대해서 잘 설치됐는지 확인 볼 수 있어요 (link) 나중에 다른 사람과 똑같이 쉽게 쿠버네티스를 설치하더라도 이렇게 공부하면 한번에 클릭이 좀 더 무게감 있는 사람이 됩니다. 가끔 보면 그냥 빨리빨리 버튼 누르고 진행할 수 있는 상황에도 버튼 하나 누를때마다 한참 생각했다가 누르는 사람이 주변에 있지 않나요? 그 사람이 아는 게 많을 수록 이 버튼 누르는 속도는 더 느려져요. 이 사람은 겉으로는 답답해 보일 수 있는데, 머릿속에는 엄청 많은 정보들이 스쳐 지나가고 있는 겁니다.여러분도 이렇게 되시길 응원 드려요! 그럼 이번 블로그는 여기까지고요, 해당 강의에서는 실습과 더불어 추가적으로 아래 내용들에 대해서 더 다룹니다 😀[쿠버네티스 어나더 클래스] : https://inf.run/unreT 좋아요 ♡는 저에게 큰 힘이 됩니다 :)

데브옵스 · 인프라･인프런･쿠버네티스･어나더클래스･지상편･일프로･kubernetes･devops･kubeops･container･쿠버네티스설치

[쿠어클#7-1] Application 기능으로 이해하기-Pod (probe)

쿠버네티스를 공부 하다보면 경계를 해야 되는 상황이 있어요. 내가 어떤 개념을 힘들게 공부하고 사용법을 익혔을 때, 그 기능을 내가 하는 프로젝트에 적용 시키고 싶은 마음이 생기죠?여기까진 좋은데.그 기능을 적용함으로써 "운영에 불편한 관리 요소가 생기진 않을지?", "오히려 시스템에 복잡도만 증가 시키는 건 아닐지?" 는 충분히 고민하지 않는 경우가 있습니다.예를 들어, 쿠버네티스에는 NetworkPolicy 라는 object가 있는데, 쉽게 말해 Pod들 간에 방화벽 역할을 하는 는 기능 이예요. 보통 큰 프로젝트 환경을 보면 별도로 보안을 담당하는 사람이 있고, 내부 시스템을 외부에서 연결할 수 있도록 하거나 시스템 간에 통신을 해야 할 때 이 담당자한테 방화벽 오픈 신청을 먼저 하죠. 이렇게 전체적인 시스템에 대해서 방화벽이 관리되고 있는데, 쿠버네티스 클러스터 안에 NetworkPolicy를 적용하고 별도에 내부 방화벽 정책을 또 사용 할지에 대해서는 꼭 그렇게 해야 되는 이유를 충분히 고민 해봐야돼요.근데 오늘 배울 이 쿠버네티스의 기능은 백퍼센트 사용을 해야되지만 내 Application에 대한 충분한 이해가 없으면 생각지도 못한 장애를 만날 수가 있습니다.바로 Pod에 probe라는 기능인데요.실제로 저도 Pod가 내가 의도하지 않은 상황에서 죽었을 때, 원인을 분석하다 보면 이 기능을 잘못 사용해서 그랬던 적이 있을 만큼 정확하게 이해하고 적용 시켜야 되는 기술입니다. Pod (probe) - 프로브 기본 개념 3가지 종류가 있고 모두 /ready라는 url을 8080포트에 10초 간격으로 날리는데, 각각 성공이랑 실패에 대한 수치는 위 그림처럼 되어 있다고 해볼게요.컨테이너 안에 있는 App에서는 /ready라는 url이 사전에 만들어져 있어야 되고 Pod가 만들어지자마자 이 probe 기능들은 동작합니다.App은 처음 기동 중인 상태가 있고, 이때 쿠버네티스가 startupProbe 기능을 동작 시키면서 오브젝트 속성에 있는 대로 10초에 한 번씩 /ready라는 api를 App에 날려요. 기동 중일 때는 응답을 받을 수 없으니까 계속 실패가 될꺼고 10번 실패하기 전에 한번이라도 응답이 오면 성공으로 간주합니다. startupProbe 가 성공하면, 쿠버네티스는 startupProbe 기능을 중지 시키고 livenessProbe랑 readinessProbe기능을 동작 시킵니다. 그리고 또 설정 한대로 두 probe는 /ready라는 api를 10초 간격으로 반복해서 날리는데 App이 살아있는 동안에는 계속 200 OK 결과를 리턴 해주면서 이 두 probe 동작은 반복됩니다.각각의 역할은 다른데요.readinessProbe는 성공했을 때 외부 트래픽을 Pod가 받을 수 있는 상태로 만들어 주면서 서비스가 활성화 되고요. livenessProbe는 app이 살아 있는지를 계속 체크하는 역할 이예요. livenessProbe는 만약 App에 장애가 발생하게 되면, API는 실패를 하게 되고 설정에 따라 두 번을 실패하게 되면 쿠버네티스는 App을 재기동 시킵니다.이게 쿠버네티스에 프로브에 대한 기능이고, 일반적으로 자신에 App 기동 시간에 따라 startupProbe에 실패 횟수만 조정해서 쓰는 게 대부분인데 처음엔 이렇게 쓰더라도 어느 순간 이런 생각이 들 때가 있을 거예요. "왜 probe 마다 귀찮게 api들을 기입하는 항목이 각각 있을까?" 어차피 모두 같은 url을 지정해서 쓰는데, 그리고 또 한가지가 "어차피 장애가 나면 livenessProbe랑 readinessProbe는 같이 실패를 할 텐데, 굳이 readinessProbe도 계속 호출될 필요가 있을까?"쿠버네티스가 괜히 이렇게 해놓지는 않았을 텐데 "혹시 내가 이 프로브들을 제대로 쓰고 있는 게 아닌가?"이 프로브들을 간단하게만 써도 나쁘진 않지만 오늘은 이런 의문이 생기는 사람들을 위해서 probe에 대해서 좀 더 깊게 공부를 해보겠습니다. Pod (probe) - 실습카페 자료실 링크 (link)강의 영상에서는 실습이 함께 진행됩니다. Pod (probe) - 실습 로그 분석이제부터 실습 후 로그를 함께 분석해 볼게요. 먼저 App이 초기화 되기 시작했고, Spring이랑 Servlet을 초기화 과정이 있어요. 다음으로 Database를 연결하는데 실제 DB가 있는 건 아니고 그냥 제가 코드에 로그만 찍어 놓은거예요. 그리고 이렇게 App이 기동되는 동안 startupProbe는 계속 실패하고요. startupProbe가 찍히는 주기는 설정 해놓은대로 5초 간격이죠. 그리고 기동이 완료되면 startupProbe는 성공을 합니다. 근데 이 로그들은 startupProbe가 찍히는 걸 보여드리기 위해서 제가 임의로 코드를 구성했기 때문에 로그가 보이는 거예요. 무슨 말이냐면, 실제 App 상황에서는 쿠버네티스는 Pod가 생성되자마자 startupProbe를 작동 시키기 때문에 사실 처음부터 API는 실패 되고 있었거든요.이렇게 App이 기동 되기 전에는 API를 받지 못하기 때문에 실제로는 startupProbe에 로그가 찍힐 수가 없고, 만약에 Was로 tomcat을 썼다면 startupprobe가 찍히는 건 access.log 에서만 볼 수 있게 돼요.그래서 이 로그는 제가 임의로 코드를 구성한 학습적인 상황이라고 말씀드리는 거고요. 이제 기동이 완료가 됐고, [ConfigMap data is loading]은 사용자가 App이 기동 된 후에 외부에 데이터를 가져와서 추가적으로 시스템을 초기화 시키려는 상황 이예요. 그리고 밑에 livenessProbe랑 readinessProbe도 찍히기 시작했고요. 이때 readinessProbe는 실패했고, livenessProbe만 성공을 했네요. 그리고 추가적인 데이터 작업은 끝났고요.그림 제일 하단에 livenessProbe랑 readinessProbe는 계속 찍히고 있는데, 이제 둘 다 성공을 했네요. 그리고 호출 주기는 10초고요.근데 여기 보면 readinessProbe가 한번 실패를 했죠?이건 사용자 초기화 구간에는 readinessProbe가 실패 하도록 일부러 만든 거예요. 그래서 의도 한대로 현재 기능이 정확하게 동작을 해준 건데, 일단 이런 사실만 기억하고 다음으로 넘어가서 강의 영상에서 Application 동작 중심에 프로브를 다시한 번 설명 드립니다. 밑에 내용들을 강의 영상에서 설명 드릴 내용들 입니다. Pod (probe) - Application 동작 중심의 프로브 이해해당 내용은 근본적으로 쿠버네티스에서 왜 프로브라는 기능이 생겼는지 생각해봅니다.Pod (probe) - API 날려보며 프로브 동작 확인하기그리고 API를 날려보면서 앞에 설명한 기능들을 확인해보고요. Pod (probe) - 일시적 장애 상황에서의 프로브 활용마지막으로 일시적인 장애 상황에서 프로브를 좀 더 활용하는 방법을 얘기 해볼께요. 이렇게 강의를 모두 들으면 앞으로는 쿠버네티스에 프로브를 보게 될 때,내 app을 주의 깊게 관찰하게 되면서 어떻게 프로브를 잘 적용 시킬지 심각한 고민에 빠질 수 있게 되는 점 주의 바라며오늘 블로그는 여기까지 마치겠습니다. 해당 블로그는 [쿠버네티스 어나더 클래스] 강의에 일부 내용입니다.강의 링크 : https://inf.run/NzKyps. 한번도 좋아요♡를 안 준 사람은 있어도, 한번만 좋아요♡를 준 사람은 없다. 당신은 어떤 사람인가요? :)

데브옵스 · 인프라･인프런･쿠버네티스･어나더클래스･지상편･일프로･kubernetes･devops･kubeops･Application기능으로이해하기･Pod(probe)

인프런 워밍업 클럽 FE 과제 제출 예시

1번 과제 (Day2) (음식 메뉴 앱)깃허브 저장소 주소: https://github.com/jaewonhimnae/docker-codes (예시)과제 사진 or GIF2번 과제 (Day3) (가위 바위 보 앱)깃허브 저장소 주소: https://github.com/jaewonhimnae/docker-codes (예시)과제 사진 or GIF.... - 과제는 UI를 똑같이 만들 필요가 없으며 과제 안에 있는 기능들만 올바르게 들어가게 해 주세요.- 기능을 더 추가하셔도 됩니다.- 발자국 올리는 게 완성 됐다면 디스코드-프런트엔드-미션-발자국에 공유해 주세요!파이팅입니다!!

웹 개발･워밍업클럽･FE･과제

국비교육, 대신 물어봤습니다 (ft. 인프런 무료수강 꿀팁)

안녕하세요! 인프런 짜리입니다.😉 IT 분야 취업을 준비하는 분이라면 주목해주세요!여러분의 취업을 도와드릴 정보를 가져왔어요. 정부에서 지원하는 무료 국비교육, 다들 한 번쯤은 들어보셨을텐데요.요즘 "개발 분야 취업엔 국비교육 수강 경험이 필수"라는 말이 돌 정도로 취업 준비의 필수 조건이 되었죠. "무료 교육인데 수업의 퀄리티가 떨어지진 않을까", "지금 시작해도 늦지 않을까""어디서부터, 어떻게 시작해야 할까" 여러 궁금한 점이 있으실 거예요. 다양한 이유로 수강을 망설이는 분들께 힌트가 될 수 있도록인프런이 국비교육을 수강중인 분들께 대신 물어봤습니다!국비교육을 수강중인 사람은 누구?👀비전공자 비율은 무려 86%!사전 지식없는 '노베이스' 참여자 분들의 비중이 가장 높았습니다.우리의 목표는 취업/이직예상이 가능한 결과였어요! 이 밖에도 커리어를 위한 자기 계발 목적으로 참가하시는 분도 있었습니다.과정 만족도 평균 4.2점수강 중인 분들 모두 높은 점수를 주셨어요.다양한 연령대20대 초반부터 30대 중반까지의 수강생 분포가 가장 많았고 30대 후반인 분들도 참여 중이었어요. 국비교육 훈련생의 솔직 후기🔎궁금했던 점이 해소되셨나요?저는 생각보다 다양한 분들이 국비교육에 참여하고 있어서 놀랐는데요!또, 수강하는 분들 모두 교육과정에 만족하고 있어서 앞으로도 많은 분들이 신청하면 좋겠다는 생각이 들더라구요.국비교육에 관심이 있는 여러분께도 많은 도움이 되었으면 좋겠네요. 여기서 국비교육 수강 꿀팁🍯 하나 더인프런에서 국비교육을 신청하고 수강하는 분들께는 💵인프런 포인트 10만원이 지급된다는 사실!국비교육을 수강하시면서 부족한 부분, 더 공부하고 싶은 부분들을 채우실 수 있도록 수강 지원 포인트를 드리고 있어요.이미 포인트를 받은 분들은 인프런을 어떻게 활용했는지 알아볼까요? "이론+실무 역량 강화를 위해 사용했어요.""국비에서 배우고 있는 내용의 실습 관련 확장 강의를 구매했어요. 추가 학습을 하기 위해 일부는 남겨두었어요!""기초 강의를 다시 또 들으면서 탄탄히 다지고 싶어요.""인프런에서 제공하는 무료강의들 중에도 좋은 내용이 많아서 공부하다가 참고할 수 있어요." 인프런 10만 포인트는 이렇게 받을 수 있어요.인프런의 [국비교육모음] 페이지에서 나에게 딱 맞는 국비교육 과정을 신청하고,훈련기관의 안내에 따라 다음 신청 프로세스를 진행합니다. 수강이 시작된 후, 인프런의 안내 문자에 따라 수강 내역을 확인하면 끝! 받으신 포인트는 부족한 이론 보충, 실무 프로젝트 실습 등여러분의 실력을 높이는 밑거름으로 활용하실 수 있습니다. 취업을 위한 무료 교육과정에 + 인프런 10만 포인트까지!인프런이 준비한 정보, 어떠셨나요? 여러분께 도움이 되는 정보를 모아 다시 찾아올게요😉인프런은 언제나 여러분의 성장을 응원하겠습니다🌱

웹 개발･국비교육･KDT･SeSAC･새싹･K디지털트레이닝･무료국비교육･무료강의･정부지원

인프런에서 국비과정 100% 활용하는 방법 (with 10만 인프런 포인트)

안녕하세요! 인프랩 모모입니다. 🧚 IT 분야로의 취업을 생각하고 있다면, 한번쯤 고려해봤을 국비취업과정!인프런에서 신청하고 수강한다면, 10만 인프런 포인트로 부족한 학습까지 채울 수 있답니다. 분야도, 종류도, 기간도 천차만별인 정보의 홍수 속에서 어떤 교육을 들어야 할 지 고민하는 여러분을 위해,인프런에서 여러 국비취업과정을 비교하고 선택할 수 있는 공간을 마련했어요. 배우고, 나누고, 성장하는 공간 인프런에서국비취업과정을 100% 활용할 수 있는 방법을 알려드릴게요! 🔍 Step 1. 인프런에서 국비과정 비교하기인프런에서 마련한 국비취업과정 전용 공간(링크 연결 click!)에서 무료 국비 취업 과정을 둘러보세요! 💁‍♀K-디지털 트레이닝, SeSAC 등 학습부터 취업까지 지원하는 다양한 IT직군의 교육 과정이 마련되어 있어요.강의카드를 클릭하면, 각 교육과정의 세부 정보를 확인할 수 있어요. Step 2. 수강신청하기수강하고 싶은 과정을 찾으셨나요? 강의 상세 페이지 내 신청하기 버튼을 눌러주세요!신청하기 버튼을 클릭하면, 교육과정 참여를 위한 필수 정보를 수집하는 설문폼으로 연결됩니다.설문폼 제출을 완료했다면, 교육기관의 연락을 기다려주세요.세부 신청 절차를 돕기 위해 인프런이 아닌 교육기관이 직접 연락을 드리고 있어요! 🤗Step 3. 혜택받고, 학습 불태우기!신청하신 과정을 수강 중이신가요? 여러분의 학습을 응원하며 인프런 10만 포인트를 드립니다.훈련생으로 확정되셨다면, 수강정보(링크 연결 click!)를 입력해주세요. 훈련생 확정 시점(개강 후 7일)의 수강 여부 확인 후, 인프런 10만 포인트를 문자로 발송해드립니다.포인트를 활용해 부족한 학습을 인프런 강의로 채워보세요! 🔥 Step 4. 차곡차곡 취업 준비하기인프런의 채용 서비스 '랠릿'의 MY로그 기능(링크 연결 click!)을 통해 매일 매일 나만의 학습 기록을 남겨보세요!열심히 쌓은 지난 날의 학습 기록을 활용한 훌륭한 포트폴리오를 만들 수 있을 거예요.인프런 강의의 경우, 자동으로 학습 로그가 쌓입니다. 🧑‍🏫'랠릿' 프로필(링크 연결 click!)에 지금까지의 경험을 프로필로 등록해보세요!지난 날의 학습과 성장은 눈부신 커리어가 돼요. ✨국비교육을 통해 진행한 프로젝트 내용도 상세히 기록할 수 있어요.멋지게 가꾼 프로필로 다양한 공고에 지원할 수 있어요. 이렇게 국비취업과정을 활용하는 방법을 알아 보았는데요. 👀 IT분야로의 입문 및 커리어 성장을 꿈꾸고 있다면,교육부터 취업까지 무료로 도움을 받을 수 있는 국비취업과정을 추천드려요. 특히 인프런과 함께 국비과정을 활용한다면,부족한 학습을 채울 수 있는 10만 포인트 지원은 물론, 학습 기록과 취업을 도와줄 랠릿 서비스까지 이용 가능하다는 점! 인프런은 언제나 여러분의 성장을 응원합니다 🌱 인프런에서 국비과정 신청하고 싶어요 ➝ 국비취업과정 모음 링크 Click!인프런에서 신청한 국비과정을 수강중이에요 ➝ 수강정보입력링크 Click!

국비취업과정･국비과정･KDT･SeSAC･새싹･무료취업과정･무료국비과정･K디지털트레이닝･국비교육

IT 개발 용어 뜻, 잘 모른다면? (API, 기술부채, 컴파일, 마이그레이션...)

혹시 내 얘기 아닌가요? 그렇다면 주목! IT 회사 들어왔는데, 다들 무슨 말 하는지 모르겠다! 개발자랑 농담 주고받고 싶다! 개발 용어, 뭔진 알겠는데... ‘느낌적인 느낌’만 안다! 프로그래밍에 관심있는데 진짜 아무것도 모른다...! 이게 대체 뭐람... 👉 그렇다면, 지금 인프런 공식 SNS 팔로우하고 매주 올라오는 인프런 단어짱을 읽어보세요!페이스북 | 인스타그램 | 트위터 오늘은... (두둥) 인프런이 전.격.홍.보! 안녕하세요! 인프런 콘텐츠 마케터 솔🌞입니다. 인프런 뉴스레터 및 ‘인프메이션’ (구: 주간 인프런) 발행을 맡고 있는데요.인프런 공식 SNS 채널 삼대장, 페이스북 + 인스타그램 + 트위터에서만 볼 수 있는 스페셜 콘텐츠(!)의 존재를 모르고 계셨던 인프러너 분들께 깜짝 소식을 전하러 왔습니다.바로... 2022~2023년 동안 인프런 공식 뉴스레터로 보내드리던 ‘인프런 단어짱’ 코너가 올해 3월부터 공식 SNS에서 재개되었어요. 인프런 단어짱이 뭔데? IT 용어에 대한, 왕초보도 알 수 있는 (중요!) 쉬운 해설이 필요하다는 건 저 역시도 인프런에서 일하면서 직접 뼈저리게 느끼곤 했는데요.(nn년 전 IT와 아~무 상관없는 전공 + 구)스타트업 깡신입의 대환장 조합...! 🥲)그래서인지, 그동안 인프런에서 발행했던 수많은 콘텐츠 중에서도2020년 ‘뉴비를 위한 개발 용어 사전’2022년 ‘소소한 IT 용어 모음집 - 인프런 단어짱’에 반응을 보내주셨던 분들이 유독 많아 놀랐던 기억이 있어요. 아무튼, 이번에 다시 부활한 인프런 단어짱은 더 자주 + 더 쉽게 더 많은 분들께 IT 개발 용어 뜻을 철저히 뉴비, 개발 왕초보 관점에서 알려드리는 걸 포부(?)로 삼고 있답니다! 담당자의 과한 드립 욕심(...)은 보너스 오늘까지 API, 기술 부채, 컴파일/인터프리트, 백도어, 마이그레이션 등 여러 IT 용어에 대한 해설과 에피소드가 공개되었으니 뜻이 알쏭달쏭하셨거나, 인프런이 하고 있는 무언가(?)가 궁금하신 분들이라면 언제든 인프런 공식 페이스북 / 인스타그램 / 트위터를 찾아와주세요! 여러분의 팔로우와 좋아요❤가 인프런 담당자를 춤추게 합니다...! 덩실덩실 항상 인프런과 함께해주시는 많은 분들께 감사드립니다. (Hoxy... 인프런이 초면이라면, 이것도 인연인데 앞으로 더 자주 만나요! 🫂)우리 함께 배우고 나누고 성장해요! 🍀인프런 마케터 솔 드림

기타 (개발 · 프로그래밍)･기술부채･컴파일･백도어･마이그레이션･IT･인스타그램･페이스북･트위터･API･인프런

[인프런 워밍업 스터디 1기 디자인] 1주차 슬기롭게 보내기

발자국 1주차드디어 첫 주가 시작되었어요. 새로운 회사 일도 시작한 지 2주 차라 정신이 없었어요.조용하던 디자인 디스코드 채널이 드디어 활발해지기 시작했어요. 이번 주에는 코치로서 다음과 같은 일을 해야 했어요.폭발적인 강의 질문 대응하기미션 꼼꼼히 체크하기특별 강의 준비하기 첫째, 강의 질문 방에서는 수강생들이 강의를 듣기 시작하면서 질문이 쏟아졌어요. 조용하던 채널이 질문으로 가득 차는 것은 매우 바람직한 현상이에요. 둘째, 미션 제출이 시작되었어요. 평소에는 회사 일에 집중하고, 저녁 늦게나 새벽에 수강생들이 제출한 과제를 살펴봤어요. 처음에는 단순히 미션 여부만 확인하려고 했지만, 과제를 살펴보다가 몇 가지 흥미로운 점을 발견했어요.흥미로운 점 세 가지는 다음과 같아요:1. 같은 강의를 듣고도 실수를 반복하는 수강생이 있다는 것이에요. 이는 온라인 강의의 한계일 수 있어요.2. 이러한 실수가 일부 수강생에게만 나타나는 것이 아니라 반복적으로 나타난다는 점이고, 이것을 데이터로 정리해서 다른 수강생들에게도 요약 노트 등으로 알리면 좋을 것 같아요.3. 인프런 워밍업을 통해 수강생들의 작업 파일을 보고 코멘트를 남기며 피드백을 통해 서로 수정하고 올바르게 배울 수 있었어요. 셋째, 특별 강의를 준비했어요. 세 가지 주제로 구성하고, 강의 준비 과정은 쉽지 않았어요. 밤에 미션을 체크하고 남는 시간에 강의를 만들었어요. 특별 강의는 주로 새벽 5시에 일어나서 준비했고, 다음과 같은 주제로 구성되었어요.- 가장 많이 나오는 질문: 아이콘- 컴포넌트 네이밍 컨벤션- 멀티에딧 베리언츠인터랙티브한 강의를 만들기 위해 네이밍 컨벤션을 공유할 때는 혼동되는 용어에 대한 각 개인의 생각을 물어봤어요. 특별 강의는 기본 1시간을 넘어 20분 더 진행되었고, 많은 수강생이 마지막까지 남아 있었어요. 피드백을 부탁드렸는데, 마치고 나서 살펴보니 열심히 준비한 보람을 느꼈어요. (선정한 5개 수강평) 다음 주 월요일이 영국도 공휴일인이라 쉴 수 있어서 다행이에요. 그렇게 휴식을 취해야 회사 일과 인프런 코칭을 병행할 수 있을 것 같아요. 모두들 2주차도 파이팅입니다!

UX/UI･인프런워밍업･베리어블･스터디･디자인시스템

이제는 진짜 알고 싶은 재무제표 101 (1) - 재무제표는 그래서 무슨 표인가요?

안녕하세요, 인프랩 디아입니다!지난주에 저의 숙원사업이었던...그러나 긴장한 나머지 준비한 것의 반 정도밖에 보여주지(웃기지) 못했던 😭 재무제표 읽는 법에 대한 사내 강연을 진행했는데요.비전공자(그것도 회계가 싫어 경영학을 피해 경제학을 선택했던…)로서 기본적인 회계 지식이 없는 분들도 쉽게 이해하고, 회계를 배우신 분들도 이론뿐 아니라 조금 더 실용적인 정보를 얻어가고(혹은 제가 틀리면 고쳐주고,,,), 나아가 회사생활이나 투자활동에 도움이 되셨으면 하는 마음으로 강의를 준비했는데…저의 마음이 잘 전달되었는지 모르겠네요!떨림(후달달) 가득했던 첫 강연의 아쉬움을 뒤로하고, 발표 내용을 간단히 정리하여 한번 더 공유해보고자 이렇게 블로그로 남겨봅니다. + 강연 때 못다한 얘기들도 있으니 심심풀이로 읽어주세요!발표시간에 재무제표가 무엇인지 알아보고, 그 중에서도 손익계산서와 재무상태표를 상세히 살펴봤죠. 첫번째 글에는 재무정보가 무엇인지, 재무정보의 종류에는 어떤 것들이 있었는지 한번 더 정리해볼게요 🙂 재무제표는 기업의 주요 재무정보 중 하나이다.그렇다면 먼저 재무정보란?하나의 경제주체가 이해관계자의 의사결정을 돕기위해 제공하는 재무적으로 유용한 정보재무정보와 관련한 기업의 주요 이해관계자는?채권자(돈을 빌려준 사람)주주(돈을 준 사람)정부(사회간접자본 제공)‘유용한 정보’에는 무엇이 있을까?1. 재무제표(재무와 관련된 일련의 표)재무상태표(구. 대차대조표, Balance Sheet)손익계산서 (Income Statement)포괄손익계산서 (Comprehensive Income Statement)자본변동표 (Changes in Equity)현금흐름표 (Cash Flow Statement)주석 (Footnotes): 주요 회계 정책 및 방침이 설명되어있어 매우 중요한 정보임! 2. 그 외의 정보들(사진출처:삼성전자 공시 자료)Proxy Statement (주총안건 등)MD&A (경영진 분석)일반 재무제표만 봐서는 알 수 없는 사업부별 영업실적, 각종 재무 지표 등 요약업계 동향, 미래 투자 계획, 영업이익 근거, 임직원 현황 등감사보고서감사의견핵심감사사항(KAM, key audit matters or CAM, critital audit matters)내부회계관리제도 감사의견분기/반기 보고서 등IR 자료기사, 언론(브랜드 이미지, 인지도 등)이런 다양한 정보로 평가된 회사의 가치는 일반적인 재무제표에는 나오지 않지만, 인수/합병을 하게될 경우, 혹은 IPO로 기업가치를 산정할 때 등 특별한 경우 ‘영업권’의 형태로 재무적 가치로 평가될 수 있습니다. 첫 글을 마치며...(강연 때 못다했던 말!!)비교의 중요성재무정보의 유용함은 많은 경우 ‘비교’의 모습으로 옵니다.재무제표의 기본 형태만 봐도, 적으면 2기 많으면 3~4기(3~4년)의 수치를 함께 보여줍니다. 비교를 위해서요.재무제표를 통해 구할 수 있는 다양한 재무지표와 비율들이 좋은지, 나쁜지도 우리회사 것만 구해보고는 판단할 수 없어요. 각종 지표를 비교할 때 가장 중요한 것은 ‘업계의 평균’입니다.영업이익율이 마이너스면 무조건 나쁠까요? 아직 투자단계에 있는 많은 스타트업은 손실이 나고 있으니 특별히 나쁜 경우가 아닐 겁니다. 부채비율이 500%라 심각한 상황인 것 같아도, 어떤 업계에선 그게 acceptable할 수 있고(ex. 항공사) 유동비율이 250%이면 안정적인 것 같아도, 업계 평균에 따라 낮은 수준일 수도 있습니다(또는 남는 현금을 적절히 투자하지 못하는 것일 수도 있어요). 그래서 평균, 그리고 비교가 중요합니다. 주석의 중요성그런 의미에서 주석이 매우 중요한 역할을 합니다. 주석에는 재무제표상의 숫자만으로는 볼 수 없는 다양한 기준과 상황, 배경이 설명되어있습니다. 회사가 채택한 회계기준, 전기와 비교해 달라진 내용, 사업부 별 실적과 경영진이 직접 분석한 업계 동향 등 알짜배기 정보가 많이 있구요.매출원가에 포함된 원가 항목은 무엇인지, 자산의 내용연수가 몇년인지 등 재무 분석에 참고해야하는 중요한 정보들도 있습니다. 진행중인 critical한 소송, 혹은 재무상태표에 반영되지 않은 주요한 부채 등 숫자로 표현되지 못한 정보들 중 중요한 내용을 적어두기도 합니다.동일한 업계에, 비슷한 장비를 사용하는 두 회사 A, B가 있다고 가정해봅시다.A와 B의 재무상태표상 감가상각비는 동일한데, A사의 장비 내용연수는 4년인데 반해 B사는 2년이라고 해볼게요. 우선 이 내용연수 관련된 정보 자체를 주석에서 알 수 있고요. 비슷한 장비인데 내용연수가 더 짧다? 그렇다면 B사에서 장비 관리를 못해서 자주 교체가 되거나, 혹은 오히려 B사가 장비에 투자를 많이해서(자주 새 장비로 교체해서) 이익률이 좋아졌을 수도 있습니다. 이처럼 주석을 통해 재무제표 상 나타난 숫자의 다양한 원인과 결과를 분석하고, 그에 따라 A, B사를 비교해볼 수 있습니다. 감사보고서 의견이 적정이면, 투자하기 좋은 기업인가요?2000억 원 대 횡령사건이 있었던 오*템 사의 경우, 해당 사건으로 인해 감사에서 '부적정' 혹은 '거절' 의견을 받았을까요?오히려 횡령금액, 돌려받을 수 있는 금액, 받을 수 없는 '위법행위 미수금' 등을 재무제표에 충실히 반영했기 때문에 '적정' 의견을 받았습니다.이처럼 감사인의 적정의견이 해당 기업의 재무건정성을 보장하지는 않습니다(그랬으면 투자가 얼마나 쉬웠게요 ㅠㅠ)회계 기준에 맞게 재무제표를 작성했는지, 계속기업으로서의 불확실성은 없는지, 재무제표를 왜곡시킬만한 주요한 정보(ex. 큰 소송 등)가 누락되지 않았는지 등을 주로 평가하기 때문입니다.감사의견, 재무제표 상의 숫자와는 별개로 건강한 기업을 찾는 연습을 해야하는 이유랍니다!! 평소 관심있는 기업이 있었나요? 이제 우리, 네*버 검색만 하지 말고 전자공시사이트에서 주석을 한번 확인해보는 건 어떨까요? 생각보다 다양한 정보가 여러분을 기다리고 있을지도 몰라요!!

교양･회계･재무제표･투자

[오프라인 강의 오픈] 퍼블리셔 취업 개인 포트폴리오 제작 및 JS 강좌(4주과정)

안녕하세요. 코딩웍스입니다.코딩웍스가 올해 4월부터 시작하는 오프라인 강의를 소개합니다.이번에 <퍼블리셔 취업을 위한 개인 포트폴리오 제작 및 JS 강좌(4주과정)>를 오프라인으로 진행합니다."코딩웍스만 믿고 잘 따라오시면 퍼블리셔 취업과 이직할 수 있습니다!!""2명 정원으로 밀착형 개인별 수업"이번에 오픈하는 오프라인 강의 특징은 4주과정 동안 퍼블리셔 직군으로 빠른 취업과 경쟁력 있는 면접을 볼 수 있는 역량을 기릅니다. 구체적으로 퍼블리셔 취업을 위해 필수인 개인 포트폴리오 홈페이지를 코딩웍스의 개인 지도를 받으면서 4주 동안 정말 괜찮게 완성합니다.수업내용은 코딩웍스가 지난 국비 퍼블리싱 학원에서 수료하기 전 한 달 반 동안 진행했던 <개인 포트폴리오 홈페이지 제작> 커리큘럼을 그대로 진행합니다. 물론 국비 퍼블리싱 학원 학생들처럼 학원에서 작업하는 시간을 많이 할애할 수는 없지만 이런 부분을 커버하기 위해 매주 진행해야 할 작업량을 개인별로 제시하고 다음주에 세밀하게 체크합니다. 국비 퍼블리싱 학원 때는 학생들이 많아서 개인별로 체크 & 피드백을 하는 부분이 제한적이지만 이번에는 소그룹으로 진행하기 때문에 수강생 개인에 맞게 거의 1:1로 수정 보완을 코딩웍스와 함께 하게 됩니다.특히 이번 오프라인 수업은 제이쿼리 및 바스크립트 기초부터 핵심까지 현업에서 개발자와 협업을 위한 순수 자바스크립트 실력도 갖추게 됩니다. 🌈 코딩웍스 오프라인 강의는 다릅니다.웹사이트 디자인 방향성과 체계적인 퍼블리싱 실력 갖추기디자인이 약점인 학생의 경우 디자인을 위한 타겟 사이트를 정하고 디자인 방향성을 잘 잡을 수 있도록 참고 레퍼런스를 보면서 1:1로 지도합니다.디자인을 기초로 HTML 와이어프레임 구조 설계하면서 경력자와 같은 HTML 구조 설계 방법, 효율적인 클래스 네이밍 방법 그리고 다양한 실무 팁까지 학습합니다. 학습과 동시에 큰 어려움 없이 실제 포트폴리오 웹사이트 퍼블리싱까지 완성합니다.개인 포트폴리오 홈페이지 완성(Intro, About, Skill, Publishing, Website, Mobile Web, Epilogue)개인 포트폴리오 내 퍼블리싱 결과물 완성(모바일 웹 퍼블리싱, 웹사이트 퍼블리싱, 실전 퍼블리싱, JS 작업물)7:3 비율로 개인 포트폴리오 제작 수업 중심 누가봐도 괜찮은 퍼블리셔 취업을 위한 개인 포트폴리오 홈페이지 완성할 수 있습니다.개인 포트폴리오 홈페이지 뿐만 아니라 포트폴리오 웹사이트를 반응형으로 만드는 작업도 진행하므로 반응형에 대한 이해도와 실력을 충분히 갖추게 됩니다.퍼블리셔 취업이 No.1 미션이므로 [개인 포트폴리오 홈페이지 제작] 수업과 [바닐라 자바스크립트] 수업은 7:3 비율로 포트폴리오 수업을 중심으로 진행됩니다.코딩웍스와 함께 소그룹으로 개인에 맞게 1:1로 수정 보완합니다. 특히 개인별 제작 및 취업 로드맵을 설계하고 로드맵에 맞게 체크 & 피드백하므로 시행착오를 최소화합니다.매주 미션과 테스트를 통해서 개인 포트폴리오 홈페이지 제작과 실력이 자연스럽게 완성되는 코딩웍스만의 체계적인 스케쥴링에 따라 오기만 하면 됩니다.과정 완료 시점에 취업을 위한 이력서 및 자기소개서, 채용공고, 면접요령 등 코딩웍스 학생들을 위한 철저한 마무리타 지원자와 확연히 차별화되는 경쟁력, 제이쿼리 및 바스크립트 기초부터 핵심까지제이쿼리 및 바스크립트 기초부터 핵심 수업은 수업 시간 내에서 거의 모두 해결할 수 있도록 커리큘럼이 준비되었습니다.이론만 하고 넘어가는 것이 아니라 해당 이론을 공부하면 해당 이론으로 활용해서 다양한 스몰미션(Small Mission)을 만들어 봅니다.이론 학습 → 스몰미션 제작.. 으로 이론을 더 확실히 갖출 수 있습니다.제이쿼리 및 바스크립트 기초부터 핵심 수업은 제이쿼리 수업을 중심으로 진행됩니다. 그리고 순수 자바스크립트 기초를 익히는 수업도 병행됩니다. [참고사항] 코딩웍스 오프라인 강의에서 제이쿼리 및 바스크립트 기초부터 핵심 강의는 개발자 취업을 위한 심도 있는 강의까지는 아닙니다. 퍼블리셔로서 인터렉티브한 웹을 구현하고, 실무에서 개발자와 협업에서 문제 없이 의사소통하는 수준의 강의입니다. [ 제이쿼리 및 자바스크립트(Vanilla JavaScript) PDF 교재] 소개 코딩웍스 자체 제작 교재제이쿼리(jQuery) PDF 교재 제공(79페이지 분량)제이쿼리 교재에 나오는 완성본 파일 제공자바스크립트(Vanilla JavaScript) PDF 교재 제공(210페이지 분량)자바스크립트 교재에 나오는 완성본 파일 제공퍼블리셔 취업을 준비한다면 이건 꼭! 기억하셔야 합니다.대부분의 수강생이 개인 포트폴리오 홈페이지 제작 가이드 없이 혼자서 준비합니다. 국비지원 학원 또는 독학이면 본인은 정말 열정을 다해 열심히 준비했지만, 객관적으로 경쟁력이 없는 개인 포트폴리오 홈페이지를 만드는 경우가 대부분입니다. 열심히 안 해서가 아닙니다. 처음부터 이상한 방향으로 가고 있는데 그걸 잡아주고 좋은 방향으로 갈 수 있도록 올바른 로드맵을 제시받고 체크되고 개인에게 맞는 피드백을 받지 못했기 때문입니다. 이런 개인 포트폴리오 홈페이지를 가지고 퍼블리셔 입사지원을 아무리 해도 면접 연락이 거의 오지 않거나 이상한 곳에서나 연락이 옵니다. 속상한 일이지만 다 그럴만하기 때문입니다. 회사가 퍼블리셔를 뽑을 때 인성이나 느낌으로 뽑지 않습니다. 기술자.. 곧 프로를 뽑습니다. 개인 포트폴리오 홈페이지에 아무리 자신이 열심히 열정적으로 일하는 사람이라고 어필해도 결과물이 프로답지 않으면 뽑지 않습니다..여러분이 지금까지 퍼블리셔 취업을 위해 열심히 공부하고 준비했더라도 마지막 단계를 잘못 보내면 수많은 시행착오를 겪게 되고, 이런 시행착오로 지치게 되고 결국엔 수개월 또는 그 이상 노력한 기간이 물거품이 됩니다.6주 동안 코딩웍스를 믿고 잘 따라오시면 시행착오 없이 퍼블리셔 취업을 위한 충분한 준비가 될 것이라고 확신합니다.💡 강의 개요교육요일 : 평일반(윌화), 주말반(토일)교육시간 : 12:00 - 18:00(6시간)교육일정 : 평일반 개강(2023년 4월 17일) ※ 평일반 신청이 마감되었습니다.교육일정 : 주말반 개강(2023년 4월 22일)교육과정 : 4주 과정(48시간)교육비용 : 816,000원교육장소 : 2호선 신촌역 부근(상세한 위치는 신청 완료 후 추후 공지)교육내용 : 개인 포트폴리오 홈페이지 제작, 자바스크립트 핵심 강좌, 이력서작성 및 면접요령모집정원 : 최대 3명 정원(최소 2인 이상 개강)결제방법 : 계좌이체 ※ 사업자가 아나라서 카드결제와 현금영수증 발급 불가합니다.상담문의 : webnlife@naver.com (이메일 상담 후 필요한 경우 유선으로 상세하게 상담)신청방법 : 이메일 상담 및 신청(상담 신청 제목에 오프라인 강의 상담 또는 오프라인 강의 신청이라고 써주세요.)신청기간 : 평일반 신청(2023년 4월 10일까지) / 주말반 신청(2023년 4월 16일까지)수업준비 : 수강생 개인 노트북 필수 지참(수업용 PC가 제공되는 강의장은 아닙니다.)※ 상담 메일 주실 때 현재 어떻게 학습하고 있고 얼마나 학습했는지 어느 정도 수준인지.. 국비 또는 독학 등 어디서 언제 공부했는지.. 나이 성별 등 기본적인 정보를 알려주시면서 상담하시면 제가 판단하기에 더 도움이 될 것 같습니다. 그리고 이메일 상담 후 전화 상담이 필요한 경우는 휴대폰 번호도 적어주세요.💡 교육 내용 상세개인 포트폴리오 홈페이지 제작(제작 로드맵, 디자인 컨셉, 컨텐츠 구성, 와이어프레임 구조)제이쿼리 및 바스크립트 기초부터 핵심 강좌이력서 및 자기소개서 작성 요령구직 사이트 실제 채용공고를 통해 지원회사 선정 요령퍼블리셔 취업 면접요령(모의면접 실시) 💡 참고 사항코딩웍스와 잘 맞아야 하기 때문에 코딩웍스의 수업을 경험해보신 분만 신청 대상이 됩니다.월요일 또는 화요일이 공휴일인 경우 다음 날로 자동 변경됩니다. ex) 수업일 : 월수 또는 화수퍼블리싱 기본 이론을 수업하지는 않습니다. 최소한 코딩웍스 강의 중 <HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)> 강의는 완강하고 충분히 이해하는 수준이어야 합니다. 그리고 <중상급 퍼블리싱을 위한 CSS3의 모든 것>의 내용은 모두 충분히 이해하고 있는 수준이어야 합니다.해당 과정을 신청을 할 수 있는 현재 상태인지를 먼저 상담을 통해서 철저하게 체크하고 신청하시기 바랍니다.4주 단위로 강의가 진행되니 이번 일정에 맞지 않는 상태라면 좀 더 준비해서 다음 기수에 신청하시기 바랍니다. 💡 수강 혜택제이쿼리 및 자바스크립트(Vanilla JavaScript) PDF 교재 및 완성본 파일 제공개인 포트폴리오 홈페이지 제작에 필요한 다양한 교재 제공개인 포트폴리오 홈페이지 제작과 실무를 위한 각종 정보 및 다양한 웹사이트🚩 수강 대상인프런에서 코딩웍스 강의를 수강한 경험이 있는 수강생(강사와 스타일이 맞는지 체크가 중요)개인 포트폴리오 홈페이지 제작 단계이거나 제작 중인 수강생현재 퍼블리싱 공부를 시작했거나 한창 하고 있는 수강생은 대상이 되지 않습니다.신청 전에 이메일과 유선을 통해서 자신에게 맞는 과정인지 반드시 코딩웍스와 체크하고 신청하시기 바랍니다. 🌈 코딩웍스 오프라인 강의 후기코딩웍스 개인 포트폴리오 홈페이지 제작 오프라인멘토링 학생 후기 #01안녕하세요. 코딩웍스 선생님의 취업 멘토링에 참여한 학생입니다.저는 졸업 후 프리랜서 디자이너 일을 병행하면서, 퍼블리셔로 취직하고자 코딩웍스 선생님 강의를 독학으로 약 2년간 수강하였습니다.디자인 전공을 해서 그런지 내용물을 디자인하고 퍼블리싱하여 채워넣는 것, 그리고 포폴사이트를 디자인 하는것은 어렵지 않았습니다. 선생님 강의를 독학하면서 포트폴리오 웹사이트를 디자인하고, 퍼블리싱한 후 나름대로 섹션에 내용물을 채워넣고난 뒤 멘토링에 처음으로 참여했습니다.선생님의 꼼꼼한 멘토링 과정에서 제 코드를 하나하나 보시며 코딩 기본기에 대해 상세한 피드백이 이루어졌고, 기본기에 대해 다시한번 재정비하는 시간을 가질 수 있었습니다. 파일 정리법부터 폴더 구조까지 체계적으로 관리하는 법, 수많은 이미지 소스들을 어떻게 하면 효율적으로 네이밍을 할 지.. 이런 사소한 하나하나의 팁을 다 알려주셨습니다.매회 수업 이후 집에가서 코드를 수정하며 배운 내용을 적용했더니, 작업의 효율성이 저절로 올라가는 것을 느꼈습니다. 그리고 ‘내가 정말 많이 부족했구나. 그럴싸하게 퍼블리싱 결과물을 만드는것 만이 다가 아니구나. 원래의 실력으로 실무에 바로 투입되었다면 정말 팀원에게 민폐를 끼치겠구나.’ 라는 생각이 저절로 들었습니다. 결국 퍼블리셔는 협업을 해야하는 직무이기에, 내가 코딩 습관을 잘못 들여놓으면 주변 동료들이 내 코드를 수정하고 함께 작업하는 것이 정말 힘들거란 생각이 들었습니다.코딩웍스 선생님의 지도 하에, 기본기를 보완해 나가며 퍼블리싱 작업물의 갯수는 물론이고 퀄리티 또한 전에 비해 더욱 올라갈 수 있었습니다. 저는 멘토링 초반에 웹사이트 퍼블리싱 결과물이 없었던 상황 이었는데, ‘입사지원이 조금 늦어지더라도 웹사이트 퍼블리싱 섹션을 채워 이력서를 내 보자’ 는 선생님의 제안이 있었습니다. 이후 저는 선생님의 지도하에 1~2주에 한개의 웹사이트를 제작하였고, 현재는 총 3개의 퀄리티 있는 웹사이트를 만들어 입사지원 할 수 있게 되었습니다. (NGO/일반기업/쇼핑몰 이렇게 세가지 분야 웹사이트 입니다.)만약 이 웹사이트 퍼블리싱 섹션을 채우지 않고 지원한다면.. 입사 경쟁력이 떨어지는것은 물론이고, 제 스스로도 면접볼 때 떳떳하지 못할 것 같았거든요. 선생님께서 좋은 제안을 해주신 덕분에, 예전보다 더욱 자신감을 갖고 입사지원을 할 수 있게 되었습니다.그리고 웹사이트 퍼블리싱 작업물 3가지를 진행할 때, 각 웹사이트마다 체계적으로 와이어프레임 구조를 짜는 법을 디테일하게 알려주셨는데 이것이 정말 많은 도움이 되었습니다. 처음에는 박스 구조를 의미없이 대강 그리면 되겠다 생각했는데, 선생님께서 박스구조 그리는 방식에 대해 세세하게 체크해 주셨습니다. 이 훈련을 세 번 반복했더니, 혼자서도 복잡한 구조의 웹사이트를 처음부터 끝까지 만들 수 있겠다는 자신감이 생겼습니다. 이처럼 코딩웍스 선생님의 취업 멘토링은, 취업뿐만 아니라 입사 이후 실무에서도 바로 적용할 수 있는 꿀팁이 다 담겨 있다고 생각합니다. 취업도 중요하지만 실무에서 민폐를 끼치지 않는(?) 그런 기본기 충실한 퍼블리셔가 될 수 있도록 꾸준히 공부해 나가려고 합니다. 앞으로도 좋은 강의 많이 만들어 주세요. 코딩웍스 선생님 감사합니다. ^^ ▲ 코딩웍스 개인 포트폴리오 제작 오프라인 강의 수강생 면접 취업 결과 카톡을 받았습니다.코딩웍스 개인 포트폴리오 홈페이지 제작 오프라인멘토링 학생 후기 #02안녕하세요. 코딩웍스 선생님의 오프라인 강의에 참여한 학생입니다.저는 국비학원에서 백엔드 과정을 듣던 중 퍼블리싱에 관심이 생겨 과정 수료 후 선생님의 강의를 들으면서 독학을 해왔습니다.강의에 있는 여러가지 스킬들을 사용한 많은 예제들을 만들어 가며 실력을 키워왔었고 클론코딩도 큰 어려움 없이 제작할 수 있는 단계가 되었습니다.다만 디자인쪽 전공이 아니다 보니 제일 중요한 개인 포트폴리오 홈페이지와 모바일 웹, 반응형 웹 작업물을 제작하는데 어려움을 겪었습니다.클론 코딩과 달리 개인 제작 사이트는 백지상태에서 시작하려고 하니 어디서부터 손을 대야 할지 모르겠고 디자인 역시 어떤식으로 하면 좋을지 고민만 하며 제작을 하지 못하고 있었습니다.그러던 중 오프라인 강의를 개강하신다는 글을 보고 마침 교육 내용과 수강 대상이 저와 딱 맞는 조건이기에 망설임없이 신청했습니다.지금까지 제작한 결과물들의 리뷰와 퍼블리싱 기본기에 대해 상세하게 배웠으며 코딩을 하면서 생긴 잘못된 습관들을 고칠 수 있는 좋은 자리였습니다.주석처리 꼼꼼하게 하기, CSS 줄 코딩 하지 않기, 선택자 순서 지키기, 클래스 네임 일관성 있게 짓기, 폴더 구조를 체계적으로 관리하는 법 등 기초적이지만 정말 중요한 것들을 배웠고그러한 기본기들을 갖춰 갈수록 퍼블리싱이 체계적으로 이뤄지고 실력도 빠르게 성장하는걸 느낄 수 있었습니다.퍼블리싱이란 것이 단순히 웹 사이트상에 보이는 것만이 전부가 아닌 그 안에 탄탄하게 짜여진 HTML 구조, CSS 스타일링이 중요하다는 것을 배웠고 그런 탄탄함이 있어야 반응형 제작, 유지보수에 용이하고 향후 실무에서 팀원들과의 협업에서도 중요한 요소란 것을 생각해볼 수 있는 계기가 되었습니다.제가 부족하다고 느낀 디자인 부분은 코딩웍스 선생님의 조언에 따라 타겟 사이트를 잘 선정하는 것으로 극복할 수 있었습니다. 어떤 주제의 사이트를 타겟으로 잡을 것인지, 해당 타겟 사이트에서 불필요한 부분은 제외, 필요한 것은 보충하면서 디자인 구상이 완료되면 자신만의 컨텐츠를 채워넣는 식으로 반응형 웹 사이트 디자인, 와이어프레임 제작, 퍼블리싱을 하는 체계적인 프로세스를 배웠습니다.계획적으로 퍼블리싱을 하지 않으면 이도저도 아니게 되고 결국엔 제대로 된 보기 좋은 결과물을 만들 수 없다는 것을 알게 되었고 이런 프로세스로1~2주에 1개씩 웹 사이트를 제작하면서 총 3개의 누가 봐도 보기 좋은 반응형 웹사이트를 제작하게 되었습니다.앞으로는 혼자서 디자인 선정 부터 퍼블리싱까지 할 수 있을 것 같다는 생각이 들면서 점점 웹 사이트 제작에 자신감도 생겼고개인 포트폴리오 사이트에 당당하게 넣을 수 있는 결과물도 생기니 자신의 가치가 올라간다는 것을 느꼈습니다.가장 까다롭다고 생각한 개인 포트폴리오 사이트 제작의 경우에도 선생님의 거의 1:1과 다름없는 지도 하에 평범한 포트폴리오 사이트가 아닌 제 결과물들을 확실하게 보여줄 수 있고 필요한 요소들만 들어간 제가 봐도 너무나 만족스러운 개인 사이트를 제작 할 수 있었습니다.그리고 퍼블리셔에게 필수적인 제이쿼리 이론들에 대해서 학습하고 스몰미션들을 통해 어떤 경우에 사용하고 어떻게 응용할 수 있는지 배웠으며 이론들을 활용해서 제작한 간단한 연습 결과물들도 개인 사이트에 넣어서 경쟁력을 올릴 수 있는 기회가 됐습니다.끝으로 코딩웍스 선생님의 오프라인 강의는 저에게 큰 실력 향상과 높은 취업 경쟁력, 앞으로 가야할 길을 알 수 있었던 소중한 시간이였습니다.아마 선생님의 강의를 듣지 않았다면 고민만 하다가 아무것도 하지 못하고 그저 그런 퍼블리셔가 되었거나 퍼블리셔의 꿈을 접었을지도 모르겠습니다.이젠 당당하게 입사 지원을 하면서 즐겁게 퍼블리싱을 할 수 있는 사람이 됐다는게 정말 기쁩니다.앞으로도 강의에서 배운 것들을 잊지 않으며 꾸준히 성장해 나가려고 합니다. 좋은 자리를 마련해주신 코딩웍스 선생님 정말 감사합니다!

임시 이미지(Placeholder Image) 사용하기

안녕하세요. 코딩웍스입니다.임시 이미지는 웹사이트 퍼블리싱에서 전체적인 레이아웃을 잡을 때도 꼭 필요합니다.특히 상세 퍼블리싱을 할 때 이미지가 있어야 할 부분에 이미지를 넣지 않고 하면 좋지 않습니다. 이럴 때 임시 이미지로 자리를 잡아 놓으면 퍼블리싱하기 매우 좋습니다. 물론 div에 사이즈를 주어서 이미지가 들어가는 부분이나 특정 레이아웃의 크기를 잡아 놓을 수 있지만, CSS를 거쳐와야 하고 나중에 또 지워줘야 하는 번거로움이 있습니다. 이런 번거로움을 임시 이미지가 말끔하게 해결해 줍니다.이렇게 하지 않고 퍼블리싱 중간에 굳이 이미지를 찾아 사이즈를 맞춰서 넣고 하느라고 퍼블리싱 집중도를 떨어뜨리는 작업 습관은 좋지 않습니다.그래서 위 같은 경우에 임시 이미지를 자주 사용합니다.그동안 잘 사용하던 임시 이미지 사이트인 http://placehold.it 이 없어져서 다른 사이트를 이용하셔야 합니다.물론 임시 이미지 사이트는 엄청 많습니다. 아래 코딩웍스가 소개하는 사이트가 아니어도 임시 이미지를 사용하는 건 아무 상관 없습니다.✅ 임시 이미지 기본 사용법공식 웹사이트 : https://placehold.co/https://placehold.co/가로x세로<img src="https://placehold.co/600x400" alt="Placeholder Image">✅ 정사각형 임시 이미지 만들기가로 세로 400픽셀 임시 이미지https://placehold.co/숫자<img src="https://placehold.co/400" alt="Placeholder Image">✅ 배경색과 글자 넣은 임시 이미지 만들기https://placehold.co/배경색/글자색<img src="https://placehold.co/600x400/000000/FFFFFF" alt="Placeholder Image">색상 값은 000/fff로 해도 상관없음색상 값은 색상 이름으로 사용해도 상관없음 ex) <img src="https://placehold.co/600x400/crimson/yellowgreen" alt="Placeholder Image">✅ 글자 변경한 임시 이미지 만들기https://placehold.co/600/400/?text=텍스트+텍스트<img src="https://placehold.co/600x400?text=Slider+Image" alt="Placeholder Image">단어가 2개 이상이면 텍스트와 텍스트 사이에 띄어쓰기 불가(반드시 +로 연결해야 함) ✅ 배경색과 텍스트 변경하고 글자도 변경한 임시 이미지 만들기<img src="https://placehold.co/600x400/000/fff?text=Slider+Image" alt="Placeholder Image">

임시이미지･placehoderimage

[인프런 워밍업 스터디 1기 디자인] 1주차 발자국

1주차 강의 학습 내용 요약강의를 듣기 전에는 Local styles만 사용하고 Local variables는 어렵게 느껴졌는데, 강의를 듣고 실습을 해보며 이해도를 높일 수 있는 시간이었다.학습 내용 중 특히 도움이 되었던 부분은 아래와 같다.베리어블의 계층 구조 디자인 토큰 이름 짓기색상, 간격, 그림자효과 베리어블 등록하기 초반 이론 단계에서는 이해를 하며 강의를 따라가면서도 내가 정말로 이해를 하고 있는게 맞는걸까?라는 의문이 들었지만, 이후 색상 베리어블 구조와 이름을 짜보는 과정을 통해 실습 과정이 참 중요하구나를 깨달았다. 디자인 토큰이 궁금해서 medium이나 구글링을 통해 내용을 찾아볼 때는 이해가 잘 안 됐었는데 Local Variables에 Primitive, Theme, Semantic 컬렉션을 등록하면서 흐름을 이해할 수 있었던! 회고일주일 동안 스스로 칭찬하고 싶은 점실습을 하며 이해가 안 가는 부분, 궁금한 점을 강의 노트에 적고 우선 스스로 답을 찾아보려고 한 점 아쉬웠던 점1주차 강의를 모두 듣지 못한 점아직 미션을 올리지 못했다보완하고 싶은 점커리큘럼대로 수업을 수강하고 미션은 수행하는대로 바로 스레드에 링크 공유하기!수업을 들으며 궁금한 점이 생겼을 때 우선 스스로 생각해보고 해결되지 않을 때 디스코드 채널에 질문해보기!(노션으로 강의 내용을 메모하다 인프런 강의 노트로 옮겼는데 장단점이 있는 듯 하다. 인프런 강의 노트를 사용하면 메모했던 순간으로 영상이 재생되는 게 편한데 이외에 동영상 재생에 오류가 있다던가... 텍스트를 드래그하고 싶어도 클릭으로 인식해 동영상이 다른 타임라인으로 넘어간다거나 하는 부분이 있어서 어떻게 해야 강의 내용을 편하게 기록할 수 있을지 고민 중...) 1주차 미션 미션 해결 과정색상, 간격, 타이포그래피, 그림자 효과를 베리어블 등록하는 과정은 강의 내용을 따라갔다.하지만 아이콘 등록의 경우 Union Selection을 일일이 선택해야 하는 게 사소하지만 생산성이 떨어지는 부분이라고 생각해 Union Selection의 단축키를 생성해봤다. 확실히 작업 속도가 단축되어서 만족!혹시 제 게시물을 보신 분 중 Union Selection 단축키를 등록하고 싶은 분이 계시다면... Mac의 경우 [시스템 설정] - [키보드] - [키보드 단축키]에 들어가면 단축키를 생성할 수 있습니다.응용 프로그램에서 Figma 선택메뉴 제목에 Union Selection 입력 (대소문자 구분 중요. 위의 사진대로 Union selection이라고 입력X)키보드 단축키 입력 (저는 Union의 앞글자를 따서 cmd+shift+U로 등록했어요. 다른 단축키와 충돌이 나면 안 되니, Figma에서 사용되지 않는 단축키를 입력해야 합니다.) 회고1주차 온라인 세션에서 아이콘이 깨지지 않도록 불린하는 방법을 배울 수 있었다. 이전에 아이콘이 깨질 때 어떻게 해야할 지 감이 안 왔었는데 정말 유익한 내용이었다.확실히 지원하는 플러그인이 많은 프로그램이 작업할 때 많은 도움이 되는 것 같다. 피그마에서 지원하지 않는 기능도 있을법한데...?싶어서 플러그인에 검색해보면 있는... 전세계 피그마인들... 감사합니다.. 그리고 강의를 통해서도 좋은 플러그인 정보를 많이 얻을 수 있었다! 강사님께도 감사합니다.. 🍀

UX/UI･Figma･인프런워밍업클럽

[인프런 워밍업 스터디 클럽 1기 디자인] 1주차 발자국 (신영우)

학습 내용복습을 위해 이번 주에 필기한 강의 내용을 갈무리했습니다아틀라시안 디자인 시스템 디자인 원칙/철학 : 우리는 왜 디자인 시스템이 필요한가?: 높은 품질의 UI를 구축하는 핵심 역할로써 디자인, 개발, 배포를 쉽게 할 수 있도록 돕는 것 우리 회사에 디자인 시스템이 필요한가?: 질문에 대한 핵심 답변은 디자인 부채가 발생한다는 점이다. 이는 결국 디자이너의 업무 비효율로 이어지고 이러한 업무 비효율은 개발단의 리소스 낭비로 이어진다. 전체적으로 봤을 때 팀의 손해이고 회사의 손해로 이어진다. 디자인 시스템이 있으면 좋은 점디자인 일관성 유지브랜드 강화효율적인 개발시간 단축팀 간 협업 강화빠른 온보딩유지 보수 용이높은 품질의 경험→ 디자인 시스템은 지속해 발전한다.→ 작은 성공을 이루어가며 구성원들간의 공감대를 형성해가는 것이 중요하다. 베리어블과 스타일의 차이베리어블 : 하나의 변수만 저장, 참조가 가능 / 재사용 가능한 기본 디자인 요소 스타일 : 하나 또는 다수의 변수를 저장, 참조가 불가능 / 그라디언트 ,블랜드 모드 등 다수의 디자인 요소를 적용 베리어블의 구조토큰 개념 : 이름(Name) / 값(Value) / 설명(Description) / 유형(Type) 베리어블의 이름 짓기베리어블 이름의 구조각 계층에서의 다양한 이름토큰 이름 붙이는 공식토큰 이름 예시Namespace : SystemObject : ComponentBase : Category / PropertyModifier : Variant / State / Scale 토큰 개발 실무 팁단어 통일하기80%는 미리 계획하기2~3가지 레퍼런스에서 시작하기 “좋은 음식은 좋은 재료에서 시작한다”단축키 - 베리어블 복사 : ctrl + shift + enter 우리 수업에서 가져갈 라벨링 방식: ‘Theme’ 브랜드(Brand) 부분이 추가됌→ 보통 브랜드는 1개이기 때문에 여러개일 필요 없음(나중에 실무에서 제거해도 이상 무)→ 이해를 돕기 위해 새로운 계층 생성 정리: 추가적으로 참고할 사항→ 각 요소마다 color scoping을 할 수 있음→ 특정 베리어블을 퍼블리싱하고 싶지 않을 경우 ‘_’를 붙여주면 됌 or 각 요소에서 hide 퍼블리싱을 선택해주면 됌→ 웹, AOS, iOS 플랫폼별로 대응하는 코드 이름을 만들어줄 수 있음 간격 스케일 구성: 플랫폼별 렌더링 때문에 4px, 8px unit을 사용함 홀수일 경우 렌더링 시 소수점 발생, 픽셀 퍼팩트하지 않은 상황이 벌어짐4px이 베이스 유닛이냐, 8px이 베이스 유닛이냐는 회사마다 다름 → 조금 더 섬세한 구성으로 하고 싶다 4px스페이싱에 대한 라벨링 또한 4px이 기준(ex. shopify-1)이냐 8px이 기준(atlassian-100)이냐 달라짐마찬가지로 티셔츠 사이즈 척도를 사용하는지 숫자 척도를 사용하는지 입맛에 맛게 선택하면 됌회사 사용 예시아틀라시안 - 100쇼피파이 - 1모질라 - s, m, l카본 - 01간격의 사용0~8px : 작은 UI 구성 요소 12~24px : 카드 UI 패딩, 간격 32~128px : 큰 규모의 UI, 레이아웃간격 유닛의 사용처 : 패딩 / 갭 / 보더 레디우스 / 윗스*하이트 / 보더 윗스에 사용 가능 정리Elevation 높낮이 단계단계마다 사용되는 컴포넌트 분리 → 디스크립션에 넣어서 사용 용도 노티다양한 표현법으로 Elevation 표현다양한 엘리베이션 라벨링 방법반응형 그리드 기본 용어 : 칼럼 / 거터 / 마진그리드는 ‘Fixed’와 ‘Fluid’, ‘Hybrid’가 있음단축키 - 베리어블 바로 적용 : 영역 위에 커서 올려놓고 Shift + 왼쪽 마우스 버튼 미션 내용회고를 위해 이번 주에 진행한 미션 내용을 톺아봤습니다미션 #1 - 컬러 베리어블을 로컬베리어블에 등록하고 다른 디자이너, 개발자 누구나 볼 수 있도록 문서화한다미션 #2 - 타이포 그래피 스타일, 간격 베리어블을 등록하고 Feather icon을 등록한 후 면으로 모두 바꾼다미션 #3 - 그림자 효과, 반응형 기준점, 기타 베리어블 등록하기미션 #4 - 스타일 파운데이션 최종적으로 다듬어서 일관되게 문서화해보기이번 주 미션은 총 4개로 미션 #4의 스타일 가이드 문서를 제작하기 위해 #1~#3과정을 진행하는 미션이었다.스타일 가이드는 만들어본 경험이 있기에 비교적 쉽게 만들 수 있었지만, 베리어블을 사용해서 디자인 시스템을 만들어본 적은 없었기에 미션 #1~#3과정이 꽤나 새로웠다.베리어블로 디자인 시스템을 만들면서 primitive 값을 '참조'한다는 개념이 생소해 과정이 쉽지 않았는데 볼드님의 세세하고 친절한 강의를 들으면서 따라갔기에 어느 정도 개념이 자리 잡은 것 같다(혼자 만들었으면 엄청나게 헤맸을 것 같다)미션 #4를 끝난 현재 아직도 참조 개념이 어렵지만, 다음 주 컴포넌트를 만들면서 조금 더 익숙해지면 좋겠다.베리어블을 자유롭게 사용할 수 있게 되는 그날까지 계속 달려나가 보자! 스스로 칭찬하고 싶은 점 : 생각했던(예상했던) 퀄리티로 스타일 가이드를 만든 점아쉬웠던 점 : 아이콘 백터 깨지는 친구들을 다듬는데 꽤나 많은 시간을 사용한 점보완하고 싶은 점 : 스트로크 아이콘 뿐만 아니라 필 아이콘들도 갖춰놓고 싶다다음주 목표 : 지금처럼 매일매일 빠지지 않고 미션 팔로업 잘 해서 우수 수강생이 되자!

UX/UI･디자인시스템･베리어블･피그마

인프랩, 대학교 협력을 위해 건양대학교 AI.SW 융합대학과 MOU 체결

IT 기술 교육 플랫폼 인프런 운영사 인프랩이 건양대학교 AI.SW 융합대학과 소프트웨어 생태계에서 소프트웨어 기초교육 및 소프트웨어 개발자 교육의 중요성에 대한 공동 발전을 위한 원활한 협력을 골자로 업무협약을 체결했다고 밝혔다.주요 협약 내용은 ▲ 온라인 교육 콘텐츠 개발 및 제공 ▲ 지식공유자 및 학생 간 교류 프로그램 운영 ▲ 기타 소프트웨어 교육 분야 안내이다.특히, 이번 협약을 통해 인프랩에서는 시간과 공간의 제약 없이 수강할 수 있는 환경을 마련해 우수한 소프트웨어 기술 및 실무에 필요한 교육 콘텐츠를 제공하고 개선해나갈 예정이다.

한국 IT 용어 이야기 (5) - "회고", "부검"

Agile 방법론을 제대로 배우기 이전부터 개인이나 팀이 했던 일들을 돌아 보는 일들을 했었고, 아주 오랫동안 두리뭉실하게 'review' 라고 불러 왔었다. monthly review, quarterly review, OKR rating / planning 등.. 리뷰에 관련한 건 다음 토픽으로 남겨 두기로 하고, 이 글에서는 구체적인 '돌아봄'에 해당하는 두 단어에 대한 이야기들...retrospect / 회고Agile - Sprint 에서 주로 쓴다고 하지만, 이전 Google에서의 (좋았던) 경험으로는 1) 큰 과제가 정신없이 달려와서 런치를 했을 때 축하 파티 하기 직전에 2) 과제가 뭔가 삐걱거리면서 지내왔을 때 재정비하는 의미로 잠깐 쉬어가는 타이밍에 했었던 것들이 있다.매번 다른 역할이었지만, 관리자의 입장일 때 다음 일감들을 계획하며 나아가기에 유용한 정보들이 모이기도 했었고, 반대의 입장일 때는 억지로 불편한 걸 이야기해야 하는 상황이 생길 때 오히려 불편했던 경험들이 있다. What went well 과 what could be better 의 용어에 익숙해져 있어서 해당하는 기록을 남겨 왔었고, 확실히 대면일 때 효과가 컸던 기억들이다.Agile 이 지배하는 한국 업계로 들어오며 '회고'라고 불리는 것을 알게 되었다. 참고로 회고의 영어 번역은 아래와 같이 여럿이다. retrospect 가 명사도 되니 retrospection 은 처음 보는 단어이고, remembrance, reminiscence 가 조금 더 익숙했다.미국에서 무의식적으로 "retro meeting" 이라고 하면 대충 알아 들었더랬지만, 한국에서 자칫 "retro" 라고 끊어졌다가는 '복고'로 읽히는 애매한 상황이 되었었고, 처음에는 '회고'가 '퇴고'로 들리던 시기도 꽤 있었다.제한된 경험으로 한국에서 접한 Agile 방법 하에서 회고는 1) 2주마다 매 sprint 를 치르며 2) 의무적으로 회고를 하고 3) 모두가 발언을 하기를 기대하며 4) 꽤 길고 감정 소모가 심했던 기억이다. 그래서인지 scrum 이나 sprint 를 잘 운영하는 사람에 따라 편차가 심했던 거 같고, 생각해 보면 미국에서는 짧은 영어가 오히려 감정 소모를 덜 시키지 않았을까 하는 개인적인 생각도 있다.postmortem / (사후) 부검Google 에서 일하면서 당연하게 몇 번의 사고를 내게 되었고, 그 때마다 postmortem 에 초대되었다. (https://sre.google/workbook/postmortem-culture/) 내가 만든 코드 혹은 실수로 초대되기도 하고, 남이 낸 사고에 당사자로 불려서 보호 코드를 만드는 이슈를 할당 받기도 하는 등.. 주로 SRE 들이 호출하게 되었고, 물론 그닥 유쾌한 기억은 아니다. ( 그 중 하나는 지금 나무위키에 박제되어 있기도... )lesson 을 모아서 다음에 같은 사고가 생기지 않게 하자는 의미였고, 여기서 생성되는 이슈들은 상대적으로 꽤 중요하게 처리되고 있었고 특히 '운용' 단계의 과제들은 더욱 그러했다. 이 문서에 여러 번 불린다고 해서 성과에 불이익이 있다거나 편견이 생긴다거나 했던 건 아니었다는 확신이긴 하지만, postmortem 이 무서운 단어인 건 변함이 없다.한국에서도 여러 사건 사고들이 생기고, SRE 가 없더라도 기록을 남기자는 같은 취지에서 postmortem을 쓰는데, 이게 한국말에서는 조금 더 무서운 번역이 된다.물론 4. 가 정확하다 하겠다. 죽을 사(死)가 아닌 일 사(事)이겠지만, 한자 표기 없이 '사후 검토'라고 불리기 보다는 '부검'으로 많이들 불렀고, 별 고민 없이 '사후 부검', 혹은 '사후 검토'라고 했을 때 죽을 사(死)가 먼저 어른어른 거린다.한국 정서에서는 (아마도 원래 취지와는 다르게) 시말서, 경위서에 가까워서 조금 더 불편하고, action item 들에 대한 강제력이 회사 규모 따라 달라서 어려웠던 기억들이다. 운영 위주의 팀들에게는 분명 도움 되겠지만, 해야 할 일로 기도하자 버티자 등이 나오는 상황도 어쩔 수 없이 생겼던 기억이고, 테크 이외의 조직들이 엮이게 되면 난이도도 많이 올라간다.최근에 여러 뉴스들에서 좀 더 보이던데, 사고들과 사투를 벌이는, 본인의 의지와 관련이 없더라도 연관이 되신 분들의 무운을 빈다.

교양･한글･용어･영어

next.js

작성일: 2023. 3. 8. (수)기본 설치방법yarn init -yyarn add next react react-dom 기본 사용방법package.json 수정하기"scripts": { "dev": "next", "build": "next build", "start": "next start" },pages 폴더 생성index.js 생성 및 컴포넌트 함수 작성하여 export# 기본 컴포넌트 index.jsexport default () => { return ( <> <h2>Happy World</h2> <Links /> </> ); } 기본 실행방법npm run dev(yarn run dev) -> 아무것도 없으면(pages 폴더) 실행 안 됨yarn next 하니까 3000 포트 실행되었음 라우터 설정방법Links.js 컴포넌트(components 폴더 내에 생성)라이브러리 가져옴import Link from 'next/link';이동할 링크 설정(a태그와 같다) 및 export 해줌export default () => { return ( <ul> <li><Link href={"/"}>root</Link></li> <li><Link href={"/classs"}>classs</Link></li> <li><Link href={"/happy"}>happy</Link></li> </ul> ); } happy.js사용할 파일에 불러와서 사용해준다.생성한 컴포넌트 불러오기import Links from "../components/Links";<Links />를 통하여 해당 컴포넌트를 불러온다. export default () => { return ( <> <h2>해피컴포넌트</h2> <Links /> </> ); }

nextjs･next･react･router

1주차 [피그마 배리어블을 활용한 디자인 시스템 구축하기] 발자국😱

일주일 동안의 나의 게으름 타파 작전!!bold님의 강의 [피그마 배리어블을 활용한 디자인 시스템 구축하기]수강 1주차(베리어블 등록하기) 이번주 나의 강의 ☑디자인 토큰과 베리어블 장점 비교디자인 시스템에 대해 알아보기 (디자인의 일관성, 브랜드 강화, 효율적인 개발, 시간 단축, 팀 간 협업 강화, 빠른 온보딩, 유지보수 용이, 높은 품질의 경험) 디자인 시스템은 혼자 만드는 것이 아니라 디자이너, 개발자는 물론 다양한 이해관계자들과 함께 만들어야 한다.) 베리어블의 구조(토큰계층) / 베리어블의 네이밍 구성요소 (개발자와 디자이너 사이의 공통된 이름 짓기, 미리 계획하에 만들기(엑셀시트))Primitive / Theme / Semantic으로 나누어서 사용에 맞게 베리어블 등록하기 (단계별로 어떤 베리어블을 참조 해야하는지 확실한 구분이 필요)등록한 베리어블을 공유할 수 있도록 문서화하기 (알아보기 쉽게 일관된 스타일로 문서화 하는 것이 중요(컬러의 경우 참조 베리어블 등록하는 것이 생각보다 시간이 오래 걸림 ㅠㅠ)) 강의를 들은 나의 회고 😭😭솔직히 처음에는 강의를 듣는 시간이 얼마 안걸릴거라고 생각했는데 실습을 직접하면서 배우는거라 생각보다 시간이 많이 걸렸다. 하지만 실습을 하면서 배우는게 몸으로 익히면서 배우는 거라 더 기억에 남는거 같아 좋았다. 그리고 강의의 퀄리티가 너무 좋아서❤ (실무에서 유용하게 사용할 수 있을 정도) 하루 하루 배울 수록 힘들었지만 기분이 좋아졌다. 게으른 나 다음주도 조금만 더 힘냈으면 좋겠다. 미션 컴플리트 중미션은 생각보다 어렵지 않았다. 강의를 들으면서 누구나 해결할 수 있을 정도의 수준이어서 처음엔 좋았는데 베리어블을 문서화 하는데 시간이 생각보다 많이 들었지만(아직도 하는 중😱) 나중에 회사에서 배운걸 적용하고 문서화를 할거를 미리 연습한다는 생각으로 하고 있다. (플러그인이 모든걸 해결해 주지는 않는다.😌) 볼드님이 1주차 온라인 강의를 해주셨는데 실무적으로 사용할 수 있는 것들을 자세하게 설명해 주셔서 너무 좋았습니다. 강의가 정말 필요하고 그동안 궁금했던 것들이 담겨있어 너무 좋았습니다. 다들 이 강의 꼭 들으세요.👍👍

UX/UI･베리어블･디자인시스템･피그마

[인프런 워밍업 스터디 클럽 1기 디자인] 3주차 발자국 (신영우)

학습 내용복습을 위해 이번 주에 필기한 강의 내용을 갈무리했습니다 베리어블 모드를 사용하는 경우라이트 모드 / 다크 모드로 설정이 나눠져 있을 경우다중 언어 지원이 필요할 경우디바이스별 대응이 필요할 경우멀티브랜드 대응이 필요할 경우 라이트 모드 / 다크 모드→ 빛, 배터리, 인지 능력과 관련되어 있음라이트 모드평범한 사람들은 훨씬 퍼포먼스가 좋음긴시간 노출될 경우 근시 확률이 높아짐다크 모드빛이 덜 발산해서 배터리가 덜 듦저시력자의 경우 다크 모드를 선호함단, 서비스에 따라 다름상품 또는 콘텐츠가 돋보여야 하는 경우(ex. 이커머스, F&B 서비스)에는 라이트 모드 지향몰입형 미디어를 제공해야하는 경우(ex. OTT 서비스)에는 다크 모드 지향플랫폼 마다 다크 모드 디폴트 배경색이 다름 (→ 그림자 등 디자인 에셋에 영향을 끼침)AOS → 짙은 회색 (#121212)iOS → 완전한 검은색 (#000000) 다크 모드 설정 시 주의할 점브랜드 아이덴티티 고려접근성 고려특히나 명암 대비디자인 요소 - 3:1일반 텍스트 - 4.5:1작은 텍스트 - 7:1지속적인 테스트로 수정 가능성 고려 발견한 설계 꿀팁기존 컴포넌트 사용해서 새로운 컴포넌트 만들 시 오토 레이아웃이 아닌 그룹으로 만들어주면 불린을 적용할 때 영역을 차지하지 않음 사이즈 조절할 때 백터 에셋도 같이 조절하려면 백터 컨스트레인을 Scale로 변경해주면 됌 Command+R로 레이어 라벨링할 때 숫자의 경우 ’nn’ 앞에 ‘n’ 지워주면 1자리 수로 적용할 수 있음 네스트 인스턴스 적용할 때 스페이스바 사용해서 한번에 검색해 여러개를 동시에 적용할 수 있음 그룹을 먼저 적용하고 오토 레이아웃을 하면 자동으로 잡히는 영역없이 오토레이 아웃을 할 수 있음 미션 내용회고를 위해 이번 주에 진행한 미션 내용을 톺아봤습니다미션 #9 - 피드백 컴포넌트 전체 만들어보고 색상 대비 점검을 하기미션 #10 - 네비게이션 카테고리에 해당하는 컴포넌트를 만들어 보기미션 #11 - 네비게이션 카테고리에 해당하는 나머지 컴포넌트를 만들어 보기미션 #12 - 베리어블 다크모드 개념을 익히고 활용해보기 이번 주 드디어 모든 컴포넌트 작업을 마치고 다크 모드 적용에 들어갔다!컴포넌트 만드는 과정을 돌이켜보면 프로그레스바 만드는 미션이 가장 재밌었다.1도 예상치 못한 기발한 방법으로 프로그레스바를 만들며 피그마가 얼마나 잘 되어있는 툴인지 새삼 깨달았다.다른 컴포넌트를 만들 때도 적용할 수 있을 것 같아 절대 까먹지 않고 기억해두려 한다.다크 모드 적용은 컬러 콘트라스트를 체크해 시멘틱 컬러 베리어블을 다듬는 과정이 꽤나 어려웠다.라이트 모드에서 하나의 모드가 더 생겼을 뿐인데 관리할 포인트가 무진장 많아진 느낌이다...나중에 고생하지 않으려면 시스템은 초반부터 잘 만들어야 함을 다시금 깨닫는 순간이었다...!다크 모드는 실제로 처음으로 적용해 보는데 계획하는 단계가 잘 이해가지 않는다.(나중에 혼자 할 수 있을까 걱정이다...ㅠ)다음 주면 막 주다!드디어 기다리고 기다렸던 실제 화면 만들기에 들어간다.지금껏 꽤나 오랜 시간 공들여 만들어온 컴포넌트를 신나게 사용할 때가 다가온 것이다...이 말이다...막주까지 잘 달려서 모든 미션 완수하자! 화이태ㅐ애애애앵~!! 스스로 칭찬하고 싶은 점 : 1) 아이콘 시스템 수정 필요한 부분들 수정한 점2) 타이포 그래피 시스템 행간 수정해서 스타일 가이드까지 적용해 놓은 점아쉬웠던 점 : 1) 컬러 콘트라스트를 체크해 최대한 모든 부분을 수용할 수 있도록 수정했지만, 어쩔 수 없이 대비가 미미한 부분이 존재하는 점2) 다크 모드에서 눈물을 머금고 넘어가야하는 디자인 에셋(ex. 스켈레톤 UI)이 존재하는 점보완하고 싶은 점 : 프리미티브 컬러를 수정해보고 싶다...!다음주 목표 : 지금 처럼 킵 고잉해서 모든 미션 완료하기~!~!!

UX/UI･피그마･디자인시스템･베리어블

90년대 컴퓨터 공학 이야기 (1) — 80년대 이야기 — 퍼스널 컴퓨터

90년대 컴퓨터공학과를 다니면서 모은 에피소드들이지만, 기억은 80년대의 몇몇 단어들에서 시작한다.퍼스널 컴퓨터 경진대회1985년 국민학교에서 방과후 학습으로 산수경시반을 뽑았는데, 당시 부산에서 인근 구청에서 있던 수학경시대회가 없어지는 바람에 컴퓨터반으로 변경되어 운영이 되었고, 퍼스널 컴퓨터라는 것을 접하고 경진대회라는 것도 접하게 되었다. 지금 있는 올림피아드의 원형일 것이고, 당시 운도 좋았어서 1986년에는 부산 대표로 서울 잠실이라는 곳을 처음 올라오는 경험도 하게 되었다. 마치 과거 시험을 보듯이 넓은 공간에 각자 컴퓨터를 들고 와서 4시간인가 시험을 치르는 자리였고, 여기를 오기 위해 구 대회, 부산 시 대회 등을 거쳐야 했었다.첫 출전 당시 버그로 인한 탈락의 아픔이 있었고, 이를 극복해 보고자 지역에서 여러 번의 시도를 하며 중학교 2학년까지 여러 가지 기량을 쌓음과 동시에 컴퓨터 게임과 더 친해지게 되었다. 전국 대회와의 인연은 더이상 닿지 않았지만, 마지막 대회에서 구 1위까지는 올라갔던, 나름 해피 엔딩.삼성 SPC 1000우리 집에서의 첫 삼성 제품은 이 컴퓨터였다. 학교에서 접하고 나서 서울 전국대회 출전권을 따고 나서 부모님을 졸라서 인연이 닿은 첫 컴퓨터. 테이프를 이용한 낯선 기계음, 그것이 끝나면서 시작되는 게임들, 흑백 화면에서 펼쳐지는 dot 의 아기자기함 등… 국민학교를 함께 했고, 각종 대회에 같이 다녔으며 아쉬움과 실패를 경험하게 했던 기억들.컴퓨터학습매달 용돈을 받거나 벌어야 했던 첫번째 이유. 가끔씩 자매품인 학생과 컴퓨터 도 있어서 매 달 둘 중 어느 것을 사야 하나 고민을 했던 경험도 있고, 더 고급진 책도 있었던 기억이지만, 적당히 재미난 내용들, 신기술, 거기에 게임도 섞여 있었음. 무엇보다 이 책이 가진 의미는 소스 코드들에 있었고, 이를 타이핑하면서 인내심을 알게 모르게 키워 왔던 게 나중에 값지게 쓰였던 것 같다.Apple II+중학교 때 경진대회를 위해 졸라서 하나 새걸로 장만했던 기억인데, 이 때 제품이 정확하게 뭐였는지는 기억이 없다. IIe 였던 거 같기도 하고… 툭툭거리는 키보드가 마음에 들었었고, 플로피 디스크의 신세계를 여기서 경험하게 되었다. 경진대회를 빙자했지만, 게임 중독으로 가기 일보 직전이었던 거 같다.Lode Runner, Ultima 4, Ultima 5, Ogre나의 중학교 생활을 함께 했던 동지들. Lord British , thou art , 그리고 각종 게임용 spell , ingredient , weapon , dragon , …— -이후 나는 수험생 모드로 입시에 전념하면서 90년대를 맞이한다.

교양･컴퓨터공학･90년대

한국 IT 용어 이야기 (번외) - "인공지능"

최근, 특히 ChatGPT 이후 격변의 시기에 영어로도 한글로도 어마어마한 신조어들이 나오게 되면서 헷갈리게 되었다. 이전에는 리뷰 받은 후 발표되는 논문들과 official posting 이 source of truth 였다고 한다면 요즘에는 리뷰받지 않은 일방적인 주장 위주의 논문들, 각종 신문, 유튜버, communicator 들이 정신 없는 이야기들 속에서 가끔씩 잠깐만? 싶은 일들이 있곤 한다. 최근에 한 학기 AI literacy 관련 강의를 위해 정리하던 내용들... 2024년에는 또 어떤 신조어들이 생겨날 것인지... 쏙쏙 들어오는(?) 번역들Artificial Intelligence : 인공지능 . 가끔씩은 스피커 대화 서비스 or 챗봇 서비스를 나타내기도..Neural Network : 신경망Reinforcement Learning : 강화학습Gen AI , Generative AI : 생성형 인공지능오래 전부터 쓰였던, 여러 사람들을 통해서 쓰이고 있는 단어들. 상대적으로 귀에 잘 들어 옴. 최선을 다했다 싶은 번역들 ( 그냥 영어로 써도... ? )Convolutional neural networks : 합성곱 신경망Recurrent neural network : 순환 신경망regression : 회귀time series : 시계열Machine learning : 기계 학습Deep learning : 심층 학습Training / Inference : 훈련 / 추론RLHF : 인간 피드백 강화 학습Federated learning : 연합 학습(?) 이제 번역이 어색해 지기 시작함...영어 그대로 쓰자TransformerAttentionFine tuning / retrainigLanguage model / Large language model / small language modelLarge multimodal modelFrontier AI 앞으로 나올 수많은 개념들... 어지간하면 원어 기준으로 받아 들여 보자.. 고유명사 혹은 일반 명사들OpenAI / GPT4 / ChatGPT / 챗GPTGemini / Llama / midjourney / langchainCohere / Adhere / ...PyTorch / Tensorflow / ...Prompt / agent /약자들 : RAG / MoE / BERT ... 뭐가 회사 이름이고, 뭐가 제품 이름인지 이제 헷갈리기 시작... 타사 제품과 서비스와 헷갈리지 않을 수 있으면 좋겠고, 제발 일반명사는 쓰지 말고 귀찮더라도 풀어 설명해 주시길.... --a 불편한 신조어들초거대 AI : 한국형 마케팅 중심의 용어로 추정. "초", "거대" 둘 다 불편함. AI != LM 의 시각에서 알맞은 영어 번역도 떠오르지 않고, 어딘가에서 말하는 hyperscale 은 이미 data center 용 computing 을 나타내는 말로 적절한 영어 번역이 아님.생성형 모델 : 언어 모델을 이용한 생성 서비스 ? bonus - Very초거대 라는 단어를 들으면서 무의식적으로 'very는 아니겠지?' 라는 생각을 했었다. 오래 전 컴퓨터 구조 시간에 배웠던 몇몇 단어들이 생각났는데, '설마 very는 아니겠지?' 라며 들여다 보면 여지 없이 very 였어서 뭔가 작명에 게으른 선배 기술자님들을 떠올렸더랬다.VLSI : Very Large Scale Integration ( 초고밀도 집적 회로 )VLIW architecture : Very Long Instruction Word architectureVHDL : VHSIC Hardware Description Language : Very High Speed Integrated Circuit Hardware Description Language

교양･용어･한글･영어

[인프런 워밍업 스터디 클럽 1기 디자인] 2주차 발자국 (신영우)

학습 내용복습을 위해 이번 주에 필기한 강의 내용을 갈무리했습니다프로퍼티의 종류들Text 프로퍼티 → 디폴트 텍스트 설정instance swap → 변경할 수 있는 에셋 설정이때 Value 에서 디폴트 에셋 설정 가능Preferred values에서 변경할 수 있는 에셋들 설정 가능프로퍼티의 위치를 바꿔주는 것도 중요Leading icon 의 Boolean 프로퍼티 아래 → Leading icon 의 instance swap 프로퍼티를 위치시켜 디자인 시스템 사용성을 증진시키는 구성을 만들어 줌에셋의 높이를 통일시켜주는 것도 중요모 컴포넌트에 min, max 하이트 값을 넣어주면 자 컴포넌트에도 적용 볼드님 질의 응답 답변Storke가 살이있는 아이콘은 Union을 먼저 한 다음 Outline Stroke로 깨야함 → Storke 값이 살아있으면 리사이징 시 값이 유지 됌 (리사이징 되지 않음) 발견한 설계 꿀팁인스턴스가 조합된 최종 상태의 컴포넌트는 한번 더 묶어주기디자인 시스템 사용성 챙기기이 때 기준이 되는 모 컴포넌트는 ‘part/’ 라벨링을 붙여 검색 시 노출 안되게 해주기 ex)컴포넌트 베리언트에서 절대 위치(앱솔루트 포지션) 적용할 수 있음 그리고 절대 위치 적용한 디자인 에셋에 컨스트레인 적용해서 반응형으로 설정 가능함ex)컴포넌트 베리언트 정의한 영역 안에서 일괄 적용되지 않게 하려면 각 개별 컴포넌트 안에서 에셋을 정의하면 됌Boolean으로 적용하면 안되는 부분, 적용하지 않으려는 목적으로 작용ex)작업 이후 디자인 에셋들 Contrast 체크해서 접근성 갖추기몰랐던 점들이미지 삽입 관련이미지도 스타일 등록이 가능하니 자주 쓰는 이미지는 등록해놓으면 좋을 것 같다 이미지 삽입할 때 ‘프레임 배경 컬러 선택 → 이미지 선택’해서 넣어주는게 좋을 것 같다( 1. 이미지 자유롭게 리사이징 가능 / 2. 이미지 다른 에셋으로 곧바로 변경 가능 )오토 레이아웃 설정 관련오토 레이아웃 설정에서 스트로크 같이 면으로 처리 안되는 친구들의 ‘Included / Excluded’를 설정할 수 있다오토 레이아웃 설정에서 에셋들의 스택 순서를 ‘Last on top / First on top’으로 변경할 수 있다 미션 내용회고를 위해 이번 주에 진행한 미션 내용을 톺아봤습니다미션 #5 - 피그마 컴포넌트 기초 배우고 입력 컴포넌트 만들어보기미션 #6 - 입력 컴포넌트 나머지 만들고 마지막 점검하기미션 #7 - 디스플레이 컴포넌트 만들어보기미션 #8 - 디스플레이 컴포넌트 나머지 만들고 마지막 점검하기 이번 주 미션도 저번 주와 마찬가지로 총 4개의 미션이었다.미션 #5, #6, #7, #8 과정 모두 컴포넌트를 만드는 미션으로 UX 경험적으로 꼭 필요한 공통 에셋들을 만들어보는 과정이었다.실무에서 공통 에셋들을 만들어본 적은 있지만, 수업처럼 모든 에셋들을 만들어본 적은 없어서 본격적인 과정들이 쉽진 않았다. (생각보다 시간이 오래걸리는 점도 꽤나 힘들었다)그래도 미션 #5, #6, #7, #8 과정을 거치며 베리어블 사용하는 것에 어느정도 익숙해진 것 같다. (조금 속도가 붙었다)중간중간 적용을 까먹고 빼먹는 친구들이 종종 있는데 좀 더 꼼꼼히 살피면서 설계할 필요가 있는 것 같다.다음 주도 공통 컴포넌트 에셋을 만드는 작업을 이어서 진행한다.빨리 페이지에 만들어놓은 컴포넌트 에셋들을 적용시켜보고 싶다...!완주까지 기대가 되는 요즘이다. 굿! 스스로 칭찬하고 싶은 점 : 월요일, 화요일 매우 몰입해서 미션 #5, #6, #7, #8을 모두 완주한 점아쉬웠던 점 : 아이콘 시스템, 타이포 그래피 시스템을 다듬어야 하는데 다듬지 못한 점보완하고 싶은 점 : 타이포 그래피 시스템도 베리어블을 적용해보고 싶은 점다음주 목표 : 3주차 들어가기 전 아이콘 시스템, 타이포 그래피 시스템 다듬어야할 친구들 무조건 손보고 들어가기!

UX/UI･피그마･베리어블･디자인시스템

한국 IT 용어 이야기 (8) - "팀"

아마도 어릴 때 프로 스포츠들로 팀을 접해서 은연중에 아래와 같은 고정 관념들이 있어 왔다. 1) 적으면 5명, 대개 9명, 많으면 후보 포함 25명, 2) 공통의 목표가 있고, 경쟁을 해서 이겨야 할 상대방이 있음.... 3) 비슷한 규모의 다른 팀이 언제나 있음. 이후 대학교에 들어가서야 팀 프로젝트 같은 걸 접하게 되었고, 다른 단어 고민 없이 여러 가지 문맥에 상관 없이 팀이라는 단어를 접해 왔었다. 아래는 사회 생활을 하면서 접하게 된 "팀"에 대한 몇가지 이야기들..팀장과 팀원사회 생활을 하며 팀장이라는 직함을 쉽게 접하게 되었는데, 삼성전자의 경우 상무이사급 임원이 팀장으로 200명을 거느리고 있는 경우가 있었고, 자그마한 회사에서 1인 팀의 팀장이라 불리는 사람이 있기도, 혹은 3-4명 조별과제 정도 크기의 일들이 있었더랬다. 이 경우 팀장의 역할이라는 것도 스펙트럼이 넓었고, 인사권을 총괄하는 의미부터 간단한 POC 까지 다양했다. scope는 매번 눈치껏 알아서 챙겨야 했지만, 팀장의 호출 하에 한 자리에 모일 정도 되면 하나의 팀원으로 생각하는 정도...?대화 상대로서 ### 팀장이라는 사람을 만났을 때 어디까지를 기대해야 할까 ? 반대쪽의 입장에서 기대하는 정도에 따라서 난이도가 있었던 기억이고, 종종 '팀장이라는 당신 말고 책임자와 이야기하고 싶다' 라는 생각을 했던 기억이다.미국에서의 팀생각보다 광범위하게 쓰여서 다른 의미로 눈치가 필요했었다. 식당에 가면 종업원들이 팀 혹은 crew 로 불리우고 only team member allowed from here 등으로 뭐랄까 그룹지어질 수 있는 모든 규모를 다 팀으로 부르고 있었던 거 같다.회사에서 팀이 커지거나 해서 여러 계층이 필요하게 되었을 때 매번 이름을 짓는 것도 일인데, 행정적 편의로 누구누구네 팀을 그냥 불러서 쓰곤 했었다. Rajan's team, Jen's folks, Michael's guys 등등.. report line 을 통째로 들고 생각하는 모습이라 관리하는 측면에서 많은 이득이 있었다.조직도가 다른 사람들을 차출의 형식으로 모아 일하게 될 때 코드 네임 등을 유용하게 썼던 기억이다. 이전에 구글 플레이스토어 한국/일본 과제를 할 때 미국에서 일하는 한국어/일본어 능력자들을 차출한 후 "dragonball" 이라는 한일관계에 나름 중립적인 팀 이름으로 모인 적도 있었고, 그 이전에 한동안 Calypso 라는 이름으로 50명 정도의 팀이 알려진 적도 있었더랬다. 만나는 거의 모든 사람들과의 대화에 "What is Calypso?" 로 시작했어야 하지만, 나쁘지 않았고, 당시 이름이 과제의 주제와 꽤 잘 맞아서 많이들 좋아했던 기억이다. 검색, 유튜브 등과 같이 거대한 게 되지 않는다면 영원한 것은 없고, 결과적으로 과제 별로는 2-3년 정도가 적당한 life cycle 이었던 거 같다.목적 조직/기능 조직, squad, chapter, task force한국에 다시 조인하고 나서 가장 어색하게 적응했던 것이 목적 조직, squad, chapter, 등의 유사 팀의 운용에 대한 내용이다. 10년 넘게 구글에서 speed & flexibility 에서 전혀 손해를 보았다는 생각이 없는 상태여서 개인차가 물론 있을 것인데, 한국에서 대다수의 회사들이 agile, velocity 등의 명분으로 squad, chapter, silo 등의 이름으로 팀들을 다양하게 나누어 정의하고 운용하고 있음에 많이 어색해 한다.개인적인 선입견이 강하게 있다. 먼저, spotify 에서 시도했지만 실패로 기록이 남았다고 하는데, 그에 비해 너나 할 거 없이 쓰고 있는 게 이해가 잘 안 된다. 그리고 스쿼드의 형태로 운용되려면 아래 3가지 정도는 챙겨 져야 한다는 생각이다. 1) 해체를 포함한 기간을 담보한 직원들 rotation 보장, 2) 모든 직군 별 commitment level ( up to 100% ) 3) 최소한의 코드 quaitly ... 더 깊은 이야기는 케바케일 거 같으니 여기서는 이 정도만 ...당장 치루어야 할 과제를 하기 위해 어쩔 수 없이 시작했다가 여러 이유로 계속 눌러 붙어 있으면서 부작용들이 진행되는 모습들이고, 그게 특히 스타트업씬에서는 더 적나라하게 나타나는 것으로 이해한다. 코드의 경우 쓰는 사람들만 있고 지우는 사람들이 없는 모습과도 닿아 있고, 한두명이 번아웃이 났을 때 위험에 더 드러나게 되는 모습이 되기도 한다. 회사들마다 사정이 다르겠지만, 꼰대스러운 한 마디의 잔소리만 하자면, 스쿼드든 챕터든 나 말고 상대방을, 동료를 한 번 더 생각하고 거드는 모습이 더 있고, 그걸 매니지먼트에서 존중하면 조금 더 낫지 않을까 하는 생각이다.Lead, head of ###구글에 다녔을 때도 한국에서는 상대적으로 작은 규모의 팀이다 보니 중소기업에 다녔을 때처럼 명함의 직함이 조금 뻥튀기 되어 있기도 했다. 구글 내에서는 그래도 자기 직함을 쓰는 건 매니저 승인이 필요했지만, 아무래도 링크드인 출범 이후에 (살짝 과장된) 직함들이 감투로서 쓰이곤 하는 거 같다. 규모가 작은 회사일 수록 Chief , Lead , Head 등이 아무래도 자주 보이는데, 면접 과정이거나 실제 업무를 같이 해 보기 전에 판단을 해야 하는 입장에서는 난이도가 꽤 높다. 뭐 거짓말을 악의적으로 하려고까지는 아니라 생각해도...게다가 최근에 보았던 사례들은 감투를 주면 바로 퇴사를 감행하고, 그들의 이력서는 ### Lead 로 update 되어 있었다. 타사와 협상을 잘 이뤄냈다고 긍정적으로 볼 수도 있겠으나, 새로운 감투를 달았으면 그 감투를 달고 몇 명의 사람들과 어떤 일을 이루어 냈는지 등이 궁금하고 반대로는 자랑하고 싶어야 할텐데, 서로 속고 속이는 세상이 되고 있는 거 같아 조금 씁쓸하고 불안(?)하기도 하다.

교양･용어･한글･영어

[인프런 워밍업 스터디 클럽 1기] 디자인 1주차 발자국

첫번째 발자국우여곡절이 많았던 1주차였다. OT때 하루에 하나씩 미션을 수행하겠다는 다짐과 달리 미션을 못 한 날도 있고 몰아서 한 날도 있었다. 어찌저찌 1주차를 맞았으니 그동안 돌아보는 발자국을 작성해봐야겠다. Day1 OT피그잼에서 수 많은 사람들의 마우스 커서와 함께 오리엔테이션이 진행되었다. 멘토님은 영국에서 우리와 다른 시간대에 계시면서 라이브를 진행하셨다. 인프런 워밍업 스터디 커리큘럼을 보면 매일 미션이 있어서 다 지킬 수 있을까? 하는 생각이 들어 신청하기 전 고민이 있었다. 미션은 기한을 놓치더라고 올리면 되고, 미리 올려도 된다고 말씀해주셔서 심리적으로 편안해졌다. 아무래도 온라인으로 진행되고 혼자하는 스터디라서 외롭지 않을까 싶었는데 피그잼에서 만난 다른이들의 마우스 커서가 정말 반가웠다. OT때 피그잼에 작성한 세 가지가 있었다. 스터디 러너로 신청한 이유, 매일의 계획, 자기 자신에게 줄 보상. 내가 적은 세 가지 항목들을 잊지말고 스터디에 열심히 임해야겠다. DAY2 배리어블과 토큰, 디자인 시스템의 개념강의를 시작하며, 먼저 해야할 것이 있었다. 그것은 바로 피그마 에듀케이션 계정 신청이다. 현재 개인 피그마 계정을 무료 플랜으로 사용하는 나는 강의 시작 전 필수 사항에 나와있는 내용으로 에듀케이션 계정을 신청했다. 안내해주신 방법으로 진행하니 금새 신청이 완료되었다. 1주차 중에서 이 날이 가장 어려웠다. 토큰과 배리어블의 개념을 유튜브나 디자인 아티클을 보며 대략적으로 알고 있었다고 생각했는데 아니었다. 그동안 내가 알고 있던 것은 모두 수박 겉핥기 뿐인 지식이었다. 아마 개념 강의를 들으며 적은 노트가 다른 강의보다 제일 많았다.특히 이번 파트에서 좋았던 건 내가 디자인시스템을 뜯어보며 가장 궁금했던 이름들의 의미를 알 수 있어서 좋았다. --md-, spectrum-, --p-, --lsdg- 이런 이름들의 의미가 시스템의 이름이라는 것을 알 수 있어서 좋았다. 그리고 티셔츠 사이즈라는 개념도 배웠는데, 예전에 디자인시스템을 뜯어보다 발견한 문자 중 sm과 lg가 small, large의 약자인 지 몰라서 한참을 검색했던 기억이 생각났다.Shopify Polaris에서 캡쳐 Day3 색상 스타일 등록 및 배리어블이 파트에서는 무엇보다도 색상 구조의 이름을 비교해보기 위해서 직접 엑셀에 이름을 하나하나 뜯어서 정리해보셨다는 것이 인상깊었다. 그동안 디자인시스템을 분석하기 위해 각 사이트들을 모아서 살펴보고 피그마 파일도 뜯어봤지만 이렇게 정리해볼 생각은 못 했다. 비록 지금은 미션이 급해서 엑셀로 정리를 못 했지만 완강 이후에 2회독 때 꼭 이 작업를 해봐야겠다고 결심했다. 강의에서 가장 인상깊었던 부분 - 색상 배리어블 구조, 이름 짜보기에서 캡쳐강의를 들은 이후에 MS의 Fluent 2 Design System의 Color token 문서를 다시보니 전과는 다르게 보였다. 그 전에는 쏟아지는 영어와 색상들과 스크롤 길이에 압도 당하는 느낌이었는데 이제는 찬찬히 살펴볼 수 있게 되었다.Fluent 2 Design System에서 캡쳐 드디어 첫번째 미션이다. 처음에 강의 명만 봤을때는 컬러를 어떻게 헥사코드로 뽑을지 HSL로 뽑을지 궁금했었는데 강의를 보며 모두 플러그인으로 진행하는 것을 보고 큰 충격을 받았다. 그렇다. 피그마는 이제 플러그인이 발달해서 적재적소에 쓰기만 하면 되는 아주 편리한 툴이란 것을 새삼 깨달았다. 물론 실무에서는 브랜드컬러에 맞게 색상을 좀 더 세밀하게 조정하기도 하겠지만 플러그인으로 빠르게 작업을 한다며 업무 효율도도 많이 오르고 좋을 것 같다. Color Scoping이란 기능이 신기했다. 처음에 배리어블에 색상을 등록하면서 이렇게 계속 등록하다간 나중에 배리어블 창은 작고 선택할 색상이 많아서 찾느라 시간 보내는거 아닐까? 하는 생각은 기우였다. 해당 기능으로 원하는 요소에 원하는 색상만 보이게 한다는게 편하고 좋았다. 정말 피그마란 툴이 효율적으로 프로덕트를 만들기 위해 제작되었다는 걸 또 깨닫게 되었다. 나는 현재 실무에서 배리어블이 아니라 스타일을 사용하여 작업하고 있는데 이제 배리어블을 알게되었으니 언젠가는 스타일에 있는 컬러를 배리어블로 전환하는 일을 해야겠다는 생각도 들었다. Day4 간격 배리어블, 타이포그래피, 아이콘간격 배리어블을 미리 알았으면 얼마나 좋았을까… 그동안 4,8,12로 간격을 주었지만 손가락이 미끄러져서 5,9,11 이런 식으로 잘못 오기된 나날들이 떠올랐다. 개발자 분이 작업한 간격이 이상해서 다시 살펴보면 내가 작업한 피그마에 간격이 잘못 입력되어 있을 때가 종종 있었기때문이다. 타이포그래피는 영문으로 진행되어 조금 아쉬웠다. 타이포 스타일 가이드 중에 국문으로 만들어주는 것이 있는지 찾아봐야겠다. 국문의 경우는 항상 자간을 조정하는데 영문은 그런 작업이 필요 없는지도 궁금했다. 추가로, 일단 화면 만들기 전에 타이포그래피 가이드를 먼저 만드는 점이 의아했다. 가이드를 만드는 선행 작업를 통해 작업물의 타이포 위계를 명확히 하려는 것이 목적인 거라면 실무에서 가이드로 만든 사이즈 외의 글자가 생겨날 땐 어떻게 대응하시는지 궁금했다. Feather Icon은 무료 아이콘으로 여러번 소개가 되어서 알고 있었는데 이렇게 강의에서 만나고 써보니까 새롭다. 일괄적으로 원하는 사이즈를 원하는 두께로 추출 가능하다는 점이 정말 좋았다. 바퀴를 다시 발명하지 마라 라는 격언이 떠올랐다. 오픈소스에다가 MIT라이선스인 아이콘 사이트가 하나 생각났다. 다른 러너분들도 알면 좋은 정보라고 생각되어 사이트를 기재해본다. Feather Icon처럼 두께 설정 세밀하게 할 수는 없지만 크기와 색상을 일괄적용 할 수 있어서 즐겨찾기 해둔 곳이다.Phosphor Iconshttps://phosphoricons.com/ Phosphor Icons에서 캡쳐 Day5 그림자 효과, 반응형 기준점, 기타 배리어블나는 정말 Elevation이 구글의 머터리얼 디자인 가이드를 살펴볼 때 너무 어려웠었다. 일단 단어가 생소하기도 하고 국문으로 일대일 번역하기 어려운 단어기도 해서 그런 것 같다. 특히 구글의 m3에서는 m2보다 내용이 더 추가되어 더 헷갈렸었다. 그런데 강의에서 ‘높낮이’라고 표현해주셨는데 그때 아! 하고 개념이 이해가 되었다. 비록 강의에서는 그림자(shadow)라고 한 뒤 미션을 진행되었지만 높낮이라고 이해하며 머터리얼 디자인가이드를 다시 읽으니 전과 다르게 이해가 잘되었다. 내게 Elevation의 개념을 가장 잘 설명해줬던 파트(강의 중 캡쳐) 반응형 기준점 설명 시에 나오는 고정형(fixed)과 반응형(fluid)는 미리 알고 있던 개념인데 하이브리드 개념은 처음 알게 되었다. 주로 왼쪽에 SNB가 있는 경우 왼쪽은 고정형, 오른쪽은 반응형으로 하는게하이브리드의 예시라고 하셨다. 이걸 알고나니 너무 속이 개운했다. 지금 실무에서 작업하는 레이아웃이 하이브리드 형태인데 그동안 이름을 몰라서 이걸 고정형도 아니고 반응형도 아니고 뭐라고 불러야되나 고심했던적이 있기 때문이다. 이렇게 강의를 들으며 새로 알게되는 사실이 그동안 고민을 했던 부분을 시원하게 해결해줘서 좋았다. 기타 배리어블에서는 테두리(Border)와 투명도(Opacity)를 다뤘다. 색상 배리어블 할 때 Frame, Text, Icon, Border의 색상 넣는 것을 할 때 보더의 두께나 투명도도 배리어블이 있었으면 좋겠는데 라는 생각을 했는데 강의가 나온 이후에 피그마에서 업데이트가 있었나보다. 여기에서도 앞에서 했던것과 마찬가지로 배리어블을 등록하고 쉬프트 누르고 왼쪽으로 클릭해서 값을 지정하니 정말 편했다. Day6 스타일 파운데이션 다듬고 내보내기컴포넌트 설명을 붕어빵에 비유하신게 정말 찰떡이고 기억에 남았다. 그리고 컴포넌트 만드는 순서를 두 가지 보여주셨는데 두 가지 사례 중에서 내가 실무에서 사용하고 있는 방법이 첫번째 방법이라서 익숙했다. 앞으로 강의도 이와 같은 순서로 진행된다고 하는데 내가 실무에서 사용하고 있는 방법와 어떤 부분이 같고 다른지 비교해 볼 수 있을 것 같아서 기대가 된다.앞으로 강의에서 사용될 예정인 컴포넌트 만드는 순서 캡쳐강의 자료로 공유해주신 컴포넌트 워크시트에서 웹접근성 항목을 보며 그동안 나는 웹접근성을 지키면서 컴포넌트를 만들었는지 스스로를 되돌아보게 되었다. 왜냐면 일정에 쫓겨 항상 급하게 무언가를 만들고 화면을 쳐내기에 바빴지 이렇게 상세하게 정리하고 체크해본적이 없기 때문이었다. 아직 미션4는 작업중인데 디스코드에 올라오는 다른 러너들의 다양한 스타일이 무척 흥미롭다. 나도 나만의 스타일 가이드를 만들어서 미션을 마무리 지어야겠다는 생각을 했다. DAY7 첫번째 중간점검 및 질의응답 세션특별강의에서 가장 신기한 것은 아이콘이 안 깨지게 조정하는 앤트맨 전략이 정말 신기했다. 깨진 아이콘 문제를 해결하기 위한 다양한 사례들을 하나하나 보여주셨는데, 아이콘 문제를 해결하기 위한 튜터님의 집념에 경의를 표하고 싶었다.피그마에서 최근 업데이트 된 멀티 에딧은 업데이트되었다는 소식만 듣고 시간이 없어서 제대로 살펴보지 못했는데 이 세션에서 자세히 살펴 볼 수 있었다. 앞으로 다양한 컴포넌트를 만들 때 정말 잘 쓰일 것 같다. 특히 멀티 에딧을 할 때 아이콘은 프레임 상태가 아니라 꼭 에셋 상태로 등록해야 멀티 에딧을 제대로 쓸 수 있다는 것도 알게 되었다.디스코드 질문 답변 채널에 남긴 질문에 대한 답변을 들을 수 있었는데, 강의를 들으며 궁금했던 부분을 이렇게 라이브 세션으로 답변 받을 수 있어서 속 시원했다. 아이콘 크기가 다른 경우에는 버튼도 크기를 다양한 세트를 준비하는 것이 작업에 더 효율적이라고 알려주셨다.내가 디스코드 채널에 올린 질문 그 외 추가로 채팅창에 올라오는 질문들도 하나하나 모두 답변해주셔서 정말 감사했다.Q.아이콘도 사이즈별로 구성하는걸 추천하나요? (16px, 24px, 32px…)→ YES. 그렇게 쓰려고 아이콘을 깨는 겁니다. 그래야 사이즈가 다양하게 조절해도 되니까요. 우리 회사 디자인 리소스가 많다면(=디자인 일할 사람도 많고, 디테일을 원한다면) 다양한 사이즈 추천. 하지만 사람이 없다. 그럼 하나의 아이콘으로 쭉 쓰는걸 추천.Q.오픈소스 아이콘을 써도 무방할까요?→ YES 디자이너가 하나하나 만들 수는 없다.Q. 아이콘을 flatten selection 하면 수정이 불가능한데, 원본을 따로 저장하나요?→ YES 원본은 따로 저장해둡니다. 나 말고 다른 사람이 어떻게 쓸 지 모르기 때문에. 특히 프레임으로 만들어진 아이콘 라이브러리 따로, 시스템에서 사용하는 것 따로 존재함 특강에서 앞으로 만들 컴포넌트 종류를 살짝 보여주셨는데 정말 많았다. 수많은 컴포넌트가 나를 기다린다는 사실이 너무 기대되고 흥미진진하다. 번외로내가 미션을 제공해주신 미션보드가 아니라 다른 곳에서 제출해서 냈다는 사실을 미션이후에 받은 피드백을 통해서 알았다. 내가 왜 그랬나 다시 돌이켜보니까 에듀케이션 계정을 생성하고 팀 라이브러리를 지정한다는게 그대로 미션을 진행했던 것이었다. 분명 오리엔테이션으로 안내받은 사항이었는데 깜빡했었나 보다. 다음 미션부터는 제공해주신 미션보드를 통해 진행해야겠다.

UX/UI･피그마･피그마토큰･피그마배리어블･figma･디자인